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',
})

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 11

• 12

• 13

• 14

• 15

• 16

• 17

• 18

• 19

• 20

• 21

• 22

• 23

• 24

• 25

• 26

• 27

• 28

• 29

• 30

---

自定义工具按钮

上面在工具栏中插入的都是编辑器自带的工具。
这里讲一下如何插入自定义的按钮。

主要的流程是：

1. 在init的toolbar中注册自定义按钮

2. 在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(' It\'s my button! ')
      }
    })
  }
})

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 11

• 12

• 13

• 14

• 15

• 16

• 17

• 18

• 19

• 20

如图:

上面是最基本的配置方法，

还有一些其他属性可以配置：

• 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	粘贴纯文本
print	print	打印
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	插入连接