在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