Vue2-Editor 使用

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

 

参考文档:

    https://www.vue2editor.com/examples/#how-to-use-custom-quill-modules

    https://www.npmjs.com/package/vue2-editor

转载于:https://www.cnblogs.com/xiaoyaoxingchen/p/10767203.html

Vue2-editor是一个用于Vue.js框架的富文本编辑器插件,可以方便地在项目中集成富文本编辑功能。你可以通过npm安装vue2-editor,并在项目中引入VueEditor组件来使用它。具体的安装步骤如下: 1. 在项目中运行以下命令安装所需包:npm install vue2-editor 2. 在Vue项目中的组件中引入VueEditor组件,并将其添加到components选项中。 3. 在模板中使用<vue-editor>标签来调用富文本编辑器组件,并通过v-model绑定一个data属性,来实现双向数据绑定。你可以在vue-editor标签中设置其他属性和事件,如customModules、editorOptions、editorToolbar等,来自定义编辑器的功能和样式。1<em>2</em>3 #### 引用[.reference_title] - *1* *2* [Vue2-editor 富文本编辑器](https://blog.youkuaiyun.com/SongD1114/article/details/124120413)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}} ] [.reference_item] - *3* [vue2-editor使用简介](https://blog.youkuaiyun.com/qq_37818095/article/details/102463042)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值