vue2使用富文本編輯器

目前接觸到的編輯器有三種
1、tinymce-editor
2、@wangeditor/editor-for-vue
3、vue-quill-editor

現(xiàn)在主要介紹一下這三種編輯器的用法

tinymce-editor

@wangeditor/editor-for-vue

編輯器樣式，這個樣式還是比較好看的，功能也比較好用


image.png

1、首先下載插件

yarn add  @wangeditor/editor  // 下載版本是^5.1.23
yarn add  @wangeditor/editor-for-vue   //下載版本是 1.0.2
yarn add  @wangeditor/plugin-upload-attachment // 上傳附件插件 ^1.1.0

2、封裝使用

//封裝富文本編輯器
<template>
  <div :class="{ 'border-line': border }">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor
      :style="{ height }"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
  </div>
</template>
<script>
import Vue from "vue";
import { Boot } from "@wangeditor/editor";
import attachmentModule from "@wangeditor/plugin-upload-attachment";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
import axios from "axios ";

Boot.registerModule(attachmentModule);

export default {
  components: { Editor, Toolbar },
  props: {
    //border
    border: {
      type: Boolean,
      default: false,
    },
    /* 編輯器的內(nèi)容 */
    value: {
      type: String,
      default: "",
    },
    // 高度
    height: {
      type: String,
      default: () => "500px",
    },
  },
  data() {
    return {
      editor: null,
      html: "",
      toolbarConfig: {
        excludeKeys: ["fullScreen"],
        insertKeys: {
          index: 24,
          keys: ["uploadAttachment"],
        },
      },
      editorConfig: {
        placeholder: "請輸入內(nèi)容...",
        scroll: false,
        MENU_CONF: {
          uploadImage: {
            // 自定義上傳圖片 方法
            customUpload: this.uploadImg,
            // 上傳接口設(shè)置文件名
            fieldName: "file",
            meta: {
              token: localStorage.getItem("token"),
            },
          },
          uploadVideo: {
            customUpload: this.uploadVideo,
            fieldName: "file",
            meta: {
              token: localStorage.getItem("token"),
            },
          },
          uploadAttachment: {
            customUpload: this.uploadFile,
            fieldName: "file",
            meta: {
              token: localStorage.getItem("token"),
            },
          },
        },
        hoverbarKeys: {
          attachment: {
            menuKeys: ["downloadAttachment"],
          },
        },
      },

      mode: "default", //default or 'simple'
    };
  },
  watch: {
    value: {
      handler(val) {
        this.html = val;
      },
      immediate: true,
    },
  },
  mounted() {
    // 模擬 ajax 請求，異步渲染編輯器
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 組件銷毀時，及時銷毀編輯器
  },
  methods: {
    onChange(editor) {
      this.$emit("input", this.html);
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否則會報錯
    },
    uploadImg(file, insertFn) {
      let imgData = new FormData();
      imgData.append("file", file);
      commonAxios({
        url: `/fileUpload`,
        data: imgData,
        method: "post",
        headers: {
          Authorization:  localStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.success) {
          insertFn(`圖片url`);
        } else {
          this.$message.warning(res.errorMessage);
        }
      });
    },
    uploadVideo(file, insertFn) {
      let imgData = new FormData();
      imgData.append("file", file);
      commonAxios({
        url: `/fileUpload`,
        data: imgData,
        method: "post",
        headers: {
          Authorization: localStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.success) {
          insertFn(`視頻url`);
        } else {
          this.$message.warning(res.errorMessage);
        }
      });
    },
    uploadFile(file, insertFn) {
      let imgData = new FormData();
      imgData.append("file", file);
      commonAxios({
        url: `/fileUpload`,
        data: imgData,
        method: "post",
        headers: {
          Authorization:  localStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.success) {
          insertFn(
            `附件:${res.resultData.elementName}`,`下載url`);
        } else {
          this.$message.warning(res.errorMessage);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.border-line {
  border: 1px solid #d6d6d6;
}
/deep/.w-e-scroll > div:first-child {
  height: 100%;
  overflow-y: auto;
}
</style>


<template>
<editor v-model="content" height="300px" :border="true" />
</template>
<script>
import editor from "./components/editor.vue";
export default{
  components: {
    editor,
  },
  data(){
    content:''
  }
}
</script>

這樣一個雙向綁定的富文本編輯器就可以使用了！

vue-quill-editor

這個富文本內(nèi)容沒有上一個多，其中圖片和視頻也是要自己寫上傳邏輯


image.png

1、下載插件

yarn add vue-quill-editor
yarn add quill-image-resize-module //調(diào)整大小組件
yarn add quill-image-drop-module //拖動加載圖片組件

2、封裝

<template>
  <w-spin :spinning="loading" tip="上傳中...">
    <quill-editor
      ref="myQuillEditor"
      v-model="editorContent"
      :options="editorOption"
      @change="onEditorChange($event)"
      @click.native="handleEditAblequestion"
    />
  </w-spin>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor, Quill } from "vue-quill-editor";
// 富文本圖片大小
import imageResize from "quill-image-resize-module"; // 調(diào)整大小組件。
import { ImageDrop } from "quill-image-drop-module"; // 拖動加載圖片組件。
Quill.register("modules/imageResize", imageResize);
Quill.register("modules/imageDrop", ImageDrop);

export default {
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  components: {
    quillEditor,
  },
  data() {
    return {
      loading: false,
      editorContent: "",
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], //加粗，斜體，下劃線，刪除線
              ["blockquote", "code-block"], //引用，代碼塊
              [{ header: 1 }, { header: 2 }], // 標(biāo)題，鍵值對的形式；1、2表示字體大小
              [{ list: "ordered" }, { list: "bullet" }], //列表
              [{ script: "sub" }, { script: "super" }], // 上下標(biāo)
              [{ indent: "-1" }, { indent: "+1" }], // 縮進(jìn)
              [{ direction: "rtl" }], // 文本方向
              // [{ size: ["small", false, "large", "huge"] }], // 字體大小
              // [{ header: [1, 2, 3, 4, 5, 6, false] }], //幾級標(biāo)題
              [{ color: [] }, { background: [] }], // 字體顏色，字體背景顏色
              // [{ font: [] }], //字體
              [{ align: [] }], //對齊方式
              // ["clean"], //清除字體樣式
              ["image", "video"], //上傳圖片、上傳視頻
            ],
            handlers: {
              video: () => {
                this.openFileDialog("video");
              },
            },
          },
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
        },
        placeholder: "輸入內(nèi)容...",
      },
    };
  },
  watch: {
    value: {
      handler(newValue) {
        this.editorContent = newValue === null ? "" : newValue;
      },
      deep: true,
      immediate: true,
    },
    editorContent(newValue) {
      this.$emit("input", newValue);
    },
  },
  mounted() {
    this.resetFocus();
  },
  methods: {
    resetFocus() {
      this.$refs.myQuillEditor?.quill?.enable(false);
      // this.$nextTick(() => {
      //   document.querySelector(".content-b").scrollTop = 0;
      // });
    },
    onEditorChange() {
      // console.log(e);
    },
    handleEditAblequestion() {
      this.$refs.myQuillEditor.quill.enable(true);
      this.$refs.myQuillEditor.quill.focus();
    },
    openFileDialog(type) {
      var input = document.createElement("input");
      input.setAttribute("type", "file");
      input.setAttribute("accept", type === "image" ? "image/*" : "video/*");
      input.click();
      let that = this;
      input.onchange = async function () {
        var file = input.files[0];
        const formData = new FormData();
        formData.append("file", file);
        try {
          that.loading = true;
          let res = await that.$axios.post(`上傳接口`, formData, {
            headers: {
              "content-type": "multipart/form-data",
            },
          });
          let url = `返回的url`;
          that.$refs.myQuillEditor.quill.insertEmbed(that.$refs.myQuillEditor.quill.getSelection().index, "video", url);
        } catch (err) {
          console.log(err);
        } finally {
          that.loading = false;
        }

        // // 這里可以添加上傳邏輯，例如使用 FormData 上傳到服務(wù)器
        // // 但是請注意，直接上傳到服務(wù)器的代碼不在這里展示

        // // 如果只是要在編輯器中插入視頻，可以直接使用 file URL
        // if (URL && URL.createObjectURL && type === "video") {
        //   console.log(URL.createObjectURL(file));
        //   console.log(that.$refs);
        //   that.$refs.myQuillEditor.quill.insertEmbed(
        //     that.$refs.myQuillEditor.quill.getSelection().index,
        //     "video",
        //     URL.createObjectURL(file)
        //   );
        // }
      };
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.ql-editor {
  height: 100px;
}
/deep/.ql-snow .ql-picker.ql-size .ql-picker-label::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

/deep/.ql-snow .ql-picker.ql-header .ql-picker-label::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "標(biāo)題1";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "標(biāo)題2";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "標(biāo)題3";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "標(biāo)題4";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "標(biāo)題5";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "標(biāo)題6";
}

/deep/.ql-snow .ql-picker.ql-font .ql-picker-label::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "標(biāo)準(zhǔn)字體";
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "襯線字體";
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等寬字體";
}
</style>

3、使用

<template>
  <Editor v-model="content" />
</template>
<script>
import Editor from "@/components/Editor";
export default {
  components: {  Editor },
  data(){
      content:''
  }
}
</script>

參考文檔

https://www.wangeditor.com/
https://blog.csdn.net/m0_57442975/article/details/134261247
http://www.itdecent.cn/p/9d0aba0ff8ae

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容