今天有个同事问我,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>
大家可以看代码里面的注释,很详细,这里定制了:限制哪些元素不可以使用,哪些可以使用
上图的 红色字体,这是切换到 html 编辑模式,就是自己写的style样式来控制的
纠正一个错误:点击 html 源码编辑按钮,发现在FireFox运行没问题,但是在IE浏览器就会弹出警告
报错提示:我已经限制在当前浏览器打开弹出窗口,原来配置 plugins时,把 inlinepopups 这个去掉了
因此上述简化的TinyMCE代码要做IE里面运行,plugins应该这么配置:
plugins : "inlinepopups,table,preview,fullscreen,xhtmlxtras,advlist"
6.怎么才算实用指南
上面啰嗦一大堆,即便是从来没了解过TinyMce的人也会使用最简单的配置了
关键在于:针对这种编辑器谁都会遇到问题,我想每种主流的编辑器,都有那么一个团队在维护
并且运行更新了这么多年,这么多版本,这么多企业在使用。你遇到的问题,别人肯定早遇到了
那么开发TinyMce的人,一定会收集各种建议:尽量把一些【实用】的功能做出来,提供给我们
就好比我遇到的:是否能开放style标签给用户使用,在官方使用指南的 Configuration 栏目就能找到
所以,大家要像真的入门这个编辑器,我想你可以看看官方网站是怎么解决我的问题的
http://www.tinymce.com/wiki.php/Configuration3x
耐着性子把所有Configuration看完,你会发现:初级阶段,只有你想不到的问题,没有TinyMce没有解决不了的
当然Configuration还只是从配置层面来解决,你要更高级的,可以按照它的接口规范开发自己的功能按钮,
或者重写它的插件也是可以的。我想,这种【实用】指南,比直接告诉你:这个功能这么配置就可以了,应该要实用
话说。。。。CSDN 的编辑器,怎么越看越像。。。。