vue wangeditor 编辑器使用

PiscesCounty

于 2019-12-27 15:42:23 发布

阅读量256

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_36567996/article/details/103733298

版权

本文介绍了如何在Vue项目中集成并使用wangEditor 3.1.1版本，包括在package.json中添加依赖，编写editor组件源码以及具体引用步骤。

摘要由CSDN通过智能技术生成

1.在package.json 中引入 “wangeditor”: “^3.1.1”
2.编写 editor组件源码如下

<template>
  <div class="vue-editor">
    <div ref="editor"></div>
  </div>
</template>
<script>
import E from 'wangeditor';

export default {
   
  props: {
   
    content: String,
    value: String,
    menus: Array
  },
  data () {
   
    return {
   
      editor: null,
      innerContent: '',
      defaultMenus: [
        'head', // 标题
        'bold', // 粗体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'image'<