Tag Archives: tinyMCE

This tinyMCE Editor error is from BOM

Yesterday, the tinyMCE editor in the websit can’t work suddenly. I solved this problem until today. It is from BOM with the file. Once BOM is removed, every thing is OK.

A UTF-8 file may have BOM, may not. The methods as below can distinguish it:

1, open the file with UltraEdit-32, switch to hex edit mode, and see whether the header has EF BB BF.
2, using Dreamweaver to open the file, in “Page Properties” page, check if the space before “including Unicode signature (BOM) ” is checked.

For the second method, if it’s checked, remove the check and save it. Then it will be fine.

I also found that, if the code between and has error, even a simple first line ( i.e. var xx = 0;) actually doesn’t take effect. It’s against my coding experience about javascript.

Some users can’t use this tinyMCE editor of this website, but others can. I hope that this change can solve this problem too and this tinyMCE editor can work well for all the users. 🙂

How to create an editor with customized toolbar using tinyMCE like one in WordPress

At first, the editor I built for my website used <iframe>, etc. , and it doesn’t work on firefox. I tried to change to the one that WorkPress uses.

Here I wrote down what I found and think worth to share, also as my note.

All the icons in the toolbar are in one file: irons.gif. Then, how to pick up one of them and show it one the toolbar.
Here one icon is 20px x 20px. Then the code for the first icon is as below:

.icons {
background: url(icons.gif) no-repeat 20px 20px;
background-position: 0 0px;
}

For the second icon:

background-position: 0 -20px;

third:
background-position: 0 -40px;

In the WordPress new post webpage, it includes “Code” and “Visual” tabs. The editor area in the webpages for the two tabs should use the same <textarea>. WordPress uses the code from tinyMCE. Here is the link, where the code can be downloaded here:
http://tinymce.moxiecode.com/

I downloaded this package:

Development package This package contains development tools and full source code.
tinymce_3_3_9_1_dev.zip

and the folder “tinyMCE” includes all the functions I need.

The file “tiny_mce\themes\advanced\skins\default\ui.css” is used.

Put the code below in a file and put it in the same folder with tinyMCE. Then open the file below with IE, it is an editor with a customized toolbar.

Here, remove or exchange the items in the theme_advanced_buttonsx below, the icons in the tool bar can be removed or exchanged. One theme_advanced_buttonsx represent one line in the tool bar. Here I just keep 3 of them, so there are 3 lines of icons on the tool bar.

<html>
<head>
<!– TinyMCE –>
<script type=”text/javascript” src=”tiny_mce/tiny_mce.js”></script>
<script type=”text/javascript”>
tinyMCE.init({
// General options
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,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave”,
// Theme options
theme_advanced_buttons1 :
“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,code,|,insertdate,inserttime,preview,|,forecolor,backcolor”,
theme_advanced_buttons3 :
“hr,removeformat,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,

ltr,rtl,|,fullscreen,insertlayer,
moveforward,movebackward,absolute,|,styleprops,|,cite,del,ins,attribs,|,visualchars,nonbreaking,
template,pagebreak,restoredraft,help”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : true,

content_css : “css/content.css”,  // this .css defines the format of contents shown in the editor

// 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>
<!– /TinyMCE –></head>

<body>

<form>
<div>
<textarea id=”elm1″ name=”elm1″ rows=”15″ style=”width:700px;”></textarea>
</div>
<div align=”center” style=”width:700px;”>
<input style=”width:100px;”  type=”submit”  name=”save” value=”submit”

/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input style=”width:100px;”  type=”reset” name=”reset” value=”reset” />
</div>
</form>

</body>
</html>

Below is some idea about adding an icon. I didn’t test it.

If one icon needs to add, a functon needs to add in .js like:

function() a.create(“tinymce.plugins.newPlugin”,
{init: function(b,c){b.addCommand …
b.addButton(“new”)}});

in ui.css, add a line like below:
.defaultSkin span.mce_new {background-position:-60px -20px}

If the icon is wider than 20px, some changes should be made as below:

In ui.css, the line defines the width and height of the icon:

.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; width:20px; height:20px}

The “width” should be removed so the wider icon can be used:

.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; height:20px}

Below is what I got for my website:

Related link: http://tinymce.moxiecode.com/