vue html编辑器_基于vue的低代码编辑器

vue html编辑器_基于vue的低代码编辑器最近需要用到富文本编辑器插件,项目是用VUE框架搭建的所以这里就专门介绍几款有关vue的富文本插件:项目中趟过了很多坑,特记下供大家借鉴,希望大家不要重滔我的复撤本文章只介绍插件具体使用方式可自行百度由于编辑器编辑的内容需要在小程序能完美显示,并且能和小程序富文本编辑器完全打通1.百度的ueditor(网上都这么说)(没有缘分,果断放弃)优势:开源,插件多,基本满足各种需求,由百度we…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

最近需要用到富文本编辑器插件,项目是用VUE框架搭建的 所以这里就专门介绍几款有关vue的富文本插件:

项目中趟过了很多坑,特记下供大家借鉴,希望大家不要重滔我的复撤 本文章只介绍插件 具体使用方式可自行百度

由于编辑器编辑的内容需要在小程序 能完美显示,并且能和小程序富文本编辑器完全打通

1.百度的ueditor (网上都这么说)(没有缘分,果断放弃)

优势:开源,插件多,基本满足各种需求, 由百度web前端研发部开发。

不足:比较庞大,对于网页的加载来说,会相对影响速度 ,界面不太美观。

官方的wiki文档并不是很完善,图片只能上传到本地服务器,如果需要上传到其他服务器需要改动源码,较为难办,加载速度慢。

16e28b392b2f

功能强大  UI经典

2.bootstrap-wysiwyg  (网上都这么说)(不能满足需求,果断放弃)

优点:外观简洁大方,使用方便,支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性

没有强制规定的样式。

缺点:没有表情包 , 没有开发文档不便于阅读使用,无字体变色,无视频上传功能

以上两个插件我没使用,可能是真的因为缘分不够吧 如果你喜欢尽管拿去用

下面介绍一下我的漫漫入坑路 从Vue-Quill-Editor 说起吧

第一个编辑器

这个编辑器还是可以的 页面简单大气 上手快,文档配置简单,在管理后台中使用完全no problem,

16e28b392b2f

上手快 可以

16e28b392b2f

给span添加了class

当我把上传图片 还有数据绑定都做好 觉得工作怎么会如此简单的时候 改了一下字体 发现编辑器会给span 标签添加类名,然而你必须要引入类名样式才能显示对应样式,这不是开玩笑吗 为什么要这么设计啊,是不是应该写到span 的行内样式里,一般管理后台用的话 前台还要引一下css文件 这不符合常理啊作者.

最后小程序的富文本编辑器里不支持外部样式.

16e28b392b2f

.ql-size-huge{    font-size: 56rpx !important;  }  不生效

唉心塞…  所以还是换编辑器吧 对吧 又不是就这一个 所以信心满满

换编辑器 必须换

Vue-html-Editor

vue-quil-editor vue-html-editor 何等的相似, 一样的优势 一样的配置 页面简单大气上档次

16e28b392b2f

多么优美的编辑器

16e28b392b2f

为何要有font 标签

但是 问题又来了 微信小程序 富文本编辑器根本不支持font 标签漂亮!!!

换编辑器 必须换

所以就有了接下来的Wangeditor

这是一个文档齐全 上手特别容易,有可视化编辑器demo 预览的地表最强编辑器,我觉得这一点特别好 最起码能让我们开发者在用之前知道你这个开源插件UI 是什么样的,能不能满足用户的需求 不是说把代码跑起来我才能知道你这个编辑器长什么样,浪费了开发者的时间和精力 到最后还不能用.

16e28b392b2f

真香

那就开始码代码吧 因为有了之前的经验 先看了一下结果获取到的html  结果 凉凉夜色为我思念成河 化作春泥呵护了我。。。

一样的font 标签 一样的font-size 属性 ,实在不想再换编辑器了 没办法 源码改不动  replice 替换吧  需要把所有的font 标签替换成span 还得把font的font-size 属性 和color 属性 改为行内,心塞,讲道理 这不符合常理啊,

换编辑器 必须换

kindeditor

16e28b392b2f

主要特点

快速:体积小,加载速度快

开源:开放源代码,高水平,高品质

底层:内置自定义 DOM 类库,精确操作 DOM

扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能

风格:修改编辑器风格非常容易,只需修改一个 CSS 文件

兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera

这是官方解释, 说的我都信了 那就用用吧

果然满足我了我所有的需求 完美的能和小程序对接起来  不管是从前端显示 还是在小程序 富文本编辑器里显示都能兼容, 就是ui 长的有点丑,没办法,谁让功能强大呢,丑点就丑点吧 ,没想到坑在后面,就是编辑器没有暴露自定义上传参数,比如上传图片到服务器的时候需要从Header 传个token,怎么办,凉拌,也不知道网上哪位大佬改了一下他的源码重写了图片上传,

好人啊

所以多图上传呢,还得改代码  唉心塞…

先冷静一下,最后还是在这几个编辑器里择优选择了Wangeditor 在他的基础上来满足我的需求

找了很多资料最后一行代码解决问题

styleWithCSS  = true

可以把font 替换成span

最后再推荐一下Wangeditor 虽然官方还在维护,还有很多问题,但是我还是比较看好他的,能够满足自己需求的编辑器就是好的编辑器

兜兜转转还在又回到Wangeditor 如果你是大佬可能不会走这么多弯路,直接在源码上拓展就能实现你的功能,还是能力不够吧,希望有时间能够自己手写一个富文本编辑器

如果你只是需要一个编辑器 其实任意一款都可以,如果你想和微信小程序兼容起来,Wangeditor首选

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/182012.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • MySQL数据类型

    MySQL数据类型

  • HDU1285 确定比赛名次

    HDU1285 确定比赛名次

  • 粒子群优化算法matlab程序_多目标优化算法

    粒子群优化算法matlab程序_多目标优化算法1.粒子群优化算法概述2.粒子群优化算法求解     2.1连续解空间问题     2.2构成要素     2.3算法过程描述     2.4粒子速度更新公式     2.5速度更新参数分析3.粒子群优化算法小结4.MATLAB

    2022年10月11日
  • currentstyle 织梦_织梦DEDE栏目高亮channel属性currentstyle采用详解[通俗易懂]

    currentstyle 织梦_织梦DEDE栏目高亮channel属性currentstyle采用详解[通俗易懂]织梦DEDECMScms被点击的栏目高亮显示办法详解,织梦DEDE栏目高亮channel属性currentstyle采用详解,废话不多说直接举例说明:织梦DEDEchannel属性currentstyle的例子:{dede:channeltype=’self’currentstyle=”~typename~”}[field:typename/]{/dede:channel}看例子样式,通过对当…

  • AOSP开源协议_open sap

    AOSP开源协议_open sapOLAP(OnlineAnalyticalProcessing)是指在线联机分析,基于数据查询计算并实时获得返回结果。日常业务中的报表、数据查询、多维分析等一切需要即时返回结果的数据查询任务都属于OLAP的范畴。对应的,行业内也有相应产品来满足这类需求,那就是OLAPServer。当前主流OLAPServer几乎都是基于RDB或封装成RDB的大数据平台,有点类似早期的ROLAP(这个词已经很少被提及了),其中一个关键的特征是使用SQL作为查询语言。RDB和SQL的特性会给OLAPServer带来诸

    2022年10月23日
  • 基于Multisim的函数信号发生器–方波、三角波、正弦波[通俗易懂]

    设计要求-基本要求设计制作一个方波-三角波-正弦波信号发生器,供电电源为±12V。(1)输出频率能在1-10KHZ范围内连续可调;(2)方波输出电压Uopp=12V(误差<20%),上升、下降沿小于10us;(3)三角波信号输出电压Uopp=8V(误差<20%);(4)正弦波信号输出电压Uopp≥1V,无明显失真。-提高要求(1)将输出方波改为占空比可调的矩形波,占空比可调范围30%–70%;(2)三种波形的输出峰峰值Uopp均在1~10V范围内连续可调。设计思路-电

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号