vue2使用wangEditor

vue2使用wangEditor

前几天一个月薪35k的兄弟，给我推了一个人工智能学习网站，看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有，很详细，分享给大家。大家及时保存，说不定啥时候就没了。

效果

wangEditor官网

安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

组件封装

editorVue.vue

<template>
  <div>
    <div style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
      />
      <!-- 编辑器 -->
      <Editor
        style="height: 400px; overflow-y: hidden"
        :defaultConfig="editorConfig"
        v-model="html"
        @onChange="onChange"
        @onCreated="onCreated"
      />
    </div>
  </div>
</template>
 
<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  name: "editorVue",
  components: { Editor, Toolbar },
  props: {
    content: {
      type: String,
      default: '',
    },
    readOnlys: { // 只读
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {
        /* 显示哪些菜单，如何排序、分组 */ 
        toolbarKeys: [
          'headerSelect', 
          // '|', 
          'bold', 
          'underline', 
          'italic', 
          'color', 
          'bgColor', 
          // '|', 
          'indent',  // 增加缩进
          'delIndent',  // 减少缩进
          'justifyLeft',  // 左对齐
          'justifyRight',  // 右对齐
          'justifyCenter',  // 居中
          'justifyJustify',  // 两端对齐
          // '|', 
          'fontSize', 
          'fontFamily', 
          'lineHeight', 
          // '|', 
          'bulletedList', 
          'numberedList', 
          'todo', 
          'insertLink', 
          'insertTable', 
          // '|', 
          'codeBlock', 
          'divider', 
          'uploadImage', 
          'undo', 
          'redo', 
        ], 
        // excludeKeys: [ ], /* 隐藏哪些菜单 */ 
      },
      editorConfig: {
        placeholder: "请输入内容",
        // autoFocus: false,
        // readOnly: true, // 只读、不可编辑
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {
            customUpload: this.uploaadImg
          },
        },
      },
    };
  },
  watch: {
    readOnlys: {
      handler(newV) {
        if(newV) {
          this.editor.disable()  // 只读模式
        }
      }
    },
  },
  methods: {
    uploaadImg(file, insertFn){
      this.$emit('uploadImg', file, insertFn)
    },
    onCreated(editor) {
      this.editor = Object.seal(editor);
    },
    onChange(editor) {
      this.$emit('changeData', this.html)
    },
  },
  created() {
    this.html = this.content;
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor
  },
};
</script>
 
<style src="@wangeditor/editor/dist/css/style.css"></style>

组件使用

index.vue

<template>
  <div>
    <editor-vue 
    :content="content"
    :readOnlys="readOnlys"
    @changeData="hChangeData"
    @uploadImg="hUploadImg"
    />
  </div>
</template>
 
<script>
import editorVue from './module/editorVue.vue'
export default {
  components: {
    editorVue,
  },
  data() {
    return {
      readOnlys: false,
      content: `<p style="text-align: center;"><strong>我是标题</strong></p><p style="text-align: center;"><br></p>`,
    };
  },
  methods: {
    hChangeData(editDataHtml){
      // 获取最新的html数据
      this.content = editDataHtml
      console.log(this.content)
    },
    hUploadImg(file,insertFn){
      console.log(file)
      // 插入图片，调接口返回图片url,通过插入conteng
      let imgUrl = 'https://img1.baidu.com/it/u=608404415,1639465523&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
      insertFn(imgUrl);

	  // 设置只读
	  this.readOnlys = true;
    },
  },
};
</script>

参考
在antd项目中使用wangEditor经验