TinyMce实用指南

来源：互联网发布：食品科学与工程知乎编辑：程序博客网时间：2024/04/30 04:05

今天有个同事问我，TinyMce 是否允许用户在HTML源代码编辑模式下，写style和script

其实问题在于：是否允许用户自己定义样式和脚本，我想自定义样式问题不大，但脚本不能开放

恰好就是我们正在用的TinyMce，有用户反馈他们要自定义样式，但这个编辑器不支持

我没有用过这个编辑器，但是以前用过CKEditor，也是一款主流的高级编辑器。我想着两者应该

差不多，并且支持可配置的。即使不支持可配置，也会提供接口让你实现这些功能。

所以说到这里，有些人可能会说，你都没用过TinyMce，还谈什么实用指南呢？

我的想法是：指南不在于我写一本书，告诉你这个怎么做；而在于我告诉你一种学习的方法

你能自己的去思考，能朝解决这个问题的方向靠拢。那么就来介绍下，TinyMce的使用方式

1.下载TinyMce

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

TinyMce纯JS版本，也有jQuery版本，我想jQuery大家都熟悉，就下载了jQuery版本，如图

现在已经发展到4.0.2版本了，我这边选择了 3.5.10 版本，既然是jQuery版本的，就要配合jQuery使用

再下载一个jQuery好了，下载的是1.7.2版本的：http://jquery.com/download/

2.下载中文语言包

TinyMce默认只有英文版本，我想下载一个中文的汉化包比较方便用户使用

http://www.tinymce.com/i18n3x/index.php?ctrl=lang&act=download&pr_id=1

选择Chinese即中文的语言包即可，如图所示

3.分析包结构并汉化

TinyMce和中文语言包的结构，你应该发现目录结构是重合的，明摆着langs是存放语言的包

（1）把中文语言包 tinymce_language_pack\langs\zh.js 文件复制到 tiny_mce\langs\

（2）把中文语言包 tinymce_language_pack\themes\advanced\langs\zh.js 和 zh_dlg.js 复制到 \tiny_mce\themes\advanced\langs

4.配置一个全功能的TinyMce

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>TinyMce jquery 版本使用</title><!-- 引入jQuery --><script type="text/javascript" src="jquery-1.7.2.min.js"></script><!-- 引入TinyMCE --><script type="text/javascript" src="tiny_mce/jquery.tinymce.js"></script><script type="text/javascript">$().ready(function() {// 使用jquery方式初始化控件,这里用 #id 形式定位到textarea元素$('#elm1').tinymce({// 加载TinyMec所需的js文件script_url : 'tiny_mce/tiny_mce.js',// 使用主题theme : "advanced",// 使用的插件,有很多插件和工具栏按钮重复,可以去掉// 这里加载所有插件plugins : "autolink,lists,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,advlist",// 工具栏,可以分成几行来显示,因为所有按钮加起来非常多theme_advanced_buttons1 : "save,newdocument,|,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,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",theme_advanced_toolbar_location : "top",theme_advanced_toolbar_align : "left",theme_advanced_statusbar_location : "bottom",theme_advanced_resizing : true,});});</script><!-- /TinyMCE --></head><body><div><textarea id="elm1" rows="15" cols="80" style="width: 60%">初始化内容：可有可无</textarea></div></body></html>

页面加载效果如下：

5.定制自己的TinyMce

5.1 精简插件和工具栏

5.2使用系统配置,比如限制style或script标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>定制自己的TinyMce</title><!-- 引入jQuery --><script type="text/javascript" src="jquery-1.7.2.min.js"></script><!-- 引入TinyMCE --><script type="text/javascript" src="tiny_mce/jquery.tinymce.js"></script><script type="text/javascript">$().ready(function() {// 也可以 .class 形式定位textarea元素,再初始化配置// 当然一个页面可以初始化多个TinyMce编辑器,并且每个都可以使用不同配置// 但是不推荐这么做,一般使用一个就可以了$('textarea.tinymce').tinymce({// 加载TinyMec所需的js文件script_url : 'tiny_mce/tiny_mce.js',// 使用主题theme : "advanced",// 使用皮肤skin:"o2k7",// office2007 风格// 精简插件和工具栏,定制你想要的即可,这样页面加载速度也更快// 你会发现有些在 plugins 里面配置了,在buttons里面也必须配置// 而有些只在buttons里面配置即可:比如像 [加粗/斜体] // 这些简单的工具按钮就不用在plugins里配置// 但 [全屏/html原码编辑/预览] 等工具按钮必须配置在plugins里面// 并且结合buttons里面的配置，才能把按钮加载到页面// 其实buttons作用是：定位功能按钮的位置,并且表明你要引入这个按钮// 但有些按钮TinyMce是以插件形式制作的,那么就必须在 plugins 里面配置plugins : "inlinepopups,table,preview,fullscreen,xhtmlxtras,advlist",// 工具栏theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect,|,forecolor,backcolor,bullist,numlist,|,link,unlink,anchor,image,table,|,code,fullscreen,preview",// 不允许用户添加的元素// 默认情况下style标签和script标签都不允许添加的invalid_elements : "javascript,script,iframe,frameset,link,object",// 如果你要放开style标签给用户,可以这么做valid_children : "+body[style]",// 使用汉化的包language:'zh',theme_advanced_toolbar_location : "top",theme_advanced_toolbar_align : "left",theme_advanced_statusbar_location : "bottom",theme_advanced_resizing : true,});});</script><!-- /TinyMCE --></head><body><div><textarea id="elm2" rows="15" cols="80" style="width: 60%" class="tinymce">初始化内容：可有可无</textarea></div></body></html>

大家可以看代码里面的注释，很详细，这里定制了：限制哪些元素不可以使用，哪些可以使用