在VUE使用tinymce 并改造支持elementui图片上传

1. 先在index.html 引入cdn   <script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>

2. 创建一个VUE页面作为富文本复用组件

3. 先写上必要的 HTML

 

// 主要是 textarea 标签，因为可能一个页面出现多个富文本，所以把 id 作为一个变量书写

// 之后初始化的时候用的就是这个id， 如果需要2个富文本，那一个页面上就会存在2个一样的id，之后初始化必须要用到这个id找到textarea，所以要设置为变量传入

 

4. 然后初始化必要的变量：

    （ value   ids ） 两个变量都从父级传递而来， 一个是ids区分不同的textarea，

　　一个是value，这个变量为什么要从父级传递来呢，因为存在一种情况，修改或者显示表单的时候，接口肯定是在父级调用，获取到的数据自然在父级，所以需要传递给子组件，然后初始化的时候进行赋值显示

props:[
　　　　　value: String,　　//接收父级传递的内容
　　　　　ids: String,　　//区分多个富文本
]

 

  贴上父级使用该组件的代码：

 

5. html加载完后即可生成富文本， 一般写在mounted里，可以加一个  this.$nextTick(() => {}) 来保证 html 加载完毕

6. 富文本初始化代码

 

let self = this
this.Editor = window.tinymce.init({　　//初始化
    selector: `#${self.Id}`,　　　　　　　　//用到了 textarea 的 id  ，指定哪个id的textarea作为初始化对象
    height: 450,
    toolbar: [

　　    "removeformat undo redo | bullist numlist | outdent indent | forecolor | code",
　　    "bold italic blockquote | h2 p media link | alignleft aligncenter alignright"
    ],

    // menubar: this.menubar,
    plugins: "advlist,autolink,code,paste,textcolor,colorpicker,fullscreen,link,lists,media,wordcount, imagetools",
    end_container_on_empty_block: true,
    powerpaste_word_import: "clean",
    code_dialog_height: 450,
    code_dialog_width: 1000,
    advlist_bullet_styles: "square",
    advlist_number_styles: "default",
    block_formats: "普通标签=p;小标题=h2;",
    imagetools_cors_hosts: ["wpimg.wallstcn.com", "wallstreetcn.com"],
    imagetools_toolbar: "watermark",
    default_link_target: "_blank",
    link_title: false,

    // 语言类型 ZH 需要import 引入一个JS文件，例 import { zh } from     "./langs/zh_CN" 
    language_url: zh,　　　　　　　　　　　　　　　
    setup: editor => {
    　　//初始化完成后的一个钩子
    　　editor.on("init", function() {　　    　　　　　　　　
    　　　　self.loading = false;
    　　　　self.$emit("on-ready");
    　　　　editor.setContent(self.value);
　　　　});

    　　//文本内容改变的钩子
    　　editor.on("input change undo redo", function() {　　
    　　　　　　// console.log(editor.getContent());

    　　　　　　//这里联动父级，给父级传递文本内容
        　　　　self.$emit("input", editor.getContent());　　　　　   
        });
    }
});    

 

 

 7. 然后就是改造图片上传了， 这里使用的是 elementui的 uplaod上传组件，原理是在图片上传到服务器后，该组件自带了一个上传成功后的钩子，在钩子里执行之后的步骤。拼接一个 img标签，然后插入到文本内容里即可，

     例    window.tinymce.get(this.Ids).insertContent(`<img class="wscnph" src="${qiniu}${val.key}" >`)   

 　insetContent 的方法就是在原来的内容后面插入html