vue结合ueditor富文本编辑器(换肤分离)

需求

(PC端)做一个可以使用图片上传、视频上传、文件上传功能的富文本组件,简单的文本编辑发布功能,采用socket方式传输,

做法

当时看到这个需求,我觉得是不难的,就去github上找富文本编辑器,因为项目比较急,当时我的想法是能找开箱即用的就找开箱即用的。

这几个编辑器都试了一次,最后经过筛选

  • Vue-Quill-Editor:不支持本地视频上传
  • vue-froala-wysiwyg:我想要的功能都有包括图片和视频上传,还额外支持响应式,但是是收费的
  • ueditor:功能很全,但是样式实在是很丑,可能要自己封装
  • 剩下的编辑器基本上要么是功能不足或者是移动端的(优点是轻量)

因为没做过富文本的开发,所以当时我测试这些富文本就花了一个下午,后来仔细考虑了一下,最后使用了比较保守的方式,用了ueditor开发,顺便美化了一下。

引入ueditor

下载地址和文档

  • import '../../static/UEditor/ueditor.config'
  • import '../../static/UEditor/ueditor.all.min'
  • import '../../static/UEditor/lang/zh-cn/zh-cn'

我们要去ueditor.config.js文件里面去改一下路径配置

修改样式

引入ueditor之后,直接让工具栏隐藏起来,然后我们自己新建一个div模拟toolbars

隐藏之后的ueditor就是一个类似div加了可编辑属性的既视感

接下来我们直接一个div,然后给他一个flex布局,然后去iconfont上面下载一些图标,但是我们需要配置一下webpack使他支持批量处理svg,参考手摸手系列

现在就大变身了,样子非常好看,跟现代的编辑器没什么差别

给图标绑定点击事件

经过上面的步骤,样式基本上搞定了,剩下来就是使他们点击的时候,触发事件,让他们做出相应的动作就行,例如

    execCommand: function (name) {this.editor.execCommand(name)},

插入图片,插入视频,插入文件这种操作,我并没有使用ueditor内置的功能,视频和文件夹我做成了进度条的形式,放在了富文本编辑器的下边,图片上传成功后返回值拼接起来,根据双向绑定,在editor组件内部动态创建图片,点击这三个图标,会把事件抛出来,这样你想用什么上传组件就用哪个,你还可以用socket进行上传等等,这样子,editor组件内部只需要维护编辑器的html文本就可以,职责单一,后期也好维护

      editorData: {body: '',images: []},

本地保存功能

最后添加了一个自动保存的功能,这里可以用定时器或者当内容发生变化的时候存到localStorage里面。

    autoSaveBody () {if (this.isAutoSaved && this.editorData.body) {let storage = {}Object.assign(storage, this.editorData)const pms = JSON.stringify(storage)this.isAutoSaved = falsesetTimeout(() => {localStorage.setItem(this.storageKey, pms)this.isAutoSaved = true}, 500)}}

但是必须要考虑一个情况,当前是第一次写还是发布之后进行修改,所以外部使用的时候,你只需要操作innerValue这个属性,这个属性的值你可以通过后台来获取(后台获取的就是修改状态),然后编辑器就会呈现什么样的数据,内部的实现方式就是加了一个init函数

    init: function () {// 外部有默认值if (this.value.body) {this.editor.setContent(this.value.body)} else {// 有本地缓存const storage = localStorage.getItem(this.storageKey)if (storage) {const storageJson = JSON.parse(storage)Object.assign(this.editorData, storageJson)if (this.editorData.body) {this.editor.setContent(this.editorData.body)}} else {// 没有本地缓存Object.assign(this.editorData, this.$options.data().editorData)}}this.autoSaveInterval = setInterval(() => {this.autoSaveBody()}, 5000)},

缺点

组件太大,默认压缩也有389k,开启gzip之后有100k左右

优点

功能强大,产品需求可迭代。

补充

当然这个是我项目中抽取出来的,不是完整的代码,只是一个思路吧。第一次做富文本,要是说错了大家多多指正,或者大家有更好的思路欢迎一起讨论

代码地址


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366743.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux中samba启动不了,Linux_RHEL5中不用关闭SELinux而成功启动Samba,RHEL5中的samba服务器启动后,能 - phpStudy...

RHEL5中不用关闭SELinux而成功启动SambaRHEL5中的samba服务器启动后,能看到共享目录,但是不能访问共享目录,告知权限不够。此时可以通过如下命令:tail /var/log/message看到如此提示:/home/lyy does not exist or perm…

使用MyBatis框架时发现的一些小bug

在大配置MyBatis.xml中: 不能有空节点属性 ,否则启动服务器后点击登录没有反应。 异常问题: ause: java.sql.SQLException: Value 0000-00-00 00:00:00 can not be represented as java.sql.Timestamp: 解决办法: HTT…

JSF Tomcat配置示例

JavaServer Faces (JSF)是一个Web应用程序框架,旨在简化基于Web的用户界面的开发集成。 它用于开发和构建服务器端用户界面组件,并在Web应用程序中使用它们。 JSF技术基于Model-View-Controller (MVC)架构,并且通过在页面中使用可重用的UI组件…

野指针与内存泄漏那些事

野指针:不是NULL指针,是指向垃圾内存的指针 野指针成因: 1.指针变量没有被初始化:指针变量在创建时同时应当被初始化,要么将指针设置为NULL,要么让它指向合法的内存。 2.指针p被free或者delete,没有被设置为…

c语言入门经典案例,c语言入门经典案例及飞源代码.doc

c语言入门经典案例及飞源代码循环控制输出图案【程序1】题目:输出9*9口诀。1.程序分析:分行与列考虑,共9行9列,i控制行,j控制列。2.程序源代码:#include "stdio.h"main(){ int i,j,result; pri…

JS加密算法简单分析

这次分析百度音乐的评论请求的加密,首先先看包 看到有两个地方1. param,2. sign,基本可以断定sign是用的MD5加密的 那么我们从html页面分析入手,恰巧看到html代码中有写到这么一段 右键点击open in Source panel 熟悉的配方&…

RF新手常见问题总结--(基础篇)

RF新手常见问题总结--(基础篇) 学RF快一年了,经常碰到一些问题,有些同学也经常问到,这里总结一些,期望有人后续再补充,主要是响应群里--雪霁大神的号召,技术共享。废话少说,直接上干货了。1. 经…

Java自动拆箱陷阱。 谨防!

您认为以下代码段会显示什么? Object o true ? new Integer(1) : new Double(2.0); System.out.println(o);是! 它将打印: 1.0什么? 1.0? 但是我已经为我的o变量分配了一个Integer 。 为什么打印1.0? 事实证明&…

golang学习笔记(6)--面向接口编程

一、 duck typing duck typing意思是鸭子类型,我们把具备鸭子的行为等部分特征的一个东西叫做鸭子,这是鸭子类型的解释。其实,在go语言中是采用鸭子类型这种思想来实现接口这种编程方式的,我们把一个类只要实现了某接口的方法&…

c语言self用法,C/C++知识点之Self Numbers C语言 UVA640

本文主要向大家介绍了C/C知识点之Self Numbers C语言 UVA640,通过具体的内容向大家展示,希望对大家学习C/C知识点有所帮助。In 1949 the Indian mathematician D.R. Kaprekar discovered a class ofnumbers called self-numbers. For any positive integ…

JS 的平凡之路--学习人气眼中的效果(上)

最近看了看人气眼的界面,感觉到学习的地方有很多呀。这里先带大家看看人气值跳动的实现。本篇代码基于Vue2.x.x。 一、概要 首先看一下效果图: 要想实现上面的效果,我们分为这几个部分: 判断元素是否在可视区域内;函数…

[Swift]LeetCode86. 分隔链表 | Partition List

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/)➤GitHub地址&a…

XmlNode与XmlElement的区别总结

原文链接:http://www.cnblogs.com/oilsun/archive/2012/07/07/2580427.html 今 天在做ASP.NET操作XML文档的过程中,发现了两个类:XmlNode和XmlElement。这两个类的功能极其类似(因为我们一般都是在对 Element节点进行操作&#xf…

HOW TO:构造Java类

在这篇HowTo帖子中,我将展示如何将一个类与另一个类一起定型。 为什么这有用? 当您的项目中发生大量BCI时,让每个开发人员编写BCI代码都是不明智的。 首先,这不会抽象出所使用的BCI库。 鉴于Java不支持多重继承,构造型…

android horizontalscrollview 动画,Android HorizontalScrollView左右滑动效果

本文实例为大家分享了Android HorizontalScrollView左右滑动的具体代码,供大家参考,具体内容如下效果图一.什么是HorizontalScrollViewHorizontalScrollView实际上是一个FrameLayout ,这意味着你只能在它下面放置一个子控件 ,这个子控件可以包…

[译] Airbnb 在 React Native 上下的赌注(一):概述

原文地址:React Native at Airbnb原文作者:Gabriel Peal译文出自:掘金翻译计划本文永久链接:https://github.com/xitu/gold-miner/blob/master/TODO1/react-native-at-airbnb.md译者:ALVINYEH校对者:ChenDo…

noip退役之路--祝福

原文地址:bb机的老巢 文/鲁迅 noip前的集训毕竟最像集训,去北京不必说,就在自己学校的机房中也显出将到noip的气象来。屏幕广播里讲解的题目闪着斑白的微光,随着鼠标叩击“提交”按钮的一声钝响,是直播ac后的欢呼&…

批处理最佳做法

大多数应用程序至少具有一个批处理任务,在后台执行特定的逻辑。 编写批处理作业并不复杂,但是您需要了解一些基本规则,我将列举一些我发现最重要的规则。 从输入类型的角度来看,处理项目可以通过轮询处理项目存储库来实现&#x…

android 360度视频播放器,Android开发VR实战之播放360度全景视频

VR即Virtual Reality虚拟现实。虚拟现实技术是一种可以创建和体验虚拟世界的计算机仿真系统它利用计算机生成一种模拟环境是一种多源信息融合的交互式的三维动态视景和实体行为的系统仿真使用户沉浸到该环境中。那么,如何在Android中去开发VR功能的APP呢&#xff1f…

关于怎么在手机端实现一个拖拽的操作

手机端&#xff0c;肯定是监听touchstart,touchmove,touchend事件 先来看看效果 当拖拽时&#xff0c;拖拽到哪个节点下面&#xff0c;就把哪个节点添加到这个下面 <div>1111</div><div>2222</div><div>3333</div><div>4444</div…