Installing tinymce on my pages - tinymce

I have installed tinymce. Basically, when I go into my cms I make the changes. For example, making the text red. In the edit page it works fine, but when I go into my website, the changes do not appear. Furthermore, when I click on "submit" in my cms and then re-edit the content (by clicking on edit), the changes are gone. As if I have never tried changing anything. I'm an integrator (as I'm just starting out), not a programmer, so I have trouble understanding what I am missing or what I'm doing wrong.
EDIT: I can use the bold tool and works fine. But colouring for example doesn't wanna seem to work. My text does not stay red :(
This is the code I have on my edit page:
<head>
<script src="../tinymce/jscripts/tiny_mce/tiny_mce_src.js"></script>
</head>
<body>
<script>
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
skin : "o2k7",
plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosave",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
});
</script>

This might be because of the method tinymce uses to color parts of the text.
Use firebug or a similar tool to check out how tinymce styles it and what you get on the website. There will be a difference between the two of 'em.

Related

TINYMCE - How to turn off all auto replacements?

Is there any way to turn off all auto replacements in TINYMCE ?
Its replacing my <b> tags to <strong> and a
full url such as <a href="http://example.com" is getting turned into <a href="../example.com"
and so on.
I tried to use those 3:
extended_valid_elements : '*[*]',
cleanup : false,
verify_html : false
No luck so far.
If you want <b> and <i> tags instead of <strong> and <em> you can use this setting in your TinyMCE configuration:
extended_valid_elements: "b/strong,i/em", //force strong-->b and em-->i
TinyMCE also has a variety of options for managing URLs:
https://www.tiny.cloud/docs/configure/url-handling/
You should look at those options to see how they can help address your URL issue.

TinyMCE: delete ../ by images link

I use TinyMCE Version 2.1 for my panel.
Sorry, how can I remove from the links of the images this symbol "../"?
<img src="../images/nameimage.jpg"...>
I would like these links:
<img src="https://www.site.it/images/nameimage.jpg"...>
and NO this link:
<img src="../images/nameimage.jpg"...>
Thanks a lot ;)
Alexander
Try this code in your init function
tinymce.init({
relative_urls : false,
remove_script_host : false,
convert_urls : true,
});
There are several configuration options that allow you to adjust how TinyMCE handles URLs:
https://www.tiny.cloud/docs-4x/configure/url-handling/

Tinymce editor enable image upload and media upload

i have installed tinymce editor...
i only can add an image or add a media from copying and pasting some url,i need to enable upload image or media...and not only a link,any help please?
i have used this code for my text area:
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "specific_textareas",
editor_selector : "page_content",
plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
});
</script>
By default tinymce does not provide uploading images or media facility from clients computer to your server. But there is a plugin which is paid will give you all this facility. Here it goes.
http://www.tinymce.com/enterprise/mcimagemanager.php
Good Q,for ASP.NET MVC project simple yet, and settings fully setup.No problem worked cross browser...,Try this open source project http://tinymcefckfilemanger.codeplex.com/

How to integrate TinyMCE is Struts application

Can some one please explain how to do integrate TinyMCE in Struts application?
1.I have downloaded the tinyMCE
2.I added tiny_mce.js in my java script folder.
3. In my jsp , I added this line
< SCRIPT LANGUAGE="JavaScript" SRC="jsp/js/tiny_mce.js">
I have just one text area named "contactComments"
I still don't see rich text box.
Ps: Do I need to place entire tinymce folder in to my Javascript folder in the project setting?
I only put timy_mce.js
It should be something like:
<SCRIPT LANGUAGE="JavaScript" SRC="jsp/js/tiny_mce.js">
<SCRIPT LANGUAGE="JavaScript" SRC="jsp/js/tiny_mce_config.js">
And then you use the config file to specify the preferences of TinyMCE for that page. If you want TinyMCE to replace any textbox, you need the preference:
mode : "textareas",
My entire config for example is:
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "table,paste,fullscreen",
relative_urls : true,
convert_urls : false,
// So we can put the google maps in the page
extended_valid_elements : "iframe[src|width|height|name|align]",
// Theme options
theme_advanced_buttons1 : "code,|,cut,copy,pastetext,|,link,unlink,anchor,image,charmap,|,fullscreen",
theme_advanced_buttons2 : "bold, italic, underline,|, bullist, numlist,|,outdent,indent,|,formatselect",
theme_advanced_buttons3 : "tablecontrols",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left"
});
I think you should read the TinyMCE documentation a bit more carefully, this is all explained.

tinyMCE - source code editing in a textarea

I'm playing around with MCE, I was wondering if there was the possibility of letting the user enter source code into a post, much like the 101010 button in this form.
You'll need to add plugins: "code" to the initialization code as follows:
tinymce.init({
plugins: "code"
});
https://www.tinymce.com/docs/plugins/code/
The option exists. One of the optional buttons has 'html' written on it and can be used to go into HTML editing mode. You can see it in this full featured example - 6 places left of the top-right corner.
Try 'code' plugin along with tinymce.min.js
e.g.
<script src="~/Scripts/tinymce/tinymce.min.js"></script>
<script src="~/Scripts/tinymce/plugins/code/plugin.min.js"></script>
<script>
tinymce.init({
selector: 'textarea',
plugins: "code",
toolbar: "code" });
</script>