vue2版本tinymce简单使用指南

一、安装

可以通过在官网下载安装包（官网地址：The Most Trusted & Feature-rich WYSIWYG Rich Text Editor | TinyMCE），解压到项目目录，也可以通过npm进行安装，这里仅介绍npm安装方式。

执行以下命令

npm i tinymce@5.10.9  @tinymce/tinymce-vue@3.2.8 -S

以上tinymce版本和@tinymce/tinymce-vue的版本，是支持vue2的版本，且搭配使用，经验证可行。

二、使用（含语言包引入）

<template>
    <div>
        <Editor
            v-model="myValue"
            api-key="jzlds2e6urz6akm9wxp4f70mnwg83d8fovsialqazxowyity"
            :init="init"
            @onClick="onClick"
            @input="onInputContent"
        />
    </div>
</template>
//上面api-key应该是在官网注册后获得的，当前代码示例中的key可用，是从其他博客那搬来的（惭愧~）
<script>
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver/theme';
import 'tinymce/icons/default/icons';
import './skins/ui/oxide/skin.css'; // npm安装后，将tinymce目录下的skins目录复制到当前文件同级目录下
import './langs/zh_CN.js'; //从官网下载语言包，放在当前文件同级目录下
import 'tinymce/plugins/image'; // 上传图片插件
import 'tinymce/plugins/link'; // 超链接
import 'tinymce/plugins/code'; // 源码
import 'tinymce/plugins/table'; // 插入表格插件
import 'tinymce/plugins/wordcount'; // 字数统计插件
import 'tinymce/plugins/lists'; // 列表插件
//还有其他可用插件，详见官网

export default {
    data(){
        return {
            myValue: '', //双向绑定编辑器内容
            init: {
                height: 500, //编辑器高度
                language: 'zh_CN', //汉化包
                plugins: 'image table wordcount code link save',//工具栏要显示哪些插件
                setup: function (editor) {
                    editor.on('init', function (ed) {
                        this.getBody().style.fontSize = '14px';//设置文本字体大小
                        this.getBody().style.fontFamily = '微软雅黑';//设置字体
                    });
                }
            }
        }
    },
    components: { Editor },
    mounted() {
        tinymce.init({});
    },
    methods: {
        onClick() {
            console.log(tinymce.activeEditor.getContent({ format: 'text' }));//获取纯文本内容
            console.log(this.myValue);//获取文本内容（带html标签）
        },
        onInputContent(data) {
            console.log(data); //实时获取输入内容
        }
    }
}
</script>

如果同一个页面中渲染了多个Editor，可以通过以下代码进行区分

tinymce.editors[0].getContent();
tinymce.editors[1].getContent();
...

三、图片从本地上传

tinymce默认图片上传，是输入图片的可访问路径地址，如输入百度中搜索到的图片地址，如下图：

保存后，图片即可显示在编辑框中。

但大多数情况下，我们需要从本地上传图片，此时需要配置images_upload_url，配置后，图片上传界面会发生变化，配置代码示例：

images_upload_url: '/api/upload/file', //图片上传相对路径地址(示例代码)；

如上图所示，页面中增加了一个上传的tab选项，切换到上传tab后，右侧就出现了选择本地图片的样式。

但此时进行图片上传，可能会出现问题，如下图：

上图中提示的是无法解析json数据。其原因是，tinymce需要图片上传返回的数据中包含location字段，且location中是上传图片的返回地址。但我们的后台服务可能并不会返回location字段，而是返回其他字段，如fileUrl， 此时就需要配置images_upload_handler来对上传返回的json数据进行处理，如下：

images_upload_handler: function (blobInfo, success, failure, progress) {
                    var xhr, formData;

                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', '/api/upload/file');

                    xhr.onload = function () {
                        if (xhr.status != 200) {
                            failure('HTTP Error: ' + xhr.status);
                            return;
                        }
                        var json = JSON.parse(xhr.responseText);
                        if(!json.location){
                            json.location = '/api/upload/file/' + json.fileUrl;
                            success(json.location);
                        }
                    };

                    formData = new FormData();
                    formData.append('file', blobInfo.blob(), blobInfo.filename());

                    xhr.send(formData);
                }

上面代码，即对返回的json数据进行了处理，将fileUrl的值赋给了loaction，使之符合tinymce的要求。

再次点击上传图片后，得到以下结果：

源中的地址，即本次图片上传后服务器返回的地址，保存后，即可在编辑器中回显图片。

四、本地上传视频

与图片上传类似，视频上传支持输入视频地址的方式，也支持从本地选择视频文件上传。

通过输入地址上传，如下图：

只需要在源中输入视频访问地址，即可完成上传操作。

如需要从本地选择，需要增加两个配置项：file_picker_types，file_picker_callback

file_picker_types: 'media',
file_picker_callback: function (cb, value, meta){}

配置以上代码后，当再次点击视频上传后，界面发生变化：

从上图可见，源输入框后面多了一个上传的图标，但是当前点击该图标，没有任何反应。因为上传的功能需要在 file_picker_callback函数中实现。即当点击上传图标时，会触发file_picker_callback函数。

上传功能实现如下：

file_picker_callback: function (cb, value, meta) {
                    // 当点击媒体按钮时，会触发这个回调函数
                    if (meta.filetype == 'media') {
                        //创建一个隐藏的type=file的文件选择input
                        let input = document.createElement('input');
                        input.setAttribute('type', 'file');
                        input.onchange = function () {
                            let file = this.files[0]; //只选取第一个文件。如果要选取全部，后面注意做修改
                            let xhr, formData;
                            xhr = new XMLHttpRequest();
                            xhr.open('POST', '/api/upload/file');
                            // xhr.withCredentials = true;
                            // xhr.upload.onprogress = function (e) {
                            //     // 进度(e.loaded / e.total * 100)
                            // };
                            xhr.onerror = function () {
                                //根据自己的需要添加代码
                                console.log(xhr.status);
                                return;
                            };
                            xhr.onload = function () {
                                let json;
                                if (xhr.status < 200 || xhr.status >= 300) {
                                    console.log('HTTP 错误: ' + xhr.status);
                                    return;
                                }
                                json = JSON.parse(xhr.responseText);
                                //假设接口返回JSON数据为{status: 0, msg: "上传成功", data: {location: "/localImgs/1546434503854.mp4"}}
                                //接口返回的文件保存地址
                                let mediaLocation = '/api/upload/file/' + json.fileUrl;
                                //cb()回调函数，将mediaLocation显示在弹框输入框中
                                cb(mediaLocation, { title: file.name });
                            };
                            formData = new FormData();
                            //假设接口接收参数为file,值为选中的文件
                            formData.append('file', file);
                            //正式使用将下面被注释的内容恢复
                            xhr.send(formData);
                        };
                        //触发点击
                        input.click();
                    }
                }

上传后，源输入框中将会显示视频的地址：

点击保存后，视频将会显示在文本编辑器中。