VUE3（二十六）基於wangeditor自定義富文本插件

項目中需要使用到wangeditor，這里封裝一個自定義組件，便於后期使用。

首先，官方文檔：

https://www.wangeditor.com/

1：安裝

npm i wangeditor --save

2：組件代碼

Wangeditor.vue

<template>
    <div ref='editor' ></div>
    <!-- <button @click='syncHTML'>同步內容</button>
    <div :innerHTML='content.html'></div> -->
</template>
 
<script>
  // 引入js文件
  import Wangeditor from "/@/assets/js/components/pc/Wangeditor";
 
  // 使用js對象
  export default {
    ...Wangeditor,
  };
</script>

Wangeditor.ts

import { onMounted, onBeforeUnmount, ref, watch } from 'vue';
// 引入wangeditor組件
import WangEditor from 'wangeditor';
// 引入代碼高亮組件
import hljs from 'highlight.js'
// 公共狀態文件
import {  webScoketObject } from "/@/hooks/common";
 
// 官方文檔：https://doc.wangeditor.com/
export default {
  name: 'Wangeditor',
  setup(props: any, content: any) {
    // 獲取編輯器實例html
    const editor = ref();
    // 編輯器實例對象
    let instance: any = '';
    /**
     * @name: 監聽公共狀態欄值變化(控制抽屜顯示)
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-10 
     */
    watch(
      () => webScoketObject.is_click_send,
      () => {
        if (webScoketObject.is_click_send)
        {
          instance.txt.clear();
          webScoketObject.is_click_send = false;
        }
      }
    );
    /**
     * @name: 生命周期函數-----掛載完成
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-19 
     */
    onMounted(() => {
      // 編輯器實例對象
      instance = new WangEditor(editor.value);
      //插入代碼語言配置
      instance.config.languageType = [
        'Bash',
        'C',
        'C#',
        'C++',
        'CSS',
        'Java',
        'JavaScript',
        'JSON',
        'TypeScript',
        'Plain text',
        'Html',
        'XML',
        'SQL',
        'Go',
        'Kotlin',
        'Lua',
        'Markdown',
        'PHP',
        'Python',
        'Shell Session',
        'Ruby',
        'typescript'
      ]
      // 自定義菜單
      instance.config.menus = [
        // 'head',
        // 'bold', //字體加粗
        // 'fontSize',//字號
        // 'fontName',//字體
        // 'italic',
        // 'underline',//下划線
        // 'strikeThrough',//刪除線
        // 'indent',
        // 'lineHeight',
        'foreColor',
        // 'backColor',
        'link',
        // 'list',//列表
        // 'todo',
        // 'justify',//對其
        // 'quote',// 引用
        'emoticon',
        'image',
        // 'video',//視頻
        // 'table',//表格
        'code',
        // 'splitLine',
        // 'undo',//撤銷
        // 'redo',//恢復
      ];
      // 代碼高亮
      instance.highlight = hljs;
      // 開啟本地上傳圖片(這是后端上傳鏈接)
      instance.config.uploadImgServer = '/upload-img';
      // 限制上傳圖片格式
      instance.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
      // 開啟本地上傳視頻(這是后端上傳鏈接)
      instance.config.uploadVideoServer = '/api/upload-video';
      // 設置編輯器高度
      instance.config.height = 150;
      // 設置編輯器頁面層級
      instance.config.zIndex = 10;
      // 設置編輯器placeholder
      instance.config.placeholder = '請輸入您的文字！';
      // 配置編輯器顯示顏色
      instance.config.colors = [
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf'
      ];
      // 忽略粘貼內容中的圖片
      instance.config.pasteIgnoreImg = true;
 
      Object.assign(instance.config, {
        // wangeditor 值發生變化的時候
        onchange() {
          // 將值傳遞至父組件
          content.emit('getWangEditorValue', instance.txt.html());
        },
        // 上傳網絡圖片回調
        linkImgCallback(src:string){
          console.log('圖片 src ', src)
        },
        // 上傳網絡視頻回調
        onlineVideoCallback(video:string) {
          // 自定義回調內容，內容成功插入后會執行該函數
          console.log('插入視頻內容', video)
        }
      });
      instance.create();
    });
 
    /**
     * @name: 生命周期函數-----頁面卸載之前
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-19 
     */
    onBeforeUnmount(() => {
      instance.destroy();
      instance = null;
    });
    return {
      editor,
    };
  },
};

3：調用實例：

<template>
<Wangeditor v-on:getWangEditorValue=getWangEditorValue ></Wangeditor>
</template>
<script lang="ts">
  import {
    PropType,
    ref,
    watch,
    reactive,
    toRefs,
    provide,
    inject,
    onBeforeMount,// 在組件掛載之前執行的函數
    onMounted,
    onBeforeUpdate,// 在組件修改之前執行的函數
    onUpdated,
    onBeforeUnmount,// 在組件卸載之前執行的函數
    onUnmounted,
    nextTick
} from "vue";
 
//導入代碼高亮文件
import hljs from 'highlight.js' 
 
// 引入axios鈎子
import axios from "/@/hooks/axios.ts";
 
import { useRouter, useRoute } from "vue-router";
import Wangeditor from "/@/components/pc/Wangeditor.vue";
 
// api 接口文件
import { putComment, getArticleDetail } from "/@/api/pc/articleDetail.ts";
export default {
    name: "articleDetail",
    components: {
        Wangeditor,
    },
    // VUE3 語法 第一個執行的鈎子函數
    // setup官方文檔
    // https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#參數
    setup(props: any, content: any) {
        // 實例化路由
        var router = useRouter();
        // 路由參數
        var route = useRoute();
        /**
         * @name: 聲明data
         * @author: camellia
         * @email: [e-mail]
         * @date: 2021-01-18
         */
        const data = reactive({
            // 評論內容
            comment_content: '',
        });
        
        /**
         * @name: 獲取wangeditor數據
         * @author: camellia
         * @email: [e-mail]
         * @date: 2021-01-19 
         */
        const getWangEditorValue = (str:string) => {
            data.comment_content = str;
        } 
        /**
         * @name: 將data綁定值dataRef
         * @author: camellia
         * @email: [e-mail]
         * @date: 2021-01-10
         */
        const dataRef = toRefs(data);
        return {
getWangEditorValue,  
            ...dataRef
        }
    },
    methods: {
 
    }
};
</script>

4：最終效果

有好的建議，請在下方輸入您的建議。

歡迎訪問個人博客
https://guanchao.site

歡迎訪問小程序：