一个简单的干净的所见即所得编辑器组件，用于注释，CMS，博客等。

安装和下载：

# Yarn
$ yarn add @mycure/vue-wysiwyg

# NPM
$ npm install @mycure/vue-wysiwyg --save

使用：

1.安装后导入组件。

import VueWysiwyg from '@mycure/wysiwyg';

2.在模板中创建一个WYSIWYG编辑器组件。

<template>
  <div>
    <mc-wysiwyg v-model="html"></mc-wysiwyg>
  </div>
</template>

export default {
  components: {
    McWysiwyg
  },
  data () {
    return {
      html: ''
    }
  }
}

3.使用hideprop隐藏编辑器按钮。所有可能的按钮：

• • bold(加粗）
  • italic(斜体)
  • underline(下划线)
  • strikethrough(删除线)
  • heading(标题)
  • alignLeft(左对齐)
  • alignCenter(居中对齐)
  • alignRight(右对齐)
  • ol
  • ul
  • url(网址)
  • table(表格)
  • indent(缩进)
  • outdent(突出)

<template>
  <div>
    <mc-wysiwyg v-model="html" :hide="hide"></mc-wysiwyg>
  </div>
</template>

export default {
  components: {
    McWysiwyg
  },
  data () {
    return {
      html: '',
      hide: {
        // 编辑器隐藏按钮添加到这里
      }
    }
  }
}

---

官网：https://github.com/mycurelabs/vue-wysiwyg

演示：https://www.vue365.cn/code_demo.php?id=227

GitHub下载：https://github.com/mycurelabs/vue-wysiwyg/archive/master.zip