vue中使用富文本插件

两种插件：element-tiptap、vue-quill-editor

vue-quill-editor仓库地址：https://hub.fastgit.org/surmon-china/vue-quill-editor

element-tiptap官网地址： https://github.com/Leecason/element-tiptap/blob/HEAD/README_ZH.md

以下是element-tiptap的使用方法

效果如下

下载element-tiptap

npm install --save element-tiptap

在main.js中引入该插件

import { ElementTiptapPlugin } from 'element-tiptap';
// import element-tiptap 样式
import 'element-tiptap/lib/index.css';

// 安装 element-tiptap 插件
Vue.use(ElementTiptapPlugin, { /* 插件配置项 */ lang: 'zh' })
// 现在你已经在全局注册了 `el-tiptap` 组件。

在组件中使用

html

<el-tiptap v-model="content"
                     placeholder="请输入文章内容"
                     height="400"
                     :extensions="extensions" />

js

import {
  // 需要的 extensions
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList
} from 'element-tiptap'

// export default中的data
export default {
	data () {
	    return {
	      content:'',
	     // 编辑器的 extensions
    	// 它们将会按照你声明的顺序被添加到菜单栏和气泡菜单中
	      extensions: [
	        new Doc(),
	        new Text(),
	        new Paragraph(),
	        new Heading({ level: 5 }),
	        new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
	        new Underline({ bubble: true, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
	        new Italic(),
	        new Strike(),
	        new ListItem(),
	        new BulletList(),
	        new OrderedList()
	      ]
	    }
	  },
	}