简单清爽的Vue.js的所见即所得编辑器 - vue-wysiwyg

简单清爽的Vue.js的所见即所得编辑器 - vue-wysiwyg
插件名称 vue-wysiwyg
发布时间 2020年4月15日
插件作者 mycurelabs

一个简单的干净的所见即所得编辑器组件,用于注释,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: {
        // 编辑器隐藏按钮添加到这里
      }
    }
  }
}