Tinymce的配置、汉化、注释及自定义样式~!

本文介绍TinyMCE编辑器的基本配置方法,包括如何在网页中集成该编辑器、设置主题、工具栏布局及功能按钮等内容。TinyMCE是一款强大的所见即所得的HTML编辑器,适用于各种系统集成场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考:http://www.inpeck.com/TinyMceManual/ tiny中文手册
Tinymce官方网站:http://tinymce.moxiecode.com/
Tinymce3.2汉化版:见附件,此汉化包并不完全
Tinymce3.2官方简体中文汉化包:见附件

TinyMCE 是一个基于浏览器(例如MSIE或Mozilla)的强大的所见即所得的编辑器,它使用户可以方便的编辑HTML内容。它非常灵活并且是为系统集成而设计的,比如在Intranets、CMS、LMS等系统中应用。
TinyMCE 由 Moxiecode Systems AB 开发,根据"LGPL"版权许可证发行, 请查看版权协议以获知更多细节。

特点-cnblogs用的也是tinymce

  • 易于集成,只需要简短几行代码。
  • 支持主题和模板。
  • 易于使用自定义代码扩展(插件和回调)
  • 可定制HTML输出。屏蔽元素和强制属性。
  • 国际语言支持(通过语言包)。
  • 支持多种浏览器, 目前有 Mozilla (PC/Mac/Linux), MSIE (PC) 和 FireFox (PC/Mac/Linux)。

在调用页面中加入

 

ContractedBlock.gif ExpandedBlockStart.gif Code
        <. language="." type="text/." src="tiny_mce/tiny_mce.js"></.>
        
<. language="." type="text/.">
             tinyMCE.init({
         mode : "textareas",
        //定义显示类别
          theme : "advanced",
          //定义载入插件
          plugins : "safari,spellchecker,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,
imagemanager,filemanager", 
          //定义工具栏的位置
          theme_advanced_toolbar_location : "top",
          //定义工具栏工具的对其方式
          theme_advanced_toolbar_align : "left",
          //定义输入框下方是否显示状态栏,默认不显示
          theme_advanced_statusbar_location : "bottom",
          //定义是否可以改变输入窗口大小
          theme_advanced_resizing : true
                });
        
</.>
        
<form id="form1" runat="server">
        
<div>
        
<textarea name="content" rows="15" style="width: 816px">This is some content that will be editable with TinyMCE.</textarea>
        
</div>
        
</form>

tiny_mce文件解释
langs文件夹是所有标签语言样式
plugins 文件夹里的子文件夹包含所有标签的详细定义,每个标签文件夹里包含
的langs文件夹可定义单个标签的内部详细语言.可以对其htm文件进行更改配合
themes文件夹里的分类
对editor_template.js进行的标注

ContractedBlock.gif ExpandedBlockStart.gif Code
//字体大小
font_size:['font_size','fontsizeselect'],
//加粗
bold:['bold_desc','Bold'],
//斜体
italic:['italic_desc','Italic'],
//下划线
underline:['underline_desc','Underline'],
//贯穿线
strikethrough:['striketrough_desc','Strikethrough'],
//左对齐
justifyleft:['justifyleft_desc','JustifyLeft'],
//居中对齐
justifycenter:['justifycenter_desc','JustifyCenter'],
//右对齐
justifyright:['justifyright_desc','JustifyRight'],
//两边对齐
justifyfull:['justifyfull_desc','JustifyFull'],
//项目符号列表
bullist:['bullist_desc','InsertUnorderedList'],
//编号列表
numlist:['numlist_desc','InsertOrderedList'],
//减少缩进
outdent:['outdent_desc','Outdent'],
//增加缩进
indent:['indent_desc','Indent'],
//剪切
cut:['cut_desc','Cut'],
//复制
copy:['copy_desc','Copy'],
//粘贴
paste:['paste_desc','Paste'],
//撤销
undo:['undo_desc','Undo'],
//重做
redo:['redo_desc','Redo'],
//增加链接
link:['link_desc','mceLink'],
//删除链接
unlink:['unlink_desc','unlink'],
//插入图片
image:['image_desc','mceImage'],
//清理代码
cleanup:['cleanup_desc','mceCleanup'],
//帮助
help:['help_desc','mceHelp'],
//代码视图
code:['code_desc','mceCodeEditor'],
//插入水平线
hr:['hr_desc','InsertHorizontalRule'],
//清除样式
removeformat:['removeformat_desc','RemoveFormat'],
//显示/隐藏对象
visualaid:['visualaid_desc','mceToggleVisualAid'],
//下标
sub:['sub_desc','sub.'],
//上标
sup:['sup_desc','super.'],
//插入特殊符号
charmap:['charmap_desc','mceCharMap'],
//字体颜色
forecolor:['forecolor_desc','ForeColor'],
//前景色
forecolorpicker:['forecolor_desc','mceForeColor'],
//背景色
backcolor:['backcolor_desc','HiliteColor'],
//背景色食色板
backcolorpicker:['backcolor_desc','mceBackColor'],
//插入编辑描点
anchor:['anchor_desc','mceInsertAnchor'],
//新建空白文档
newdocument:['newdocument_desc','mceNewDocument'],
//引用
blockquote:['blockquote_desc','mceBlockQuote'],
//查找替换
reply:['replace_desc','reply'],
//查找
search:['search_desc','searchreplace']},
stateControls:[
'search','blockquote','newdocument','anchor','backcolor',
'forecolorpicker','forecolor','font_size','bold','italic','underline',
'strikethrough','bullist','numlist','justifyleft','justifycenter','justifyright',
'justifyfull','sub','sup','blockquote'],
init:
function(ed,url){var t=this,s,v,o;t.editor=ed;t.url=url;t.onResolveName=new tinymce.util.Dispatcher(this);
t.settings
=s=extend({
theme_advanced_path:
true,theme_advanced_toolbar_location:'bottom',
theme_advanced_buttons1:
"search,blockquote,newdocument,anchor,
backcolor,forecolorpicker,forecolor,fontsizeselect,bold,italic,underline,
strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,
styleselect,formatselect
",
theme_advanced_buttons2:
"bullist,numlist,|,outdent,indent,|,undo,
redo,|,link,unlink,anchor,image,cleanup,help,code
",
theme_advanced_buttons3:
"hr,removeformat,visualaid,|,sub,sup,|,
charmap
",theme_advanced_blockformats:"p,address,pre,h1,h2,h3,h4,
h5,h6
",
对advanced中langs里的en.js进行的标注
tinyMCE.addI18n(
'en.advanced',{
style_select:
"\u6837\u5F0F",
//字体大小
font_size:"\u5B57\u53F7",
//加粗
bold_desc:"\u7C97\u4F53 (Ctrl+B)",
//斜体
italic_desc:"\u659C\u4F53 (Ctrl+I)",
//下划线
underline_desc:"\u4E0B\u5212\u7EBF (Ctrl+U)",
//贯穿线
striketrough_desc:"\u5220\u9664\u7EBF",
//左对齐
justifyleft_desc:"\u9760\u5DE6\u5BF9\u9F50",
//居中对齐
justifycenter_desc:"\u5C45\u4E2D",
//右对齐
justifyright_desc:"\u9760\u53F3\u5BF9\u9F50",
//两边对齐
justifyfull_desc:"\u5DE6\u53F3\u5BF9\u9F50",
//项目符号列表
bullist_desc:"\u9879\u76EE\u7B26\u53F7\u5217\u8868",
//编号列表
numlist_desc:"\u7F16\u53F7\u5217\u8868",
//减少缩进
outdent_desc:"\u51CF\u5C11\u7F29\u8FDB",
//增加缩进
indent_desc:"\u589E\u52A0\u7F29\u8FDB",
//剪切
cut_desc:"\u526A\u5207 (Ctrl+X)",
//复制
copy_desc:"\u590D\u5236 (Ctrl+C)",
//粘贴
paste_desc:"\u7C98\u8D34 (Ctrl+V)",
//撤销
undo_desc:"\u64A4\u9500 (Ctrl+Z)",
//重做
redo_desc:"\u91CD\u505A (Ctrl+Y)",
//增加链接
link_desc:"\u63D2\u5165/\u7F16\u8F91\u94FE\u63A5",
//删除链接
unlink_desc:"\u5220\u9664\u94FE\u63A5",
//插入图片
image_desc:"\u63D2\u5165/\u7F16\u8F91\u56FE\u7247",
//清理代码
cleanup_desc:"\u6E05\u7406\u4EE3\u7801",
//帮助
help_desc:"\u5E2E\u52A9",
//代码视图
code:"\u4EE3\u7801",
//插入水平线
hr_desc:"\u63D2\u5165\u6C34\u5E73\u7EBF",
//清除样式
removeformat_desc:"\u6E05\u9664\u6837\u5F0F",
//显示/隐藏对象
visualaid_desc:"\u663E\u793A/\u9690\u85CF\u5BF9\u8C61",
//下标
sub_desc:"\u4E0B\u6807",
//上标
sup_desc:"\u4E0A\u6807",
//插入特殊符号
charmap_desc:"\u63D2\u5165\u7279\u6B8A\u7B26\u53F7",
//字体颜色
forecolor_desc:"\u524D\u666F\u8272",
//背景色
backcolor_desc:"\u80CC\u666F\u8272",
//插入编辑描点
anchor_desc:"\u63D2\u5165/\u7F16\u8F91\u951A\u70B9",
//新建空白文档
newdocument_desc:"\u65B0\u5EFA",
//引用
blockquote_desc:"\u5F15\u7528",
//查找
search_desc:"\u67E5\u627E",
//查找替换
replace_desc:"\u67E5\u627E/\u66FF\u6362",
fontdefault:
"\u5B57\u4F53",
block:
"\u683C\u5F0F",
paragraph:
"\u6BB5\u843D",
div:
"\u5C42",
address:
"\u5730\u5740",
pre:
"\u9884\u5B9A\u4E49\u683C\u5F0F",
h1:
"\u6807\u98981",
h2:
"\u6807\u98982",
h3:
"\u6807\u98983",
h4:
"\u6807\u98984",
h5:
"\u6807\u98985",
h6:
"\u6807\u98986",
blockquote:
"\u5F15\u7528",
samp:
"\u4EE3\u7801\u8303\u4F8B",
dt:
"\u540D\u8BCD\u5B9A\u4E49",
dd:
"\u540D\u8BCD\u89E3\u91CA",
code_desc:
"\u4EE3\u7801\u89C6\u56FE",
custom1_desc:
"\u5728\u6B64\u8F93\u5165\u63CF\u8FF0",
image_props_desc:
"\u56FE\u7247\u5C5E\u6027",
clipboard_msg:
"\u590D\u5236\u3001\u526A\u5207\u548C\u7C98\u8D34\u529F\u80FD\u5728 Mozilla \u548C Firefox \u4E2D\u65E0\u6CD5\u4F7F\u7528\u3002\n\u4F60\u9700\u8981\u4E86\u89E3\u66F4\u591A\u4FE1\u606F\u5417\uFF1F",
path:
"\u8DEF\u5F84",
newdocument:
"\u786E\u5B9A\u8981\u5220\u9664\u6240\u6709\u5185\u5BB9\u5E76\u65B0\u5EFA\u4E00\u4E2A\u7A7A\u767D\u6587\u6863\u4E48\uFF1F",
toolbar_focus:
"\u5B9A\u4F4D\u5230\u5DE5\u5177\u680F - Alt+Q\uFF0C\u5B9A\u4F4D\u5230\u7F16\u8F91\u533A - Alt-Z\uFF0C\u5B9A\u4F4D\u5230\u5143\u7D20\u8DEF\u5F84 - Alt-X\u3002",
more_colors:
"\u66F4\u591A\u989C\u8272dot.gif"
//自定义部分
});

当然还是要根据自己的需要配置好最适合自己的tinymce,网上下的汉化版并不能适用于你,所以建议自己动手配置

转载于:https://www.cnblogs.com/opper/archive/2009/01/09/1372838.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值