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)


相关推荐

  • 傻妞机器人新版安装教程「建议收藏」

    傻妞机器人新版安装教程「建议收藏」本文由以下部分组成傻妞基础功能简介。傻妞机器人安装(只对接QQ)傻妞常规设置傻妞对接微信/公众号/TG机器人傻妞重启以及更换机器人QQ傻妞青龙扩展使用。其他一、傻妞功能简介1.傻妞青龙扩展可以发送命令控制青龙任务,添加青龙变量,提交COOKIE,查询资产,查看任务日志等等!可对接其他项目。2.配置扩展在sillyGirl/conf/config.yaml文件配置各种API,让傻妞功能丰富多彩。目前支持返回图片和文本(包括链接)。样例文件见文末。3.自定义文件功能扩展在sill

  • AutoEventWireup指令分析

    AutoEventWireup指令分析指令:指定当页和用户控件编译器处理ASP.NETWeb窗体页(.aspx)和用户控件(.ascx)文件时所使用的设置。在编译时发生作用,有些是如在asp.net2.0中将 后产生       protectedoverrideboolSupportAutoEvents{           get{               returnfalse; 

  • 平衡二叉树的数据结构_红黑树数据结构

    平衡二叉树的数据结构_红黑树数据结构红黑树Java集合系列之TreeMap详细介绍(源码解析)和使用示例代码来自算法第四版红黑树并不追求“完全平衡”——它只要求部分地达到平衡要求,降低了对旋转的要求,从而提高了性能。红黑树实际上是由2-3-4树转换而来,红黑树能够以O(log2n)的时间复杂度进行搜索、插入、删除操作。此外,由于它的设计,任何不平衡都会在三次旋转之内解决。当然,还有一些更好的,但实现起来更复杂的数据

  • [python]异步 async

    [python]异步 async#-*-encoding:utf-8-*-“””ankus@ModifyTime@Author@Version@Description————————————–2021/12/314:02xlgui21.0asynciopy3.8异步IO:就是发起一个IO操作(如:网络请求,文件读写等),这些操作一般是比较耗时的,不用等待它结束,可以继续做

  • WebIDE的安装「建议收藏」

    WebIDE的安装「建议收藏」CreatedbyJerryWang,lastmodifiedonJun02,2015https://store.sap.com/下载安装文件:通过注册时维护的mail地址获得下载link:确保JDK或者JRE至少在1.7以上:2.所有下载的安装文件置于SAPWebIDEfolder下,hierarchy如下图所示:使用如下命令行进行安装:通过修改…

    2022年10月18日
  • python批量重命名图片序号_python实现图片文件批量重命名「建议收藏」

    python批量重命名图片序号_python实现图片文件批量重命名「建议收藏」本文实例为大家分享了python实现文件批量重命名的具体代码,供大家参考,具体内容如下代码:#-*-coding:utf-8-*-importosclassImageRename():def__init__(self):self.path=’D:/xpu/paper/plate_data’defrename(self):filelist=os.listdir(self.pat…

发表回复

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

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