vue-editor富文本编辑器,自定义toolbar修改工具栏

1.概述
在项目中,会需要使用富文本编辑器去编辑文字、上传图片、视频等信息去描述某一个物品的详细信息与介绍。可使用vue的图文编辑vue2-editor去处理这些事情。

首先进行vue2-editor安装

npm install vue2-editor --save 安装至项目中

富文本的使用
  在使用vue2-editor的vue页面文件中,需要引入import { VueEditor } from ‘vue2-editor’ ,然后在components中进行注册图文编辑,然后对图文编辑器组件进行配置处理。

  



效果图
我这里没有添加全部工具栏

vue-editor富文本编辑器,自定义toolbar修改工具栏_第1张图片

如果不需要那么多的工具栏功能要怎么办呢;可以通过customToolbar里边的配置删除多余不要得参数
显示的工具就会变少,想要增加功能可以按下面的对照表配置

关于toolbar工具栏对应功能的模块名

背景颜色 - background
加粗- bold
颜色 - color
字体 - font
内联代码 - code
斜体 - italic
链接 - link
大小 - size
删除线 - strike
上标/下标 - script
下划线 - underline
引用- blockquote
标题 - header
缩进 - indent
列表 - list
文本对齐 - align
文本方向 - direction
代码块 - code-block
公式 - formula
图片 - image
视频 - video
清除字体样式- clean

但是要注意直接引入发现有部分的图标不会显示;
他有些如list这种列表应该是有默认值,文档里有这个默认格式规范

vue-editor富文本编辑器,自定义toolbar修改工具栏_第2张图片

大致上分为这几类:
1.只需要填写功能名的
加粗 - bold;
斜体 - italic
下划线 - underline
删除线 - strike
引用- blockquote
代码块 - code-block
公式 - formula
图片 - image
视频 - video
清除字体样式- clean
这一类的引用 直接[‘bold’,‘clean’]这种格式放一起就好了

2.需要有默认值的
标题 - header
[{ ‘header’: 1 }, { ‘header’: 2 }] 值字体大小

列表 - list
[{ ‘list’: ‘ordered’}, { ‘list’: ‘bullet’ }], 值ordered,bullet

上标/下标 - script
[{ ‘script’: ‘sub’}, { ‘script’: ‘super’ }], 值sub,super

缩进 - indent
[{ ‘indent’: ‘-1’}, { ‘indent’: ‘+1’ }], 值-1,+1等

文本方向 - direction
[{ ‘direction’: ‘rtl’ }], 值rtl

这种下拉的就需要默认值配置

vue-editor富文本编辑器,自定义toolbar修改工具栏_第3张图片


 

你可能感兴趣的:(js,vue,html,前端)