vue中使用富文本插件

vue 专栏收录该内容
22 篇文章 0 订阅

两种插件: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()
	      ]
	    }
	  },
	}
  • 2
    点赞
  • 8
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值