首先引入

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

import { VueEditor } from "vue2-editor";

注册组件

components: {   VueEditor },

传值与方法

<vue-editor :customModules="customModulesForEditor" :editorOptions="editorSettings" v-model="content" :editorToolbar="customToolbar" id="container" @imageAdded="handleImageAdded"> </vue-editor>

配置信息

customToolbar:[['bold', 'italic', 'underline'],[{'background':[]},{'color':[]}],  ['image','link'],['strike']],

工具栏选项 
/* 
* align:{”,’center’,’right’} 文本对齐方式 
* background 背景色 
* blockquote 引用 
* bold 加粗 
* clean 清楚格式 
* code 代码 
* code-block 代码块 
* color 字体颜色 
* direction:{”,’rtl’} 方向 
* float:{‘center’,’full’,’left’,’right’} 浮动 
* formula 公式 
* header 标题 
* italic 斜体 
* image 图片 
* indent 缩进 
* link 链接 
* list :{‘ordered’,’bullet’,’check’} 列表 有序 多选列别 
* script :{‘sub’,’super’} 脚本 
* strike 作废 
* underline 下划线 
* video 视频 
* */

参考地址https://www.vue2editor.com

 

 

 

Logo

前往低代码交流专区

更多推荐