vue 富文本编辑器 —— wangEditor
富文本编辑器
- wangEditor
- 百度UEditor
- bootstrap-wysiwyg
- ckeditor
- Kindeditor
- Tinymce
- vue-quill-editor
- wangeditor 使用
- 安装wangeditor
- 应用
很多项目中都需要用到富文本编辑器,目前也有很多种类的富文本编辑器。我就查了一下资料,了解了一些目前常用的富文本编辑器
wangEditor
官网:http://www.wangeditor.com/index.html
文档:https://www.kancloud.cn/wangfupeng/wangeditor3/332599
源码:https://github.com/wangeditor-team/wangEditor
一款轻量级的web富文本编辑器。国产,基于javascript和css开发的web富文本编辑器,开源免费,上传图片可以控制尺寸。重点在于它轻量,如果需要的功能不是很复杂,用它还是不错的。
优势:轻量简介,最重要的是开源且中文文档齐全。
缺点:更新不及时,没有强大的开发团队支撑。
百度UEditor
https://github.com/fex-team/ueditor
优势:插件多,基本满足各种需求,由百度web前端研发部开发。
缺点:插件提交较大,网页加载速度相对就慢了些。使用复杂,属于前后端不分离插件,在使用时需要配置后端的一些东西。
bootstrap-wysiwyg
bootstrap-wysiwyg:是bootstrap官网推荐的。
ckeditor
https://ckeditor.com/
ckeditor ckeditor:是一家老牌做富文本的公司,相当的不错,号称是插件最丰富的富文本编辑器。
Kindeditor
优势:文档齐全,为中文,阅读方便。
缺点:图片上传存在问题,不能控制图片尺寸,上传历史过多,会全部加载,导致浏览器卡顿。
Tinymce
官网:http://tinymce.ax-z.cn/
Tinymce:是国外的一款富文本编辑器,开源可商用,免费!插件丰富、可扩展性强、界面好看、提供经典、内联、沉浸无干扰三种模式、对标准支持优秀(自v5开始)、多语言支持。
vue-quill-editor
虽然说只支持IE10+,据说大企业用的比较多,不限制框架,但是需要定制,理念很先进。
vue-quill-editor 插入图片的方式是将图片转为base64再放入内容中,这样就会产生一个问题,如果图片比较大的话,富文本的内容就会很大,这样,就会有两个问题:
(1)内容存在数据库中一方面会占用大量的数据库存储空间;
(2)当图片太大的时候,富文本的内容会超过数据库的存储上限,从而会产生内容被截断从而显示不全的问题(即使是text类型,也有存储上限65535)。
当然也有解决方案:将图片上传到自己的服务器或第三方服务,然后将获得的图片url插入到文本中。
(1)将任务交给服务端,服务端截取base64图片并转化为文件,将其路径或者url替换原来的图片数据;
(2)对控件本身下手,首先将图片上传,然后插入到富文本中。
基于这几款富文本编辑器的特点,我选择了一款轻量级的 wangeditor 在项目中使用。
wangeditor 使用
安装wangeditor
npm install wangeditor
安装成功:
可以看到,当前安装的是wangeditor 4.7.7版本。
应用
<template><div><div ref="editor"> </div><el-button @click="getContent" type="success">查看内容</el-button><div v-html="editorContent" /></div>
</template><script>
import E from 'wangeditor'
export default {data () {return {editorContent: '',editor: null}},methods: {getContent: function () {// alert(this.editorContent)var json = this.editor.txt.getJSON() // 获取 JSON 格式的内容var jsonStr = JSON.stringify(json)console.log(json)console.log(jsonStr)console.log('this.editorContent', this.editorContent)}},mounted () {this.editor = new E(this.$refs.editor)this.editor.customConfig = this.editor.customConfig ? this.editor.customConfig : this.editor.configthis.editor.customConfig.onchange = (html) => {// console.log(html,'----------------',a)this.editorContent = html}// this.editor.customConfig.uploadImgShowBase64 = true // 使用base64保存图片 上下两者不可同用this.editor.customConfig.uploadImgServer = 'xxxxxxxx' // 上传图片到服务器// 隐藏“网络图片”tabthis.editor.customConfig.showLinkImg = falsethis.editor.create()}
}
</script><style scoped>
</style>
如下图:
输入文字时,浏览器打印的结果:
可以看到,内容输出的是html格式,以及内容的样式标签和属性。
vue 富文本编辑器 —— wangEditor相关推荐
- 特别好用的Vue富文本编辑器wangEditor自己使用案例组件,附源码,直接使用
前言:已组件化,引入即可使用,包含本地图片上传可拖拽大小.效果图如下:附源码 1.首先老规矩,引入下面两个包 npm i @wangeditor/editor --save npm i @wanged ...
- 特别好用的前端html富文本编辑器wangEditor个人使用案例
当前为jQuery版本demo,详细Vue组件版本请点此链接:特别好用的Vue富文本编辑器wangEditor自己使用案例组件,附源码,直接使用_膨胀的菜盒的博客-CSDN博客 因公司项目后台管理平台 ...
- django快速集成富文本编辑器wangeditor
django快速集成富文本编辑器wangeditor django是python栈一款优秀的web开发框架,也是python栈web开发框架中使用占比最高的开发框架,至于其是否足够优秀不言自明,自带的 ...
- HTML——实现富文本编辑器wangEditor的使用
HTML--实现富文本编辑器wangEditor的使用 文章目录 HTML--实现富文本编辑器wangEditor的使用 一.导入wangEditor.JS 二.直接引用文档链接 三.包管理工具(no ...
- css wangeditor 修改_HTML富文本编辑器wangEditor的使用
var E = window.wangEditor; var editor = new E('#editor') //配置信息 var config = editor.customConfig; // ...
- Vue 富文本编辑器插件 vue-quill-editor 坑!
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
- 富文本编辑器 wangeditor 的使用
富文本编辑器 wangeditor 的使用 为什么选择使用 wangeditor a. 轻量.简洁.界面美观.文档齐全.易用.开源免费.开源团队维护.有专业Q群答疑.持续更新.无需使用其他库.插件功能 ...
- 富文本编辑器wangEditor的使用(即学即用)
介绍 wangEditor 是一款基于JavaScript和CSS开发的Web富文本编辑器,其具有轻量级.简洁.易用的特点.当然,市面上有许多别的富文本编辑器,各有特点,本文专注于介绍wangEdit ...
- 富文本_轻量级 web 富文本编辑器 —— wangEditor
介绍 wangEditor -- 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.kancloud.cn/wan ...
- vue富文本编辑器 Vue-Quill-Editor
主流富文本编辑器对比 前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想.所以果断使用vue-quill-editor来实现. wangEditor( ...
最新文章
- 直接在PDF文件中改变字体的小技巧
- Redhat 5.4 安装Vbox 增强工具失败解决方法。
- python使用循环结构计算10_十二、 python中的循环结构
- javascript 参数检验(二):参数检查工具的完善
- PyTorch终于能用上谷歌云TPU,推理性能提升4倍,我们该如何薅羊毛?
- 栈(后缀表达式的理想数据结构)
- html中半圆怎么写,html 中画半圆的方法
- cpld的入门交流之三:JED to ABL 反编译方法
- BIGEMAP APP离线卫星地图数据应用
- java xml字符串转换成对象_将XML字符串转换为对象
- php解析微信emoji字符
- Eclipse启动Tomcat 警告: 基于APR的本地库加载失败.错误报告为
- 人工智能导论学习笔记
- 计算机断电会自动重启吗,电脑开机断电或自动重启的分析及解决方法
- 车来了:精准实时公交
- Get UWP Version(不使用额外的nuget包或SDK)
- Joining data
- Glyphs 3 for mac(字体设计软件)
- (二)提升树模型:Xgboost原理与实践
- CAD图纸版本太高怎么解决?CAD版本转换方法