vue实现本地使用tinymce富文本编辑器

效果图：

第一步：去官网下载本地包 https://www.tiny.cloud/get-tiny/self-hosted/

（1）下载社区版就可以

上面版本比较卡下载不下来的话，就下载下面版本的

（2）下载下来解压后是这样的

然后进入js文件夹找到tinymce文件夹

（3）将这个文件夹的所有内容，复制出来，粘贴到vue项目中的static文件夹下

第二步：引入

（1）在index.html中引入tinymce.js文件

<script src="/static/tinymce/tinymce.js"></script>

第三步：使用

<template>
    <div>
        <textarea id="tinymce-editor" v-model="content">请输入内容</textarea>
        <input type="button" value="提交" @click="submitCont">
    </div>

</template>
 
<script>
export default {
    components() {
    },
    data() {
        return {
            content: ""
        }
    },
    methods: {
        submitCont() {
            //将获取的内容复制给textarea绑定的值
            this.content = tinymce.editors["tinymce-editor"].getContent();
            console.log(this.content);
        }
    },
    mounted() {
        tinymce.init({
            selector: '#tinymce-editor',
            //skin:'oxide-dark',
            //language_url: '../../../../../static/tinymce/langs/zh_CN.js', //汉化
            //language: 'zh_CN',
            plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs',
            toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
            height: 650, //编辑器高度
            min_height: 400,
            fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
            font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
            importcss_append: true,
            // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
            images_upload_handler: (blobInfo, success, failure) => {
                const img = 'data:image/jpeg;base64,' + blobInfo.base64()
                success(img)
            },

            toolbar_sticky: true,
            autosave_ask_before_unload: false,
        });
    },

}
</script>
 
<style scoped>
/* @import url('./skins/ui/oxide/skin.min.css'); */
</style>

此时效果是英文的

第四步：汉化

zh_CN （汉化包下载，直接右击保存为js文件即可，直接在浏览器打开是乱码也不影响使用）

下载完成之后是个js文件，放入你的static文件下

然后将上面的init配置中关于汉化的注释打开就行了

完成。

【注意】

1、获取富文本编辑器中的内容，是通过以下方法获取的

tinymce.editors[ “你定义的编辑器的ID名称” ].getContent();

2、图片上传上面也写了，没走接口通过base64直接显示的，也可以调接口，通过接口返回固定格式 { location: ‘图片地址’ } 进行上传。因为tinymce的官网具体说明了这一点：

通过接口上传图片的方法：

         images_upload_handler: function (blobInfo, success, failure) {
             let formdata = new FormData();
             formdata.append("textpicFiles", blobInfo.blob());
             // 上传图片接口，跟后端协调上传图片
             // 将下面的接口地址修改为你的
             axios.post('http://192.168.1.220:8081/jw/article/addTextPic', formdata)
                 .then(function (res) {
                      console.log(res)
                      success(res.data);
                 }).catch(res => {
                        //failure("error");
               });
          },

后台返回格式：