Vue的富文本插件(vue-quill-editor和tinymce)

一.使用vue-quill-editor實現富文本編輯器

Quill官方開發文檔：https://www.kancloud.cn/liuwave/quill/1409423

1.安裝依賴：npm install vue-quill-editor –save

2.在main.js或者需要用到此富文本的頁面引入插件和Css：

       import { quillEditor } from "vue-quill-editor";

       import "quill/dist/quill.core.css";

       import "quill/dist/quill.snow.css";

       import "quill/dist/quill.bubble.css";

3.掛在組件：

       export default { components: { quillEditor } }

4.自定義toolbar菜單

     

      content: '', //富文本的內容
      editorOption: {
        modules: {
        toolbar: [
        [
        "bold", "italic", "underline", "strike", "link", "image", "code-block", ], // toggled buttons [{ 'align': [] }], //對齊方式 [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //幾級標題 [{ 'font': [] }], //字體 [{ 'size': ['small', 'normal', 'large', 'huge'] }], [{ 'color': [] }, { 'background': [] }], // 字體顏色，字體背景顏色  ], }, },

 也可直接寫editorOption:{}，即會出現所有的工具欄

 5.在你想要用的位置用即可

<el-form-item label="內容:"
                      prop="content">
          <quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" /> </el-form-item>

6.最終效果

 

 總的來說：vue-quill-editor還是比較簡單的，用起來很方便，基本功能也有，一般的業務需求用這款富文本編輯器也還是比較合適的

                注：引入的Css樣式,手機端無法解析，無法適配手機端樣式，故如需適配手機端樣式，還是不要用這個了！

                       我也是因為這個原因不得不換了其他富文本編輯器

                       我這里用到的是Tinymce

二：使用Tinymce實現富文本編輯器，功能更多，插件豐富，多語言支持

       中文文檔：http://tinymce.ax-z.cn/

1.安裝插件：npm install @tinymce/tinymce-vue@3.2.2 tinymce@5.3.1 -S

2.在項目中的public下新建tinymce文件夾，把node_modules中的skins文件夾，將skins文件夾拷貝到public的tinymce目錄下。接着去官網下載語言包，解壓，將langs文件夾拷貝到public的tinymce文件夾下(和skins文件夾同級)

3.在components文件夾下新建tinymce組件的文件夾，新建index.vue文件，復制以下代碼進去:

<template>
 <div class="tinymce-editor">
  <Editor
   :id="editorId"
   v-model="editorValue"
   :init="editorInit"
  />
 </div>
</template>
 
<script>

//引入上傳圖片
import { getToken } from '../../utils/auth'
import axios from 'axios'
// 引入組件
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/icons/default/icons';
import 'tinymce/themes/silver';
// 引入富文本編輯器主題的js和css
import 'tinymce/themes/silver/theme.min';
import 'tinymce/skins/ui/oxide/skin.min.css';
// 擴展插件
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/wordcount'; // 字數統計插件
import 'tinymce/plugins/media';// 插入視頻插件
import 'tinymce/plugins/template';// 模板插件
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/textcolor';

export default {
 name: 'TinymceEditor',
 components: {Editor},
 props: {
  height: {
   type: Number,
   default: 500
  },
  id: {
   type: String,
   default: 'tinymceEditor'
  },
  value: {
   type: String,
   default: ''
  },
  plugins: {
   type: [String, Array],
   default: 'link lists image code table wordcount media fullscreen preview paste contextmenu textcolor'
  },
  toolbar: {
   type: [String, Array],
   default: 'fontselect| fontsizeselect | bold italic underline strikethrough table fullscreen  | link  image media  | undo redo  | alignleft aligncenter alignright alignjustify | bullist numlist | forecolor backcolor | outdent indent blockquote | code | removeformat'
  }
 },
 data() {
  return {
   editorInit: {
    language_url: `/tinymce/langs/zh_CN.js`,
    language: 'zh_CN',
    skin_url: `/tinymce/skins/ui/oxide`,
    content_css: `/tinymce/skins/content/default/content.css`,
    content_style: '* { padding:0; margin:0; } img {max-width:100% !important }',
    plugin_preview_width: 375, // 預覽寬度
    plugin_preview_height: 200,
    lineheight_val: "1 1.1 1.2 1.3 1.35 1.4 1.5 1.55 1.6 1.75 1.8 1.9 1.95 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3 3.1 3.2 3.3 3.4 4 5",
    fontsize_formats: "8pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt",
    font_formats:"微軟雅黑='微軟雅黑';宋體='宋體';黑體='黑體';仿宋='仿宋';楷體='楷體';隸書='隸書';幼圓='幼圓';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
    plugins: this.plugins,
    powerpaste_word_import: 'merge',
    toolbar: this.toolbar,
    height:400,
    media_live_embeds:true,//視頻的內嵌代碼預覽是否開啟，為ture時富文本編輯框可實現預覽功能
    paste_data_images: true,
    statusbar: true, // 底部的狀態欄
    menubar: false, // 最上方的菜單
    branding: false, // 水印“Powered by TinyMCE”
    images_upload_handler: (blobInfo, success, failure) => {
    //  this.$emit('handleImgUpload', blobInfo, success, failure);
    this.handleImgUpload(blobInfo, success, failure)
    },
    //自定義邏輯替換 Tinymce 的默認媒體嵌入邏輯   
   },
   editorId: this.id,
   newValue: ''
  };
 },
 watch: {
  newValue(newValue) {
   this.$emit('input', newValue);
  }
 },
 mounted() {
  tinymce.init({});
 },
 computed: {
  editorValue: {
   get() {
    return this.value;
   },
   set(val) {
    this.newValue = val;
   }
  }
 },
 methods: {
    // 上傳本地 圖片執行事件
    handleImgUpload(blobInfo, success, failure) {
      console.log('llllllllllllllllllllll');
      let formdata = new FormData()
      // append 方法中的第一個參數就是 我們要上傳文件 在后台接收的文件名
      // 這個值要根據后台來定義
      // 第二個參數是我們上傳的文件
      formdata.append('file', blobInfo.blob())
      // axios 定義上傳方法
      axios({
        method: "post", // post方法
        url: "http://112.156.20.36:18000/manage/manage/file/uploadFile", // 請求上傳圖片服務器的路徑
        headers: {
        'Authorization': 'Bearer ' + getToken(),'Content-Type': 'application/x-www-form-urlencoded', // 采用表單上傳的方式，看后台如何接受
        },
        data: formdata // 請求數據formdata
      }).then(res => {
        if (res.data.code != 200) {
          // 上傳失敗執行此方法，將失敗信息填入參數中
          failure('HTTP Error: ' + res.msg);
          return
        }
        // 上傳成功之后，將對應完整的圖片路徑拼接在success的參數中
        success(res.data.msg);
      })
    },
 
  clear() {
   this.editorValue = '';
  }
 }
};
</script>

圖片上傳，請是根據自己的實際情況做相應的更改

4.在你需要用到此富文本插件的頁面引入插件，和掛載插件

  import TinymceEditor from '@/components/tinymce';

  components: { TinymceEditor},

5.在使用的位置使用即可

  <el-form-item label="內容:" prop="content">
              <tinymce-editor
              id="editor"
              ref="editor"
              v-model="formInline.content"
              style="width:60%;"
             />
        </el-form-item>

此刻，你不需要上傳視頻文件的需求等那么基本功能就可以實現了

如果，你要上傳視頻，就會出現視頻無法預覽的問題，此刻如果視頻是內嵌視頻代碼地址，只需要

 media_live_embeds:true,//視頻的內嵌代碼預覽是否開啟，為ture時富文本編輯框可實現預覽功能

如果不是內嵌視頻，是普通視頻的話，那就需要

1.打開node_modules->tinymce->plugins->media文件夾下的plugin.js文件作以下更改

  將此段代碼注釋

2.創建一個全局變量來存video的src 

3.在注釋的代碼下添加如下代碼：

if(node.name === 'video' && hasLiveEmbeds(editor) && global$8.ceFalse){
            console.log('videoSource===', videoSource)
            videoSource = ''
            if(node.attributes['map'] && node.attributes['map'].src){
              videoSource = node.attributes['map'].src
            }else{
              for(var ii=0;ii<node.attributes.length;ii++){
                if(node.attributes[ii].name == "src"){
                  videoSource = node.map.node.attributes[ii].value
                }
              }
            }
            if(node.firstChild && node.firstChild.value){
              var elel=node.firstChild && node.firstChild.value
              var objE = document.createElement("div");
          　　 objE.innerHTML = elel;
              var dom = objE.getElementsByTagName('source')[0]
              videoSource = dom.getAttribute('src')
            }
            node.replace(createPreviewIframeNode(editor, node));
          }

4.修改此文件中createPreviewIframeNode方法（僅兩處）

 var createPreviewIframeNode = function (editor, node) {
      var previewWrapper;
      var previewNode;
      var shimNode;
      var name = node.name;
      previewWrapper = new global$7('span', 1);
      previewWrapper.attr({
        'contentEditable': 'false',
        'style': node.attr('style'),
        'data-mce-object': name,
        'class': 'mce-preview-object mce-object-' + name
      });
      retainAttributesAndInnerHtml(editor, node, previewWrapper);
      previewNode = new global$7(name, 1);
      previewNode.attr({
        // src: node.attr('src'),
        src: videoSource || node.attr('src'), // 修改
        controls: 'controls',    // 新增
        allowfullscreen: node.attr('allowfullscreen'),
        style: node.attr('style'),
        class: node.attr('class'),
        width: node.attr('width'),
        height: node.attr('height'),
        frameborder: '0'
      });
      shimNode = new global$7('span', 1);
      shimNode.attr('class', 'mce-shim');
      previewWrapper.append(previewNode);
      previewWrapper.append(shimNode);
      return previewWrapper;
    };

此時就顯示正確了，內嵌視頻和普通視頻都可預覽了，完美

 

參考文章：https://blog.csdn.net/Colourfuljia/article/details/108400662?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-5.not_use_machine_learn_pai&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-5.not_use_machine_learn_pai