上一篇:大学课堂众生像,爆笑(图)
下一篇:CSS ID & CLASS 的区别
如何用tinyMCE建立带有定制工具栏的编辑器,像WordPress里的那样
米娅 2010年9月25日 22:14:18

我本来用的是<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"
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <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}

下面是我作的:



2楼 2010年9月26日 17:26:59 米娅

补充:

如果图标宽度大于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}

还没具体作过。 


3楼 2010年10月1日 22:17:17 米娅

最新更新在这里:

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

第1页 共1页
相关链接