Vue项目玩转Ueditor(百度富文本编辑器),解决图片需要上传服务器的问题,将图片转存base64字符串。
文章目录1. 场景描述2. 问题描述3.较为流行的几个富文本编辑器比较3.1、wangEditor3.2、百度的ueditor3.3、KindEditor3.4、bootstrap-wysiwyg3.5、QuillEditor4.Ueditor的集成1. 场景描述最近在做一个网站,里面有发布文章的功能。需要使用到富文本编辑器来发布文章。实现思路:富文本编辑排版=》转存html=》服务器存储为txt
文章目录
1. 场景描述
最近在做一个网站,里面有发布文章的功能。需要使用到富文本编辑器来发布文章。
实现思路:
富文本编辑排版=》转存html=》服务器存储为txt文件=》数据库存储访问地址=》
前端访问后台服务拿到访问地址=》请求url拿到文章内容=》渲染到页面。
缺点:前端访问一次文章需要发送两次请求,增加了服务器的访问量。
优点:数据存储在服务器,数据库所占空间变小,访问速率得到改善。
总结:优点略大于缺点
本文内容:仅针对于ueditor部分内容进行介绍。实在是因为网上的博文介绍的都是云里雾里的,不太适合新手。
2. 问题描述
1.采用哪个富文本编辑器?
要求功能丰富,操作简单,类似word。
2.单纯的文本排版的话基本所有的富文本编辑器都合适,但是需要图片在编辑器内能拖拽,缩放等,要求能插入代码,且代码高亮。要求能插入附件,插入链接等。这就降低了可选择的纬度。最终的问题:图片如何存?
要求存储的图片在更换服务器,更换域名时不能出现图片丢失。
即插入的图片地址需要实现更换功能或者时转存为base64方式进行存储。
根据使用场景,我们的文章内容不是存储在数据库,所以base64存储虽然可以加大文章存储的体积量,但是并不会造成数据库卡顿等性能问题。于是就采用base64存储的方案。
3.较为流行的几个富文本编辑器比较
声明:此部分内容大多来源于网络。
3.1、wangEditor
优势:开源,轻量简洁,最重要的是开源且中文文档齐全,设计的UI漂亮。
wangEditor基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费。
与国产编辑器 百度ueditor 和 kindeditor 相比,它轻量、易用、UI设计精致漂亮。
国外编辑器 bootstrap-wysiwyg 和 simditor 相比,它文档易读、交流方便,更接地气。
它还会根据使用者的反馈不断完善,未来将支持移动版。 支持IE6+浏览器。
不足:没有强大的后台
上述是网上的描述。
小编也集成过WangEditor,不得不说,这款编辑器是真的香。作为开发者而言,我是真的很喜欢这款编辑器。但是甲方觉得这个编辑器功能太简单了。所以就没能排上用场。
下面是小编对wangEditor的一些看法。
1.集成简单,三行代码即可集成到你的开发环境之中。
import E from 'wangeditor'
const editor = new E('#div1') //指定一个容器id为div1
editor.create()
2.图片可以设置为base64存储,真的很适合项目使用场景
editor.config.uploadImgShowBase64 = true
这款编辑器的图片默认为base64存储,倒是挺好使的。但是不能对图片进行拖拽和缩放,这个就很难受。
3.Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费
使用typescript开发的,这个就比较舒服。而且,这款编辑器现在还在更新,你也可以联系得到开发者,与开发者进行交流。
4.可以自定义皮肤
这个功能是真的蛮贴心的,但是对于新手来说,就有点不太适合。
从编辑器中获取的 html 代码是不包含任何样式的纯 html如果显示的时候需要对其中的 table code bloc kquote 等标签进行自定义样式(这样既可实现多皮肤功能),下面提供了编辑器中使用的样式供参考。这个是官网的原话。我在测试的时候就出现表格保存后没有边框之类的样式。我建议应该默认一套样式,用户想要实现多皮肤功能的话样式覆盖就好了。
丰富的api支持
wangEditorApi
有人维护的就是不一样,这api真的是爱了,真的挺齐全的。对于开发者来说太友好了。
截图展示
真的是看起来很简洁,很清新的了。小编最喜欢这个。
3.2、百度的ueditor
网评:
优势:开源,插件多,基本满足各种需求, 由百度web前端研发部开发。
不足:比较庞大,对于网页的加载来说,会相对影响速度 ,界面不太美观。
官方的wiki文档并不是很完善,图片只能上传到本地服务器,如果需要上传到其他服务器需要改动源码,较为难办,加载速度慢。
小编的看法:
1.功能齐全,庞大,有点冗余了。
2.不够开放,或者未完善得很好,对于开发者来说不太友好。
比如新增弹窗功能,按钮有了,弹窗也有了,但是弹窗内容是白板,不是自己的弹窗内容。就很烦躁。
3.源码还是挺简单的。如果新增弹窗出现问题时,可以考虑把不需要的功能给替换掉。
这个界面还是很像word的,特别受各种甲方的喜欢。虽然官方不再更新版本了,但是其现有的功能还能够再战几年。代码底层也是随便你改,只要你改的动。
Ueditor还是比较受欢迎的,可惜的是上传图片到服务器之类的需要配置在本地搭建php环境,这个我就笑了呀。于是我就得对上传图片这个功能动刀子了。诶,瞧我这暴脾气。
优点:
1.图片有拖拽,缩放功能。这个满足需求。
2.功能很丰富,甲方强行加分。
3.小编可以把上传图片到服务器改为base64字符串存储
3.3、KindEditor
网评:
优势: 文档齐全 ,中文文档便于阅读理解, 界面类似百度,使用还算方便。
不足:存在图片上传问题,如果上传历史过多,会全部加载,导致浏览器卡,反应慢
兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。
KindEditor使用JavaScript编写,可以无缝的与Java、.NET、PHP、ASP等程序接合。
小编的看法:
要想了解他,肯定得先去使用呀。当然这个也是被我拿来做demo研究的对象。
1.集成简单,和wangEditor一样,集成这个编辑器不难。
2.功能也是很强大,和百度的Ueditor类似。
3.上传图片到服务器真的是很难解决啊(和Ueditor一样的难)。
总结:
功能和ueditor类似,但是可以用Ueditor取代。所以就没有采用这个。
3.4、bootstrap-wysiwyg
网评:
优点:外观简洁大方,使用方便,支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性
没有强制规定的样式。
缺点:没有表情包 , 没有开发文档不便于阅读使用,无字体变色,无视频上传功能
http://www.bootcss.com/p/bootstrap-wysiwyg/
小编没有去研究这个玩意,不多做评论
3.5、QuillEditor
Quill是一个很流行的富文本编辑器,github上star大约21k
这个小编亲自研究过,所以谈谈看法
1.依旧是集成简单,真的挺简单的。而且有Vue版本可以提供下载。
2.配置简单,使用ES6的语法进行配置。在vue项目里面使用的话真的挺合适的。
3.图片的拖拽,上传,缩放等功能需要额外的扩展。官方提供了扩展支持。但是扩展的时候容易踩坑。我扩展图片的支持功能时花了一下午。诶,真是太菜了。
4.表格功能也需要扩展。而且竟然没有把表格做到工具栏里面,需要自己另外添加按钮去扩展。真的有点介意这个
可以说也是很简洁了,就是拓展那些功能有点烦。
唯一比较喜欢的地方,图片是默认用base64方式存储。功能还不够强大,但是还是比较可以的了。
6、CKEditor
网评:
国外开源,功能强大,使用较多,可以看他们官网的例子,马上就有感觉。
优点:编辑能力极强,基本和word差不多了。看起来界面极其优秀的一款。
缺点:网站访问速度一般,文档英文,需要花时间开发,没有字体变色和视频上传功能,需要另外配置
http://ckeditor.com/
这个小编也写过demo。具体来说是不太喜欢。如果有想尝试的,可以去看这篇博文
ckeditor使用教程
这里面讲得还挺详细,就是坑也有点多。
4.Ueditor的集成
言归正传,之所以选择Ueditor,是因为其庞大的功能支持。算是比较靠谱的一款富文本编辑器了。如果是我自己的项目,我会考虑采用wangEditor。
官网地址
大致分为以下步骤(传统的模式)
1.去官网下载源码
2.源码编译
3.集成
然后新手就会发现,除了下载源码之外,另外两步都无法解决。
所以,小编换了一种方式来为大家提供编译后的源码。
链接:ueditor emo下载
提取码:p0oo
进入百度网盘,下载ueditor的demo。
接下后找到里面的static文件夹。
这里面存放的已经是一个可用的ueditor插件了。
我们复制这个目录内的ueditor文件夹,粘贴到自己的项目目录的static目录下。没有的可以自己创建一个。
如上图,我复制过去之后重命名为ue。里面的文件如下图所示。
创建Ueditor.vue,封装富文本编辑器组件
<template>
<div>
<script id="editor" type="text/plain"></script>
</div>
</template>
<script>
import '../../static/ue/ueditor.config.js'
import '../../static/ue/ueditor.parse.min.js'
import '../../static/ue/ueditor.all.js'
import '../../static/ue/lang/zh-cn/zh-cn.js'
export default {
name: "ue",
data() {
return {
editor: null
};
},
props: {
value: "", //动态传值
config: {} //动态传入配置
},
mounted() {
const _this = this;
_this.editor = window.UE.getEditor("editor", _this.config);
// 初始化UE
_this.editor.addListener("ready", function() {
_this.editor.setContent(_this.value);
// 确保UE加载完成后,放入内容。
});
},
methods: {
getUEContent() {
// 获取内容方法
return this.editor.getContent();
}
},
destroyed() {
this.editor.destroy();
}
};
</script>
在组件中引入ueditor相关的js文件。然后就是初始化插件。
在需要的页面中引入
import Ueditor from './UEditor.vue'; //引入组件
components: {
Ueditor //注册组件
}
<!-- 使用组件-->
<Ueditor class="ueditor" :value="ueditor.value" id="editor" :config="ueditor.config" ref="ue"></Ueditor>
data(){
return{
ueditor: {
value: '编辑默认文字',
config: {}
},
}
}
完整的页面引用代码
<template>
<div class="hello">
<Ueditor class="ueditor" :value="ueditor.value" id="editor" :config="ueditor.config" ref="ue"></Ueditor>
</div>
</template>
<script>
import Ueditor from './UEditor.vue'; //引入组件
export default {
name: 'HelloWorld',
components:{
Ueditor
}
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
如果出现如下错误:
并且页面像下面这种情况的话
第一个是错误后台配置错误,先不用管。
第二个是ueditor的部分js和css被重定向了。或者是找不着了。这就很气人了呀。
首先,排查自己的开发环境。build.js。或者config/index.js中的publicPath和assetPublicPath是否正确。要确保上图所示的几个请求能访问到而不是被重定向,解决了这个问题,ueditor就出来了。
注意,网上有的人说把webpack.dev.config.js中的下面几行代码注释掉。这里小编提醒大家,千万千万不要注释,注释了你会发现无论怎么改,都一个样。
const CopyWebpackPlugin = require('copy-webpack-plugin')
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
这个是集成进来的效果。
5.插入base64图片
这里我们要做的是插入base64而不是修改之前的上传图片部分的代码。本来最佳方案是新增一个按钮,点击按钮出现弹窗,在弹窗的页面将插入的图片拼接到editor。但是小编最后失败了,就很气。得找机会再试试。
下图是小编尝试后的效果图。
诶 一把辛酸泪。希望有大佬看的这个文章能帮忙指点一下咯。
接着我们的替代方案。找一个有弹窗的没用的功能来修改源码。妈耶,真刺激(实属无奈之举)。
由于项目需求,文章内不需要用到插入iframe这个功能,且插入iframe是一个弹窗呀。功能比较少,适合动刀子。我尝试过修改插入图片部分的弹窗,代码量多了不好改。这里我就贴修改好的代码啦。文件路径在
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="../internal.js"></script>
<script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>
<style type="text/css">
.warp {
width: 320px;
height: 153px;
margin-left: 5px;
padding: 20px 0 0 15px;
position: relative;
}
#url {
width: 290px;
margin-bottom: 2px;
margin-left: -6px;
margin-left: -2px\9;
*margin-left: 0;
_margin-left: 0;
}
.format span {
display: inline-block;
width: 58px;
text-align: center;
zoom: 1;
}
table td {
padding: 5px 0;
}
#align {
width: 65px;
height: 23px;
line-height: 22px;
}
</style>
</head>
<body>
<div class="warp">
<table width="300" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" class="format">
<label>选择本地图片</label>
<input id="selfuploadimg" style="width:200px" id="url" type="file" accept="image/jpeg" value="" />
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var base64str;
insertBase64Img();
function insertBase64Img() {
$("input[type='file']").change(function() {
var file = this.files[0];
if (window.FileReader) {
var reader = new FileReader();
reader.readAsDataURL(file);
//监听文件读取结束后事件
reader.onloadend = function(e) {
// console.log(e.target.result + "路径")
base64str=e.target.result;
};
}
});
}
function insertBase64ImgToEditor(){
var img ='<img src="'+base64str+'" width="200"/>'
editor.execCommand('insertselfimg',img);
}
dialog.onok = insertBase64ImgToEditor;
</script>
</body>
</html>
当然除了修改这一个弹窗之外,我们还得修改其他地方。因为这一句
editor.execCommand('insertselfimg',img);
我们只是提交了一个插入自定义图片的指令。我们还需要去执行这个指令,把图片插入编辑器。
我们需要在ueditor.all.js中插入代码。大概插入在11630行
UE.commands['insertselfimg'] = {
execCommand: function(cmd, opt) {
console.log(opt,'self')
var me = this;
me.execCommand('insertHtml', opt);
}
}
和
UE.commands['insertimage'] = {...}
平级。
我想这一步不会没人看不懂吧。由于是修改插入iframe的弹窗,其按钮之类的都已被定义过。所以只需要修改这两个地方就好了。
实现效果:点击插入iframe按钮,弹出上传图片的弹窗。
选择图片加入到了编辑器中,亲测图片拖拽,缩放等功能正常。
当然不可能就这么轻易结束,ueditor是默认不支持base64字符显示图片的。所以我们还需要接着修改源码。
在ueditor.all.js中大概10000行左右,删除掉这个case,即图中所示部分。
这时重新运行程序,上传本地图片到编辑器后就可以显示出来了。
切换至html部分就可以看到,图片的src不是一个url链接,而是base64字符串。
这样就达成我们想要的效果了。
转成base64字符串存储的有点:
1.更换服务器和域名对文章中的图片不会有影响
2.不容易出现图片丢失,文章在,图片就在。
3.更换服务器简单。
更多推荐
所有评论(0)