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月前
|
索引
第10节:Vue3 论点
第10节:Vue3 论点
47 0
|
JavaScript
112.【Vue-细刷-03】(四)
112.【Vue-细刷-03】
73 0
|
6月前
|
JavaScript
Vue——initRender【八】
Vue——initRender【八】
51 1
|
9月前
|
JavaScript 前端开发 网络架构
Vue3 五天速成(中)
Vue3 五天速成(中)
75 1
|
存储 JavaScript 前端开发
Vue是什么,它的特点是什么。
Vue是什么: 一套用于构建用户界面的渐进式JavaScript框架。 构建用户界面:通过你的数据来构建界面。 渐进式:Vue可以自底向上逐层的应用。 简单应用:只需一个轻量小巧的核心库。 复杂应用:可以引入各式各样的Vue插件。
|
9月前
|
JavaScript 前端开发 编译器
Vue3 究竟好在哪里?
Vue3 究竟好在哪里?
139 0
|
9月前
|
JavaScript 前端开发
vue.use是干什么的
vue.use是干什么的
186 0
|
JavaScript
Vue中,$forceUpdate()的使用
Vue中,$forceUpdate()的使用
111 0
|
存储 缓存 JSON
113.【Vue-细刷-04】(一)
113.【Vue-细刷-04】
43 0
|
JavaScript
114.【Vue-细刷-05】(二)
114.【Vue-细刷-05】
42 0

热门文章

最新文章