Vue2-Editor_vue.js教程,AngularJS教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

Vue2-Editor是一款基于vue的非常好用，界面简洁的富文本编辑器插件。下面进行简单的使用介绍：

1.安装

`1`	`npm install --save vue2-editor`

2.在需要用得组件里面引入

1import { VueEditor } from 'vue2-editor'
2components:{
3    VueEditor
4}

3.使用

1<template>
2    <div v-loading="loading"><!--上传图片时得加载画面-->
3      <VueEditor style="width: 80%"<!--宽度-->
4        useCustomImageHandler<!--处理图像上传，而不是使用默认转换为Base64-->
5        @imageAdded="handleImageAdded"<!--上传图片函数-->
6        :editorToolbar="customToolbar"<!--自定义工具栏-->
7        v-model="content"></VueEditor>
8    </div>
9</template>

01<script>
02export default {
03    data(){
04        return{
05            content:'',
06            loading:false，
07            customToolbar：:[
08                ['bold', 'italic', 'underline'],
09                [{'align':''},{'align':'center'},{'align':'right'}],
10                [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
11                [{'background':[]},{'color':[]}],
12                ['image','link'],
13                ['strike'],
14                ['clean'],
15                ],//更多工具栏选项在下面
16            }
17    }
18    methods:{
19    handleImageAdded:function(file,Editor,cursorLocation){
20        //上传图片操作
21 
22        //把获取到的图片url 插入到鼠标所在位置 回显图片
23        Editor.insertEmbed(cursorLocation, 'image', url);
24    }
25    }
26}
27</script>

4.工具栏选项
align:{'left','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 视频

Vue2-Editor

猜你喜欢