i'm using tinymce style_formats like this:
style_formats : [
{title : '20px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '20px'}},
{title : '25px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '25px'}},
{title : '30px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '30px'}},
{title : '35px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '35px'}},
{title : '40px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '40px'}},
{title : '45px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '45px'}},
{title : '50px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '50px'}},
{title : '55px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '55px'}},
{title : '60px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '60px'}},
{title : '65px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '65px'}},
{title : '70px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '70px'}},
{title : '75px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '75px'}}
]
});
The title of the listbox is "Styles" i want to change it to "Line Height".
Where I need to change? I can't find it in the lang files.
Thanks
Open tinymce-->themes-->advanced-->lang-->en.js
Change "style_select":"Styles" to "style_select":"Line Height"
Hope it helps!!
NOTE: You will have to keep this change in mind whenever you update tinymce to a new version
To change the title can modify the lang files under tiny_mce/themes/advanced/langs/en.js
like "Display Name" described.
But to avoid to have to modify this file everytime you update to a new tinymce version you may change the title using the oninit and setup tinymce configuration parameter in tinymce.init:
tinymce.EditorManager.i18n['en.advanced.style_select'] = 'Line Height';
So, you could use:
tinyMCE.init({
...
setup : function(ed) {
ed.onBeforeRenderUI.add(function(ed, cm) {
tinymce.EditorManager.i18n['en.advanced.style_select'] = 'Line Height';
});
}
});
Related
Hi every one , i have a question about Tinymce,
why doesn't work on an online server and it work fine on localhost?
this is the code i used
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
directionality: "rtl",
align:"right",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Style formats
style_formats : [
{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', classes : 'example1'},
{title : 'Example 2', inline : 'span', classes : 'example2'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],
});
</script>
thanks for help
I had same issue ...tried ALL solutions. But now i solve it. So,,, hope this piece of code help others.
To fix WordPress visual editor not showing, follow the steps below:-
FTP to your web server
Download your wp-config.php and add this line of code at the bottom of the file before the “require_once” line.
define('CONCATENATE_SCRIPTS', false );
enjoy sharing !! :)
I'm having issue with TinyMCE.
After saving the contents of the editor and redisplaying it all the HTML tags are visible.
This is how I'm initializing the editor:
// Tinymce Config
tinyMCE.init({
// General options
mode : "specific_textareas",
editor_selector : "mceEditor",
language : "<?php echo $tinyMceLang?>",
setup : function(ed) {
ed.onActivate.add(tinyOnEdit);
},
theme : "advanced",
plugins : "table",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,fontsizeselect,|,forecolor,backcolor,|,table,row_before,row_after,delete_row,col_before,col_after,delete_col,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_path : false,
theme_advanced_resizing : true,
convert_fonts_to_spans : true,
//font_size_style_values : "0.7em,0.8em,1em,1.2em,1.5em,2em,3em",
//font_size_style_values : "8pt,10pt,12pt,14pt,18pt,24pt,36pt",
// content CSS (should be your site CSS)
content_css : "/css/tiny_content.css"
});
if i paste a content like this (With HTML tags):
<p><span style="color: #ff0000;">testing tinymce contents</span></p>
redisplayed as :
<p><span style="color: #ff0000;">testing tinymce contents</span></p> (With html tags)
but excepted result is :
testing tinymce contents (Text with red color)(Not to allow html tags)
Open the HTML Source Editor.
Paste your content (With HTML tags) at the desired place in the html source editor.
Click on update.
That's it.
In respond to your comment
Add paste in your list of plugins,also include this plugin option
plugins : "table,paste",
paste_remove_styles: true,
in your tinyMCE.init like
// Tinymce Config
tinyMCE.init({
// General options
mode : "specific_textareas",
editor_selector : "mceEditor",
language : "<?php echo $tinyMceLang?>",
setup : function(ed) {
ed.onActivate.add(tinyOnEdit);
},
theme : "advanced",
plugins : "table,paste",
paste_remove_styles: true,
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,fontsizeselect,|,forecolor,backcolor,|,table,row_before,row_after,delete_row,col_before,col_after,delete_col,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_path : false,
theme_advanced_resizing : true,
convert_fonts_to_spans : true,
//font_size_style_values : "0.7em,0.8em,1em,1.2em,1.5em,2em,3em",
//font_size_style_values : "8pt,10pt,12pt,14pt,18pt,24pt,36pt",
// content CSS (should be your site CSS)
content_css : "/css/tiny_content.css"
});
Hope this helps,cheers!!
How can tinyMCE configured to post html with it. I am posting the text from the tinyMCE editor onto another page. The posted data shows plain text and not the html which was with the text message. Is it because some configuration has to be set to allow html tags in TinyMCE? This is the code i use
<!-- tinymce -->
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
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 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,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,
width: "90%",
height: "300",
// Skin options
skin : "o2k7",
skin_variant : "silver",
// Example content CSS (should be your site CSS)
content_css : "style1.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
this is a problem in laravel's {{ $tinyMCE }}, this prints text only, to print HTML syntax you have to use {!! $tinyMCE !!}.
You can also use pure PHP
#php echo $tinyMCE; #endphp
does anyone know how to configure tinyMCE to utilize instead of the compact spaces? Storing the data in die db causes character encoding issues. We are currently utilizing tinyMCE to send emails and when these characters are sent they create a bunch of question marks, because the encoding we use in emailing cannot handle the compact spaces.
Any help would be greatly appreciated.
See below snippet for init code
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
skin : "o2k7",
plugins : "spellchecker,style,layer,table,advhr,inlinepopups,insertdatetime,print,contextmenu,fullscreen,noneditable,visualchars,xhtmlxtras,wordcount,advlist,paste,tabfocus",
// Theme options
theme_advanced_buttons1 : "newdocument,spellchecker,|,print,|,styleselect,formatselect,fontselect,fontsizeselect,|,fullscreen",
theme_advanced_buttons2 : "bold,italic,underline,strikethrough,sub,sup,|,backcolor,forecolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,|,insertdate,inserttime,|,code,|,showmorebuttons,",
theme_advanced_buttons3 : "tablecontrols,|,insertlayer,moveforward,movebackward,absolute,|,styleprops,hr,removeformat,visualaid,|,charmap,advhr,",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
setup : function(ed) {
// Add a custom button
ed.addButton('showmorebuttons', {
title : 'Expand Advanced Toolbar',
image : '/img/email/toolbars.gif',
onclick : function() {
showMoreButtons(ed.id);
}
});
},
oninit : function(){
var tmpIdent = tinyMCE.activeEditor.id;
document.getElementById(tmpIdent + "_toolbar3").style.display = 'none';
var currentHeight = document.getElementById(tmpIdent+"_ifr").style.height;
currentHeight = currentHeight.substring(0, currentHeight.indexOf("px"));
currentHeight = (currentHeight*1)+15;
document.getElementById(tmpIdent+"_ifr").style.height=currentHeight+"px";
},
apply_source_formatting : false,
force_p_newlines : false,
remove_linebreaks : false,
forced_root_block : false,
force_br_newlines : true,
entity_encoding : "raw",
// Example content CSS (should be your site CSS)
content_css : "/tinymce/example/css/content.css",
relative_urls : false,
// Style formats
style_formats : [
{title : 'Word H1', block : 'h1', styles : {color : '#365f91', 'font-family' : 'cambria'}},
{title : 'Word H2', block : 'h2', styles : {color : '#4f81bd', 'font-family' : 'cambria'}},
{title : 'Word H3', block : 'h3', styles : {color : '#4f81bd', 'font-family' : 'cambria'}},
{title : 'Word H4', block : 'h4', styles : {color : '#4f81bd', 'font-family' : 'cambria', "font-style" : "italic"}}
]
});
Tinymce needs to insert protected spaces (U+00A0) because without them browsers would display only one single space (you may play around with the html in tinymce using the code plugin to see this behavior). This may lead to the problems you described. One solution to this could be to replace those protected spaces onSaveContent or before sending the content to the server. The second approach is to do the replace on server-side.
I have following setup for tiny MCE. As you can see in image it shows a third row of buttons . I dont know where it comes from ! There is no setting in my javascript code for a third row still it shows that there.
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,nonbreaking,xhtmlxtras,template,advlist,fullpage",
theme_advanced_buttons1 : "formatselect,fontselect,fontsizeselect,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,|,forecolor,backcolor",
theme_advanced_buttons2 : "mybutton,|,link,unlink,|,hr,removeformat,pastetext,pasteword,cleanup,|,undo,redo,|,code",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "none",
theme_advanced_resizing : true,
convert_urls : false,
fullpage_default_doctype: "",
content_css : "css/content.css",
cleanup : false,
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
});
I had to add following line which fixed it.
theme_advanced_buttons3 : ""
Remove mybutton from the second row of buttons and the thing is gone.
I suspect you have an error in eigther the plugin-row or one of your button rows.