中文文档: TinyMCE中文文档中文手册
官方文档: The Most Advanced WYSIWYG HTML Editor | TinyMCE
语言包:Language Packages | Trusted Rich Text Editor | TinyMCE
介绍:
tinymce是一款基础组件十分丰富,不断维护更新的富文本编辑器。在它的Github项目简介中如此描述自己:
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
简而言之: 我是宇宙第一的编辑器,我支持当前最流行的三个框架。
模式:
tinymce 有三种模式可选:经典模式(classic,默认)、行内模式(inline)、清爽模式(Distraction-free)。
经典模式是最常见的,也就是工具栏搭配输入区域,通过工具栏的按钮插入、修改、格式化内容,我们也选用这种模式作为业务的主要模式。
基础配置:
tinymce.init({
selector: '#myTextarea',
// 编辑器的皮肤,有 oxide oxide-dark
skin: 'dark',
// 编辑器宽高
width: 600,
height: 300,
// 用到的插件
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality emoticons template paste textcolor'
],
// 编辑区域内容样式
content_css: 'css/content.css',
// 工具栏的配置项
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
});
工具栏配置: 标红的为工具栏
通过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',
})
话不多说,咱直接上代码 这个是配置文件 config.js
export const tinyMceConfig = {
placeholder: '请输入',
statusbar: false, // 隐藏底部状态栏
branding: false, // 隐藏tinymce右下角水印
resize: false, //右下角调整编辑器大小,false关闭,true开启只改变高度,'both' 宽高都能改变
height: 400, //高度
language: 'zh_CN', //语言包
menubar: false, //菜单栏设置隐藏
content_style: 'p, div {font-size: 14px; margin: 0px; border:0px ; padding: 0px}', //文本内容中“p,div”标签进行行间距设置
plugins: [
'autolink',
'link',
'image ',
'lists',
'charmap',
'preview',
'anchor',
'pagebreak',
'visualblocks',
'visualchars',
'code',
'fullscreen',
'insertdatetime',
'media',
'nonbreaking',
'table',
'directionality',
'emoticons',
'template',
'preview',
],
toolbar: [
' bold underline italic alignleft aligncenter alignright | forecolor backcolor | fontfamily fontsize lineheight | bullist numlist outdent indent |emoticons link image media table code | undo redo | fullscreen',
],
font_size_formats: '8px 10px 12px 14px 18px 24px 36px',
font_family_formats:
"微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
line_height_formats: '1 1.2 1.4 1.6 2',
}