Vue2-Editor 使用

最新推荐文章于 2025-06-24 09:15:55 发布

转载最新推荐文章于 2025-06-24 09:15:55 发布 · 487 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoyaoxingchen/p/10767203.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何在Vue项目中使用Vue-Editor组件，包括安装、配置、自定义工具栏及处理图像上传等功能，并提供了兼容性解决方案。

Vue-Editor底层采取的是quill.js，而quill.js采用的是html5的新属性classList，所以版本低于ie10会报错“无法获取未定义或 null 引用的属性‘confirm’”,而作者写该组件时似乎把ie10也舍弃了,直接支持ie11+，因此需要兼容ie9,ie10的建议更换编辑器。

1.安装

npm install --save vue2-editor

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

import { VueEditor } from 'vue2-editor'
components:{
    VueEditor
}

3.使用

<template>
    <div v-loading="loading"><!--上传图片时得加载画面-->
      <VueEditor style="width: 80%"<!--宽度-->
        useCustomImageHandler<!--处理图像上传，而不是使用默认转换为Base64 默认图片为base64路径 加上此属性后显示为正常路径-->
        @imageAdded="handleImageAdded"<!--上传图片函数-->
        :editorToolbar="customToolbar"<!--自定义工具栏-->
        v-model="content"></VueEditor>
    </div>
</template>
<script>
    export default {
        data(){ 
            return{
                content:'',
                loading:false，
                customToolbar：:[
                    ['bold', 'italic', 'underline'],
                    [{'align':''},{'align':'center'},{'align':'right'}],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
                    [{'background':[]},{'color':[]}],
                    ['image','link'],
                    ['strike'],
                    ['clean'],
                    ],//更多工具栏选项在下面
                }
        }
        methods:{
        handleImageAdded:function(file,Editor,cursorLocation){
            //上传图片操作

            //把获取到的图片url 插入到鼠标所在位置 回显图片
            Editor.insertEmbed(cursorLocation, 'image', url);
        }
        }
    }
</script>

4.工具栏选项

* 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 视频