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 | 核心 | 插入的集合按钮 |
| hr | hr | 水平线 |
| bullist | lists | 无序列表 |
| numlist | lists | 有序列表 |
| link | link | 添加和修改链接 |
| unlink | link | 去除链接格式 |
| openlink | link | 打开选中链接 |
| image | image | 添加和修改图片 |
| charmap | charmap | 特殊符号 |
| pastetext | paste | 粘贴纯文本 |
| 打印 | ||
| preview | preview | 预览 |
| anchor | anchor | 作者 |
| pagebreak | pagebreak | 分页符 |
| spellchecker | spellchecker | 拼写检查 |
| searchreplace | searchreplace | 搜索 |
| visualblocks | visualblocks | 隐藏块级区域开关 |
| visualchars | visualchars | 隐藏字符串开关. |
| code | code | 代码 |
| help | help | 帮助 |
| fullscreen | fullscreen | 全屏 |
| insertdatetime | insertdatetime | 插入时间 |
| media | media | 插入/编辑媒体文件 |
| nonbreaking | nonbreaking | 不间断空格 |
| save | save | 保存(ajax) |
| cancel | save | 取消保存 |
| table | table | 插入/编辑表格 |
| tabledelete | table | 删除表格 |
| tablecellprops | table | 单元格属性 |
| tablemergecells | table | 合并单元格 |
| tablesplitcells | table | 拆分单元格 |
| tableinsertrowbefore | table | 在当前行之前插入一个新行 |
| tableinsertrowafter | table | 在当前行之后插入一个新行 |
| tabledeleterow | table | 删除当前行 |
| tablerowprops | table | 行属性 |
| tablecutrow | table | 剪切选定行 |
| tablecopyrow | table | 复制选定行 |
| tablepasterowbefore | table | 在当前行之前粘贴行 |
| tablepasterowafter | table | 在当前行之后粘贴行 |
| tableinsertcolbefore | table | 在当前列之前插入一个列 |
| tableinsertcolafter | table | 在当前列之后插入一个列. |
| tabledeletecol | table | 删除当前列 |
| rotateleft | imagetools | 逆时针旋转当前图像 |
| rotateright | imagetools | 顺时针旋转当前图像 |
| flipv | imagetools | 垂直翻转当前图像 |
| fliph | imagetools | 水平翻转当前图像 |
| editimage | imagetools | 打开图像编辑对话框 |
| imageoptions | imagetools | 打开图像配置对话框 |
| fullpage | fullpage | 完整页面的文档属性 |
| ltr | directionality | 设置编写方向从左到右 |
| rtl | directionality | 设置编写方向从右到左 |
| emoticons | emoticons | 表情 |
| template | template | 插入模板 |
| forecolor | textcolor | 文本颜色 |
| backcolor | textcolor | 背景颜色 |
| restoredraft | restoredraft | 恢复到最新的自动保存草稿 |
| insertfile | moxiemanager | 引入文件 |
| a11ycheck | a11ychecker | 检查访问性 |
| toc | toc | 插入目录 |
| quickimage | inlite | 插入本地图像 |
| quicktable | inlite | 插入2X2的表格 |
| quicklink | inlite | 插入连接 |
TinyMCE菜单配置详解
本文章讲述TinyMCE的菜单方面的配置方法。
本文的前提为你已经将TinyMCE整合到了你自己的项目中。
什么是菜单
分为两个部分，上面的文件、编辑...为 菜单栏 部分。
下面的为 工具栏 部分。
启用和停用菜单栏
通过init配置项menubar来配置菜单栏是否启用的项目和显示的顺序。
tinymce.init({
selector: '#textarea1', // change this value according to your HTML
//启用菜单栏并显示如下项 [文件 编辑 插入 格式 表格]
menubar: 'file edit insert view format table',
})
tinymce.init({
selector: '#textarea2', // change this value according to your HTML
//禁用菜单栏
menubar: false,
})
配置菜单项
每个菜单在经过上面的配置后都会有一个默认的子菜单。
如果想自己定义每个菜单的子菜单项需要通过menu配置。
title对应在menubar中对应的项。
items为在各个菜单总显示的功能的名称
|为分割符号会将菜单分割为几个部分
tinymce.init({
selector: '#textarea1', // change this value according to your HTML
//启用菜单栏并显示如下项 [文件 编辑 插入 格式 表格]
menubar: 'file edit insert view format table',
// 配置每个菜单栏的子菜单项（如下是默认配置）
menu: {
file: {title: 'File', items: 'newdocument'},
edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
insert: {title: 'Insert', items: 'link media | template hr'},
view: {title: 'View', items: 'visualaid'},
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
}
})
配置菜单项
菜单配置项指的是各个子菜单的项。
所属插件为核心的项为基本包里自带的功能，直接写在menu的items项里就可以，
属于插件的项需要引入插件(plugins: '插件名')然后在menu的items中配置。
| 配置项 | 所属插件 | 描述 |
|---|---|---|
| newdocument | 核心 | 创建一个新文档 |
| undo | 核心 | 撤回 |
| redo | 核心 | 恢复 |
| visualaid | 核心 | 网格线. |
| cut | 核心 | 剪切 |
| copy | 核心 | 复制 |
| paste | 核心 | 粘贴 |
| selectall | 核心 | 全选 |
| bold | 核心 | 加粗 |
| italic | 核心 | 斜体 |
| underline | 核心 | 下划线 |
| strikethrough | 核心 | 删除线 |
| subscript | 核心 | 下标 |
| superscript | 核心 | 上标 |
| removeformat | 核心 | 清除格式 |
| codeformat | 核心 | 内联形式插入代码. |
| blockformats | 核心 | 块形式插入代码. |
| align | 核心 | 更改对齐方式. |
| formats | 核心 | 所有可用格式. |
| link | link | 添加一个连接. |
| openlink | link | 添加一个在新标签页中打开的连接. |
| image | image | 添加图片. |
| charmap | charmap | 开启字符映射表. |
| pastetext | paste | 粘贴为纯文本. |
| 打印. | ||
| preview | preview | 预览 |
| hr | hr | 横线 |
| anchor | anchor | 插入锚点. |
| pagebreak | pagebreak | 分页符 |
| spellchecker | spellchecker | 拼写检查开关. |
| searchreplace | searchreplace | 打开搜索和替换对话框 |
| visualblocks | visualblocks | 隐藏块级区域开关. |
| visualchars | visualchars | 隐藏字符串开关. |
| code | code | 源码预览. |
| fullscreen | fullscreen | 全屏 |
| insertdatetime | insertdatetime | 插入时间. |
| media | media | 插入媒体文件 |
| nonbreaking | nonbreaking | 插入一个nonbreaking |
| inserttable | table | 插入表格 |
| tableprops | table | 配置并插入表格. |
| deletetable | table | 删除表格. |
| cell | table | 表格单元配置 |
| row | table | 表格行配置 |
| column | table | 表格列配置 |
| restoredraft | autosave | 恢复到上次自动保存的数据 |
| fullpage | fullpage | 查看完整的文档属性 |
| toc | toc | 插入目录 |
| help | help | 帮助菜单 |
获取TinyMCE编辑器中的内容
有时候需要验证tinyMCE编辑器中的内容是否符合规范（不为空）
就需要获取里面的内容。
1、如果当前页面只有一个编辑器：
获取内容：tinyMCE.activeEditor.getContent()
设置内容：tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)
2、如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）：
获取内容：tinyMCE.editors[0].getContent()
设置内容：tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)
3、获取不带HTML标记的纯文本内容：
var activeEditor = tinymce.activeEditor;
var editBody = activeEditor.getBody();
activeEditor.selection.select(editBody);
var text = activeEditor.selection.getContent( { ‘format’ : ‘text’ } );
TinyMCE上传图片
返回的josn数据格式为
{"location":"http://localhost/images/00C01FA6364DFF9757D1CF446748A47852B2D475.jpg"}
样例:
tinymce.init({
selector: '#file-picker',
language: 'zh-Hans',//语言
height: 600,//编辑器高度
branding: false,//是否禁用“Powered by TinyMCE”
plugins: [
'powerpaste table advlist autolink lists link charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime nonbreaking save table contextmenu directionality',
'emoticons textcolor colorpicker textpattern image code codesample toc pagebreak'
],
toolbar1: 'code undo redo formatselect fontselect fontsizeselect insert styleselect bold italic underline alignleft aligncenter alignright alignjustify forecolor backcolor newdocument table insert bullist numlist outdent indent link image rotateleft rotateright flipv fliph print preview emoticons codesample pagebreak toc fullscreen superscript subscript ltr rtl hr',
//toolbar2: 'print preview forecolor backcolor emoticons codesample pagebreak toc fullscreen',
image_advtab: true,
//images_upload_url
paste_data_images: true,
menubar: true,//禁用标题栏
automatic_uploads: true,
media_live_embeds: true,//查看上传的视频
//图片选择上传
images_upload_handler: function (blobInfo, success, failure) {
var file = blobInfo.blob();//转化为易于理解的file对象
var isLt10M = file.size / 1024 / 1024 < 4;
if (!isLt10M) {
failure('上传图片大小不能超过5MB哦!');
return;
}
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open("POST", "http://localhost/Handler.ashx?API=uploadImg&UserName=" + document.getElementById("UserName").value);
formData = new FormData();
formData.append('file', file, file.name);
console.log(formData);
xhr.onload = function (e) {
var json;
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(this.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
xhr.send(formData);
}
});
转载：
https://blog.csdn.net/sunhuwh/article/details/48579319
https://blog.csdn.net/zjiang1994/article/details/79880806
https://blog.csdn.net/zjiang1994/article/details/79856058
标签：工具栏,核心,配置,TinyMCE,插入,init,详解,link,table 来源： https://www.cnblogs.com/8999zzz/p/16591948.html