我本来用的是<iframe>等作的编辑器,可是只支持IE,我很喜欢WordPress里的那个,这里把我寻找的过程中值得记一下的东西写一下。
1,工具栏中所有的图标都在一个文件icons.gif上,怎么显示排列它们呢?这里图标按20px宽,20px高。
代码如下,显示图片上第1个图标:
.icons {
background: url(icons.gif) no-repeat 20px 20px;
background-position: 0 0px;
}
显示图片上第2个图标:
background-position: 0 -20px;
显示图片上第3个图标:
background-position: 0 -40px;
2,在WordPress的发布新贴(New Post)页,有"Code"和"Visual"标签页,其页面上的编辑器填写区都是用的<textarea>。
3,WordPress的这个编辑器使用的是开源软件tinyMCE。下面是链接,可以下载到代码:
http://tinymce.moxiecode.com/
我下载的是这个:
Development package This package contains development tools and full source code.
tinymce_3_3_9_1_dev.zip
只要文件夹"tinyMCE"的文件功能就够用了。
4,ui.css文件用的是这个"tiny_mce\themes\advanced\skins\default\ui.css"。
5,下面是我修改后的代码,把这个文件和tinyMCE文件夹放在一个目录下,打开这个文件,就可以看到一个定制工具栏的编辑器。
这里,移动或者删除theme_advanced_buttonsx下的icon名称,就可以移动、删除界面上工具栏上的图标。一个
theme_advanced_buttonx代表一行。这里只保留3行。
<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,inlinep
opups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directio
nality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcou
nt,advlist,autosave",
// Theme options
theme_advanced_buttons1 :
"bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,jus
tifyfull,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,|,insertdat
e,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 :
"hr,removeformat,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,r
tl,|,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,
// 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>
6,如果添加图标,可能用下面的方法,我没试过。
在.js文件添加函数:
function() a.create("tinymce.plugins.newPlugin",
{init: function(b,c){b.addCommand ...
b.addButton("new")}});
在 ui.css添加如下一行:
.defaultSkin span.mce_new {background-position:-60px -20px}
下面是我作的:
补充:
如果图标宽度大于20px,ui.css的下面一行需要把width的定义去掉:
.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; width:20px; height:20px}
写成下面这样:
.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; height:20px}
还没具体作过。