tinyMce使用小记开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情 t

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

tinymce

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方面虽然不能称得上是最强，但绝对能够满足大部分网站的需求，并且功能配置灵活简单。另一特点是加载速度非常快。

优势

插件丰富，自带插件基本涵盖日常所需功能
接口丰富，可扩展性强，有能力可以无限拓展功能
界面好看，符合现代审美
提供经典、内联、沉浸无干扰三种模式
多语言支持，官网可下载几十种语言。

tinymce.ax-z.cn/demos/demo-…

使用方式

// 全局
import tinymce from 'tinymce'
import VueTinymce from '@packy-tang/vue-tinymce'
Vue.prototype.$tinymce = tinymce
Vue.use(VueTinymce)

 <vue-tinymce v-model="content" :setting="setting" />
 
 // cdn
<script src="https://***.****.com/libs/tinyEditor/tinymce/tinymce.min.js"></script>
<form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
</form>

相关配置项

整体

tinymce.init({
    selector: '#editorSection',
    plugins: originPlugins,
    toolbar: originToolbar,
    menubar: '',
    toolbar_mode: 'sliding',
    codeSampleLanguages,
    fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
    allowed_fields: true,
    statusbar: false, // 去除赞助
    language: 'zh_CN', // 支持中文
    paste_data_images: true, // 允许粘贴图像
    paste_enable_default_filters: false,
    images_file_types: 'png,jpg,jpeg,gif',
    min_height: 820,
    max_height: 820,
    images_upload_handler: ....,
    setup: editor => {
        // 编辑时,初始化赋值
        editor.on('init', () => {
            editor.setContent(data);
        });
    }
});

// selector是TinyMCE的重要配置选项，使用CSS选择器语法来确定页面上哪个元素被TinyMCE替换成编辑器
selector: '#editorSection'

// plugins配置参数用于指定哪些插件被用在当前编辑器实例中
plugins : 'preview fullscreen table image lineheight emoticons',

// 使用toolbar来配置工具栏上可用的按钮，多个控件使用空格分隔，使用“|”来创建分组
toolbar: 'preview| undo redo | fullscreen formatpainter table |'

// 隐藏工具栏，则将其设为false
toolbar: false

lineheight（行高 5.5新增）
newdocument（新文档）
bold（加粗）
italic（斜体）
underline（下划线）
strikethrough（删除线）
alignleft（左对齐）
aligncenter（居中对齐）
alignright（右对齐）
alignjustify（两端对齐）
styleselect（格式设置）
formatselect（段落格式）
fontselect（字体选择）
fontsizeselect（字号选择）
cut（剪切）
copy（复制）
paste（粘贴）
bullist（项目列表UL）
numlist（编号列表OL）
outdent（减少缩进）
indent（增加缩进）
blockquote（引用）
undo（撤销）
redo（重做/重复）
removeformat（清除格式）
subscript（下角标）
superscript（上角标）

// 影响菜单下拉列表中显示的项目
menubar: 'file edit'

paste_data_images: true, // 设置为“true”即允许粘贴图像，而将其设置为“false”则不允许粘贴图像。
// 注意： 在使用前必须引入paste插件

// 只读模式
readonly: true

API

创建编辑器

 tinymce.init({
    selector: '#'+tinyID,
    language:'zh_CN',
    plugins:'link image indent2em',
    auto_focus: true,
});

获得内容

 var cnt = tinymce.editors[tinyID].getContent();
 console.log(cnt)

设置内容

tinymce.editors[tinyID].setContent('设置内容');

插入内容

tinymce.editors[tinyID].insertContent('<b>插入内容</b>');

获得纯文本

var cnt = tinymce.editors[tinyID].getContent({ format: 'text' });
console.log(cnt);

隐藏编辑器

tinymce.editors[tinyID].hide();

显示编辑器

tinymce.editors[tinyID].show();

销毁编辑器

tinymce.editors[tinyID].destroy();

// tinymce.remove('#viewSection');
// tinymce.editors[tinyID].remove();

保存回调函数

// 指定当调用保存按钮/命令时执行的操作。
tinymce.init({
    selector: '#tinydemo',
    plugins: "save",
    toolbar: "save",
    save_enablewhendirty: false,
    save_onsavecallback: function () { tipsJS('已保存'); }
});

手动修改文本样式

// 
tinymce.editors[tinyID].execCommand('fontSize',false,'24px'); // 文字大小
tinymce.editors[tinyID].execCommand('bold'); // 加粗文本
tinymce.editors[tinyID].execCommand('ForeColor',false,'#f33'); // 标红文字
tinymce.editors[tinyID].execCommand('copy'); // 复制选中文字
tinymce.editors[tinyID].execCommand('paste'); // 粘贴
tinymce.editors[tinyID].execCommand('mceImage'); // 打开图片对话框
tinymce.editors[tinyID].execCommand('indent2em'); // 自定义首行缩进

开发注意项

图片上传

TinyMCE提供了图片异步上传处理函数images_upload_handler让用户配置上传图片的相关参数，这里有三个参数，

图片数据（blobinfo是一个对象，包含上传文件的信息）
成功时的回调函数（success，上传成功的时候向success传入一个图片地址）
失败时的回调函数（failure，失败的时候向 failure 传入报错信息）

这里我们可以通过images_upload_handler来重新自定义一个上传方法

tinymce.init({
    selector: '#editorSection',
    ...originOptions,
    images_upload_handler: this.images_upload_handler,
    setup: editor => {
        // 编辑时,初始化赋值
        editor.on('init', () => {
            editor.setContent(data);
        });
    }
});

images_upload_handler(blobInfo, success, failure){
    let getFile = blobInfo.blob();
    ....
    success(path);
}

初始化文本赋值

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’ } );

编辑器的销毁

1、如果当前页面只有一个编辑器：

tinymce.editors[tinyID].destroy();

// tinymce.remove('#viewSection');
// tinymce.editors[tinyID].remove();

2、如果当前页面有多个编辑器

// 销毁组件前销毁编辑器
for (let i of Object.keys(window.tinymce.editors)) {
    if (window.tinymce.editors[i]) {
        window.tinymce.editors[i].destroy();
    }
}