vue2使用wangEditor

简介: vue2使用wangEditor

vue2使用wangEditor

效果

image.png

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经验

目录
相关文章
|
9月前
|
缓存 JavaScript 前端开发
Vue3带来了什么
Vue3带来了什么
97 0
|
9月前
|
缓存 JavaScript 前端开发
Vue 3中toRaw和markRaw的使用
Vue 3中toRaw和markRaw的使用
168 0
|
6月前
|
JavaScript
Vue——initEvents【六】
Vue——initEvents【六】
48 0
|
存储 JavaScript
85.【Vue-细刷-01】(五)
85.【Vue-细刷-01】
50 0
|
9月前
|
JavaScript 前端开发 API
使用Vue
使用Vue
51 0
|
JavaScript CDN
|
JavaScript
Vue文章
Vue文章
66 1
|
监控 JavaScript 前端开发
Vue总结必知必会
Vue总结必知必会
88 0
|
存储 数据处理
Vue3中shallowRef和shallowReactive的使用?
Vue3中shallowRef和shallowReactive的使用?
162 0
|
JavaScript
VUE第十二天
VUE第十二天
141 0