TinyMCE工具栏配置详解 写在前面
本文章讲述TinyMCE的工具栏方面的配置方法。
本文的前提为你已经将TinyMCE整合到了你自己的项目中。
什么是工具栏
如图一个编辑器的工具部分。
分为两个部分，上面的文件、编辑...为 菜单栏 部分。
下面的红色框起来的为 工具栏 部分。
本文概述工具栏的配置。
关于菜单栏的配置可以开这篇文章：TinyMCE菜单配置详解
启用和停用工具栏
通过init配置项toolbar和toolbar(n)来配置工具栏是否启用的项目和显示的顺序。
同时，使用|来分割各个项。
tinymce.init({ selector: '#textarea1', // change this value according to your HTML //启用工具栏并显示如下项 toolbar: 'undo redo | styleselect | bold italic | link image',})tinymce.init({ selector: '#textarea2', // change this value according to your HTML //禁用工具栏 toolbar: false,})/* 启用多个工具栏 */tinymce.init({ selector: '#textarea3', // change this value according to your HTML // 启用多个工具栏 toolbar: [ 'undo redo | styleselect | bold italic | link image', 'alignleft aligncenter alignright', ]})tinymce.init({ selector: '#textarea4', // change this value according to your html // 工具栏1 toolbar1: 'undo redo | styleselect | bold italic | link image', // 工具栏2 toolbar2: 'alignleft aligncenter alignright',}) 自定义工具按钮
上面在工具栏中插入的都是编辑器自带的工具。
这里讲一下如何插入自定义的按钮。
主要的流程是：
在init的toolbar中注册自定义按钮在setup方法中使用editor.addButton()定义按钮。 tinymce.init({ selector: '#textarea', // 注册button toolbar: 'mybutton', setup: function (editor) { // 定义按钮， editor.addButton('mybutton', { // 按钮，名 text: 'My button', // 是否显示图标 icon: false, //onclick事件 onclick: function () { // 这里点击后会插入一句话 editor.insertContent(' <b>It's my button!</b> ') } }) }})
如图:
上面是最基本的配置方法，
还有一些其他属性可以配置：
tooltip: 就是鼠标滑过时的提示文字icon: 按钮的图标(这里指的是TinyMCE中自带的)image: 如果希望直接配置图标(可以是URL或者path)onclick: 点击事件onpostrender: 触发按钮渲染的事件(用来在合适的时机禁用按钮)cmd: 点击按钮时出发的编辑器事件(已经注册的)
更为深入的自定义按钮配置方法这里暂时不做说明。
可以参看TinyMCE Docs。
配置工具项
所属插件为核心的项为基本包里自带的功能，直接写在toolbar里就可以，
属于插件的项需要引入插件(plugins: '插件名')然后在toolbar中配置。
配置项所属插件描述newdocument核心创建新文档bold核心加粗italic核心斜体underline核心下划线strikethrough核心删除线alignleft核心居左aligncenter核心居中alignright核心居右alignjustify核心两端对齐alignnone核心清除styleselect核心格式选择下拉框(缩进、行高)formatselect核心段落选择下拉框(段落、标题)fontselect核心字体选择下拉框fontsizeselect核心字号选择下拉框cut核心剪切copy核心复制paste核心粘贴outdent核心减少缩进indent核心增加缩进blockquote核心引用undo核心撤消redo核心恢复removeformat核心清除格式subscript核心下标superscript核心上标visualaid核心网格线insert核心插入的集合按钮hrhr水平线bullistlists无序列表numlistlists有序列表linklink添加和修改链接unlinklink去除链接格式openlinklink打开选中链接imageimage添加和修改图片charmapcharmap特殊符号pastetextpaste粘贴纯文本printprint打印previewpreview预览anchoranchor作者pagebreakpagebreak分页符spellcheckerspellchecker拼写检查searchreplacesearchreplace搜索visualblocksvisualblocks隐藏块级区域开关visualcharsvisualchars隐藏字符串开关.codecode代码helphelp帮助fullscreenfullscreen全屏insertdatetimeinsertdatetime插入时间mediamedia插入/编辑媒体文件nonbreakingnonbreaking不间断空格savesave保存(ajax)cancelsave取消保存tabletable插入/编辑表格tabledeletetable删除表格tablecellpropstable单元格属性tablemergecellstable合并单元格tablesplitcellstable拆分单元格tableinsertrowbeforetable在当前行之前插入一个新行tableinsertrowaftertable在当前行之后插入一个新行tabledeleterowtable删除当前行tablerowpropstable行属性tablecutrowtable剪切选定行tablecopyrowtable复制选定行tablepasterowbeforetable在当前行之前粘贴行tablepasterowaftertable在当前行之后粘贴行tableinsertcolbeforetable在当前列之前插入一个列tableinsertcolaftertable在当前列之后插入一个列.tabledeletecoltable删除当前列rotateleftimagetools逆时针旋转当前图像rotaterightimagetools顺时针旋转当前图像flipvimagetools垂直翻转当前图像fliphimagetools水平翻转当前图像editimageimagetools打开图像编辑对话框imageoptionsimagetools打开图像配置对话框fullpagefullpage完整页面的文档属性ltrdirectionality设置编写方向从左到右rtldirectionality设置编写方向从右到左emoticonsemoticons表情templatetemplate插入模板forecolortextcolor文本颜色backcolortextcolor背景颜色restoredraftrestoredraft恢复到最新的自动保存草稿insertfilemoxiemanager引入文件a11ychecka11ychecker检查访问性toctoc插入目录quickimageinlite插入本地图像quicktableinlite插入2X2的表格quicklinkinlite插入连接 写在后面
TinyMCE菜单配置详解
会陆续补全关于TinyMCE的其他相关信息。