vue2-editor富文本,图片上传url、工具栏详解

1.引入
npm install vue2-editor --save // 安装

import { VueEditor } from “vue2-editor”;

components: { VueEditor }, //注册组件

<vue-editor  v-model="content"></vue-editor>

2.覆盖上传方法
多加中间这两行配置

<vue-editor  
useCustomImageHandler
@image-added="handleImageAdded"
v-model="content"></vue-editor>
handleImageAdded(file, Editor, cursorLocation, resetUploader) {
    //formDta是个对象,用来模拟表单的
            let formData = new FormData()
            formData.append('file', file)
    //axios这块别一股脑复制,看你们自己是怎么封装的
            axios({
                url:`xxxxx`,
                method: 'POST',
                data: formData
            })
                .then(res => {
	//这两行是关键代码了。在鼠标位置插入图片,数据存的是url
				Editor.insertEmbed(cursorLocation, 'image', res.data.url)
				resetUploader()
                })
                .catch(err => {
                    console.log(err)
                })
        },

就这么简单,网上太多奇奇怪怪的富文本插件,搞得头疼。又要各种文件下载搞不懂,真实引用不会用到这么多的
在这里插入图片描述
3.工具栏配置
有一说一,不该一股脑全展示,用不上最好别展示出来
多加中间这一行配置

<vue-editor  
useCustomImageHandler
@image-added="handleImageAdded"
:editorToolbar="customToolbar"
v-model="content"></vue-editor>

就这么多,别问为什么搞那么多数组,人家封装时候就这么个格式。
对应图片也是上面那个(工具栏允许重复)

customToolbar:[
                [{'header':[false,1,2,3,4,5,6] }], //标题
                ['bold', 'italic', 'underline'],  //加粗\斜体\下划线
                ['italic'],  //斜体----也可以拆开来写,用于换位置顺序
                [{'align':''},{'align':'center'},{'align':'right'}], //对齐
                [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }], //有序无序列表
                [{'background':[]},{'color':[]}], //背景色
                ['image','link'],  //图片、链接
                ['strike'],   //作废(文字中间一横)
                ['underline'],
                ['clean'],   //清楚格式(所谓去掉背景色这些花里胡巧)
                ['code'],  //代码
                ['code-block'], //代码块
                ['video'] //视频
            ],

奉劝那些没全搞懂就复制别人的到自己博客,搞一堆别人浪费生命的文章出来。

敬畏技术、保持学习
|

|

|

4.补充

需求: 给工具栏加文字
(红框是你定义配置项时候决定的,三个一组还是一个一组)
在这里插入图片描述
遗憾的是不知道为什么无法在前面添加,before after都是在后面。
nth-child(1)是css选择器内容了
在这里插入图片描述
nth-child(2)就是第二个红框

/deep/ .ql-formats:nth-child(1):before{
    content:'标题';
    margin-right:10px
 } 
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
Vue Quill Editor是一个Vue富文本编辑器插件,它可以用于在Vue项目中进行富文本编辑。您可以通过安装Vue-Quill-Editor和Quill来使用它。 关于图片预览的问题,根据提供的引用内容,我没有找到直接关于富文本图片预览的说明。但是,根据Vue Quill Editor的使用方法,您可以使用自定义的toolbar来实现相关功能。您可以在toolbar中添加一个按钮,当用户点击该按钮时,触发一个方法来预览富文本中的图片。您可以使用Vue的v-if指令根据条件来显示或隐藏图片预览的组件。具体实现的代码如下所示: ``` <template> <div class="editor"> ... <!-- 自定义toolbar中增加图片预览按钮 --> <div id="my-toolbar"> ... <button @click="previewImages">预览图片</button> </div> ... </div> </template> <script setup> import { QuillEditor, Quill } from '@vueup/vue-quill' import { getCurrentInstance, ref } from "vue"; const { proxy } = getCurrentInstance(); const previewImages = () => { // 实现预览图片的逻辑 // 可以使用Quill的API获取富文本中的图片,然后展示在预览组件中 } </script> ``` 在上述代码中,您可以在`previewImages`方法中实现预览图片的逻辑。您可以使用Quill的API获取富文本中的图片,并将其显示在预览组件中。 需要注意的是,具体的图片预览逻辑和组件实现取决于您的具体需求和项目实现。您可以根据自己的情况进行适当的调整和扩展。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue-Quill-Editor富文本编辑器的使用教程](https://download.csdn.net/download/weixin_38701952/13980065)[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 style="max-width: 50%"] - *2* *3* [使用vue-quill展示富文本内容](https://blog.csdn.net/qq_36576430/article/details/127793120)[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 style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值