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”
/>
<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/