Vue 中 tinymce 富文本編輯器的使用

Vue 中 tinymce 富文本編輯器的使用

在原生的 html 中使用到了 vue, 遇到了富文本的需求，tinymce 目前是這個市場比較受歡迎且長期維護的。

1、 依賴下載

因為前端不是 node 環境，無法通過 npm 的方式下載 tinymce。

官方依賴下載地址：https://www.tiny.cloud/get-tiny/self-hosted/

我的版本是 5.8.1，下載后放置在 js 模塊下，然后頁面引入資源：

<script src="/resources/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>

注意修改成自己的 js 路徑。

2、初始化配置

引入資源后，需要進行初始化，這里我的配置如下：

<script>
    tinymce.init({
        //選擇器，這里選取id為mytextarea的文本框
        selector: '#mytextarea',
        //漢化
        language: "zh_CN",
        //圖片上傳插件，配置后才有圖片按鈕
        plugins: 'image',
        // 圖片異步上傳處理函數
        images_upload_handler: (blobInfo, success, failure) => {
            let formData = new FormData();
            formData.append("mFile", blobInfo.blob());
            $.ajax({
                url: "/xms/projectFeedback/image/upload",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.data === "文件類型不符合") {
                        failure("文件類型不符合");
                    } else if (data.data === "文件為空") {
                        failure("文件內容為空");
                    } else {
                        //上傳成功，返回路徑
                        success(data.data);
                    }
                }
            });
        }
    })
</script>

對應上文的 vue 的 文本框代碼如下,可以看到有 id 指定：

<el-form-item label="進度反饋:" prop="description">
    <el-input type="textarea" v-model="form.description" :rows="18" id="mytextarea"></el-input>
</el-form-item>

接下來嘗試獲取文本框數據，你會發現通過 form.desription無法獲取得到數據，雙向綁定失效了。

還好 tinymce 提供了獲取文本框數據的方法：

tinymce.activeEditor.getContent();

將取的值賦給 form.description 就可以了。

3、漢化

到上面的步驟，你會發現界面指示都是英文的，這有點不友好。

官方也提供了各種語言包的下載：https://www.tiny.cloud/get-tiny/language-packages/

找到漢化包，下載：

解壓，將 zh_CN.js 文件放在 tinymce 的 langs 文件夾下：

到這里便漢化完成。

最后展示下效果圖：

神清氣爽有木有。