您现在的位置是：网站首页> 编程资料编程资料

element ui富文本编辑器的使用效果与步骤(quill-editor)_vue.js_

2023-05-24 428人已围观

简介 element ui富文本编辑器的使用效果与步骤(quill-editor)_vue.js_

效果展示：（可以上传图片及其视频）

可以拖拽图片大小及其位置

第一步、首先安装富文本编辑器插件

cnpm install vue-quill-editor --save cnpm install quill-image-drop-module --save cnpm install quill-image-resize-module --save

第二步、然后在main.js文件中,全局注册

 //引入quill-editor编辑器 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor) //实现quill-editor编辑器拖拽上传图片 import * as Quill from 'quill' import { ImageDrop } from 'quill-image-drop-module' Quill.register('modules/imageDrop', ImageDrop) //实现quill-editor编辑器调整图片尺寸 import ImageResize from 'quill-image-resize-module' Quill.register('modules/imageResize', ImageResize)

第三步、在vue界面中使用quill-editor

为了便于大家直接使用，直接把script以及css放在一个页面里，之际copy就可以使用

注意：

1、我是在elementUi使用的，上传图片以及页面的访问需要有登录权限，所以我的上传图片视频的组件里有:headers=“headers”，携带登录权限

2、需要更改自己的上传文件的路径（改成自己的）

3、import {getToken} from “@/utils/auth”;

获取登录token，引入文件，如果只是简单测试，没有上传文件是否登录的限制的话，这个token可以不用获取，文件可以不引入，把上面对应的上传文件携带请求头 :headers=“headers” 这个代码删掉即可。根据自己的情况来就行。

所引入的文件：（获取登录token）

如果上传文件有登录全选验证，可以按照自己框架的token来写，如果没有则删掉即可。

展示：

此时就quill-editor富文本编辑器就能使用了，除了基本功能之外也能够上传图片

第四步：配置video.js（要有上传视频且回显的功能需要配置）

因为quill-editor富文本编辑器当我们上传mp4等视频类型的文件时，quill-editor会自动的用iframe标签来创建，此时视频文件将不能显示出来，我们需要改写quill-editor提供能video.js文件，更改为video的标签来展示视频

------>此时视频链接已经生成，但是因为iframe标签将不能展示

当我们手动的把页面iframe标签改为video标签时视频就显示出来了，找到问题，开搞

1、创建video.js的空文件

为了方便讲解，我这里放在了页面同一目录下

video.js内容

import { Quill } from 'vue-quill-editor' // 源码中是import直接倒入，这里要用Quill.import引入 const BlockEmbed = Quill.import('blots/block/embed') // const Link = Quill.import('formats/link') const ATTRIBUTES = ['height', 'width'] class Video extends BlockEmbed { static create (value) { const node = super.create(value) // console.log("js文件"+ window.jsValue) // 添加video标签所需的属性 node.se
                
                

                

                                            
上一篇：vue关于下载文件常用的几种方式_vue.js_

                                                                
下一篇：express提供http服务功能实现示例_node.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网