TinyMCE是一款在线编辑器插件,大名鼎鼎的WordPress选用的编辑器就是它。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方面虽然不能称得上是最强,但绝对能够满足大部分网站的需求,并且功能配置灵活简单。

快速安装

1.获取代码

http://www.tinymce.com/download/download.php

目前最新版本是4.0.28,提供了三个包:

  • TinyMCE 4.0.28 ---JavaScript版本
  • TinyMCE 4.0.28 jQuery package ---jQuery版本
  • TinyMCE 4.0.28 development package ---开发版本

2.引入文件

在页面的head中插入:

<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script>
    tinymce.init({selector:'textarea'});
</script>

替换js文件目录为你放置的目录,tinymce.init 用于初始化编辑器,接下来要介绍初始化用到的一些参数。

具体配置

selector

使用CSS选择器来指定要初始化的textarea,比如:

selector: "textarea", //使用标签
selector: "textarea.content", //使用class
selector: "textarea#content",

plugins

plugins : 'jbimages code textcolor advlist autolink link lists charmap print',

设置启用的插件,自带的插件列表请移步http://www.tinymce.com/wiki.php/Plugins

toolbar

用来设置工具上显示的功能。支持toolbar1,toolbar2这样的多行设置,功能按钮之间可以使用"|"分隔开来。

toolbar: "insertfile undo redo | forecolor

同样可以设置 toolbar:false 隐藏工具栏。

有关toolbar可以设置的属性列表,请移步http://www.tinymce.com/wiki.php/Controls

menubar

menubar参数用来设置需要限制的菜单:

// 隐藏菜单栏
tinymce.init({
    menubar : false
});

// 配置显示和顺序
tinymce.init({ 
    menubar: "tools table format view insert edit"
});

详细介绍请移步http://www.tinymce.com/wiki.php/Configuration:menu

font_formats,fontsize_formats

font_formats设置默认的候选字体,fontsize_formats用来设置字体大小的范围

tinymce.init({
font_formats: "宋体=宋体;微软雅黑=微软雅黑;Arial=arial,helvetica,sans-serif;",
fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt"
});

如果只是设置了上述的内容,在编辑器上是看不到字体选择控件的,需要在toolbar的参数里面设置 fontselect和fontsizeselect,这样就能出现下拉选择框。

language

TinyMCE的下载包中并不包含中文的翻译包,不过中文包确实是可以下载的,就在官网上面,点击。找到Chinese(China)或者 Chinese(Taiwan),然后在init设置language的属性为对应的Code值:zh_CN或zh_TW。