「可视化搭建系统」——从设计到架构,探索前端的领域和意义 这篇文章主要分析了现阶段可视化搭建的几种表现形式和实现原理,并重点介绍了基于富文本的可视化搭建思路,让人耳目一新。
做过Web开发的朋友相信都使用过富文本编辑器,比较出名的CuteEditor和CKEditor很多人应该已经使用过,在功能强大的同时需要加载的东西也变得很多。下面要推荐的两款富文本编辑器都是使用JS编写,使用简单,非常轻量级。
博主:文本溢出倒是做过不少,这富文本溢出什么鬼?老夫今天就好好研究一下这个省略号。
在前文中我们介绍了富文本的基础概念,以及富文本的基本发展历程,那么在本文中将会介绍当前主流开源的富文本编辑器引擎。当前使用最广泛的富文本编辑器是L1的富文本编辑器,其能满足绝大部份使用场景,由此也诞生了非常多优秀的开源富文本引擎,这其中有仅提供引擎的编辑器例如Slate.js,也有提供了部分开箱即用的功能的例如Quill.js,也有基于这些引擎二次开发的例如Plate.js,本文主要介绍了Slate.js、Quill.js、Draft.js三款编辑器引擎。
依赖浏览器特性,主要是使用到了 designMode、ContentEditable、webkit-user-modify、execCommand 等特性。早期的编辑器都采用这种方案,但可定制的空间有限。例如早期的技术产品 WYSIWYG Editor。
什么是富文本框?富文本框就是在网页上可以输入带格式的文本输入框。在富文本框中,可以设置使用不同的字体、颜色,可以控制段落、边距,还可以插入图片、表情等。是实现在线编辑不可或缺的工具。在html表单控件里,并没有标准的富文本框控件,一般使用特定元素和css,js配合实现。
阿里巴巴集团前端委员会主席 @圆心 对前端未来期许有四点:搭建服务, Serverless,智能化,IDE。仔细想想,一个「可视化搭建系统」的想象空间,正能完美命中这些方面。前端的边界在哪里,对于业务的价值又在哪里,我们不妨静下来,一起从「可视化搭建系统」的角度来思考。
大家好,我是鱼皮,昨天 的小伙伴问我:现在想做个写作网站,有没有好用的前端富文本编辑器组件?
继「知晓云 SDK」小程序插件发布后,知晓云又发布了 wxParser 的小程序插件版本 wxParser-plugin,经过对 wxParser 进行一层封装,解决了 wxParser 使用起来太过麻烦的问题。 使用 wxParser 并配合富文本编辑器,可以很方便地开发内容展示类小程序,使用知晓云富文本编辑器效果更佳,还可以将小程序中需要可配置的内容保存到知晓云内容库。例如「知晓课堂」小程序中的微信小程序开发课程便是使用 wxParser 配合知晓云内容库完成的。 wxParser 功能介绍 目前 wx
KindEditor是一款还不错的开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。之所以推荐这一款编辑器,是因为它非常的轻量化,也不需要安装,从而耦合度非常低,无论是使用表单提交内容还是异步提交,都非常方便,这里简单介绍一下如何在Django2.0.4中使用这款富文本编辑器。
微软开发的跨平台文档格式,大多数的文字处理软件都能读取和保存RTF文档,其实就是可以添加样式的文档,和HTML有很多相似的地方
富文本编辑器作为直接与用户交互的内容输入生产工具,对大家的项目来说非常重要。选不好,配置不好,直接影响产品质感和用户体验,所以说在选择编辑器方面花点时间是值得的。
在使用了众多富文本编辑器后,终于有一些总结经验了. 这两天换了不下5个富文本编辑器,最后还是选择了第一次用的.后面的都白试了. 先说一下这个项目的需要,1.基本的字体以及样式修改要的,要图片上传功能,需要上传到自己公司的服务器,在获取地址后加上编辑中去,2.需要placeholder属性. 也许很多人都觉得这两个属性的富文本编辑器很多,然而在我花了1天左右时间寻找后,只有1款勉强满足自己的需要,placeholder这个属性还是自己通过修改原插件才得以实现的. 下面是我使用过的富文本编辑器: 1.react
目前网上的富文本编辑器多的可以说是数不胜数,但是百度的UEditor可以算是其中的佼佼者,今天就简单的了解一下这款富文本编辑器。
在互联网的很多产品中,富文本是经常存在的,因为在富文本中,可以插入图片,插入视频以及对字体等等可以进行调整,对于web的自动化测试人员来说,对于富文本的操作是无法逃避的,对于富文本,处理思路是先获取到iframe的id,通过js来控制,可以实现在富文本中输入我们想要输入的字符。
因为这次是二次展示,是有文章内容的,所以我们应该把文章内容按照富文本的原样格式放到富文本编辑器中展示出来,我们可以用js来实现:
在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还在感慨官方什么时候出个比较全面的富文本组件,谁知道没几天就发布了editor富文本组件。
打字机效果也就是让文字逐个在屏幕中显示,直到把整段话说完,常常被应用到人物对话,角色旁白以及引导教程等高频场景中。
百度搜一下“VUE 富文本编辑器”,五花八门,N多种,推荐比较多的是集成百度的UEditor,然后是vue-quill-editor。后者是专门为vue提供的,结合起来更顺手。试了试UEditor,然后放弃了,虽然功能丰富,但是确实略麻烦。vue-quill-editor简单轻巧又开源,可自己随意订制,因此选了后者。下面简单说一下怎么使用。
最近在忙着做一个小项目,就是一个企业内部的论坛,其中最基本的一点就是富文本编辑帖子和回帖。目前市面上用的比较多的富文本编辑器有:
遥想刚入行的时候在一个媒体类的互联网单位,既然是媒体单位,文案的在线编辑,自然而然成为了一个不可绕过的坎
1、在模型类中设置字段为富文本类型,这里需要注意引入的是RichTextUploadingField,以允许上传图片,需要和RichTextField区分开
原文:https://vuedose.tips/use-web-workers-in-your-vuejs-component-for-max-performance/
我所在的城市昨天出了近20+的阳性案例,但这丝毫没有 影响 到996的工作时间,当然,也没有影响到我想继续更新文章的决心。
在使用Selenium测试一些CMS后台系统时,有时会遇到一些富文本框,如下图所示:
转载请说明作者或者注明出处,谢谢 说到前端常用的编辑器,自然也少不了富文本编辑器(RichText Editor) 笔者在此之前也看了一些相关的在线编辑器,其中包括了当百度搜索“富文本编辑器”字样时出现在最上面的百度UEditor,里面的功能相当丰富,但是配置也相对复杂,对于使用者要求较高。况且在轻量级网页应用的开发中也并不需要如此多的功能,所以真正需要的是一个使用简单的轻量级富文本编辑器,出于方便考虑,也应该尽可能保证“所见即所得”原则。 wangEditor正是其中之一(官网链接:wangEditor)
es6的Promise让异步接口的处理变得轻松,在旧版本的小程序中并不原生支持Promise,需要引入第三方库,例如:https://github.com/stefanpenner/es6-promise,然而在新版的小程序中已经原生支持了Promise,直接使用即可。
Editor.js 提供了简单而直观的用户界面,根据需求可以灵活添加自定义的编辑工具,通过插件扩展功能
Quill 是一个免费的,开源的 WYSIWYG (What You See Is What You Get)编辑器,专为现代网络而打造。凭借其模块化架构和富有表现力的 API,你可完全自定义以满足任何需求。
前言 上一篇Selenium2+python自动化23-富文本(自动发帖)解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上ifr
源码 https://github.com/django-ckeditor/django-ckeditor
添加文章功能里面,最重要的就是文章内容部分,需要配置上富文本编辑器,这样才能给我们的内容增加样式。
EuiAdmin是基于Vue+Element等组件联合开发的一个免费的开源后台,你可以通过(euiadmin.com)进行下载和体验,此后台免费开源,你可以直接可以免费使用。
♘ 背景 最近在开发学习 Uniapp 的过程中遇到了富文本的显示,对比了 微信小程序 中生成的代码,才发现原来微信官方早就开发了<rich-text> 标签,可以很方便的拿来使用 所以,在此对 小程序 rich-text 的使用方法进行一点整理 ♘ 使用技巧 ❶ . 首先,是 wxml 页面元素的最简单使用 <rich-text nodes="{{article_content}}"></rich-text> ❷. js 通常的处理逻辑为: 根据文章 ID,网络请求其文章内容;然后将 "
富文本编辑器是一个常见的业务场景,一般来说,通过富文本编辑器编辑的内容最终也会 html 的形式来进行渲染,比如 VUE,一般就会使用 v-html 来承载富文本编辑的内容。因为文本内容需要通过 html 来进行渲染,那么显然普通的编码转义不适合这种场景了,因为这样最终的呈现的效果就不是我们想要的了。针对于这种场景,显然过滤是唯一的解决方案了,不过过滤其实可以在后端和前端都是可以做的,后端做的话,一般是在数据存储在数据库之前。前端做的话,则是在数据最终在页面渲染之前做过滤。
借助富文本编辑器,网站的编辑人员能够像使用offfice一样编写出漂亮的、所见即所得的页面。此处以tinymce为例,其它富文本编辑器的使用也是类似的。
Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。
至于为什么还是用TinyMCE,不用ElementUI自带的富文本编译器,因为技穷/(ㄒoㄒ)/~~
Django 2.1.7 Admin - 注册模型、自定义显示列表字段 Django 2.1.7 上传图片 - Admin后台管理 https://django-tinymce.readthedocs.io/en/latest/
1、使用vue-cli构建一个vue项目。然后下载UEditor源码。地址:http://ueditor.baidu.com/website/ 把项目复制到vue项目的static文件下。目的是让服务可以访问到里面的文件,打开UEditor目录文件。这里下载的是jsp版本的。文件名字没有更改过。打开里面的ueditor.config.js文件找到serverUrl把这行代码注释了。这个代码是用来上传图片的后台地址。如果不注释了会请求报错。编辑器跑起来再做服务配置修改地址。 2、在.vue文件中引入主要js文件 import ‘../../static/utf8-jsp/ueditor.config’ import ‘../../static/utf8-jsp/ueditor.all’; import ‘../../static/utf8-jsp/lang/zh-cn/zh-cn’; 3、在data中申明一个变量存储UEditor的实例方便在vue的其他地方使用,然后申明一个变量存储手动获取的编辑器里面的内容,再什么一个变量存储初始化时要写入编辑器的内容。三个变量。如果操作得当。可以减少变量的时候。这是笨办法 4、在vue的mounted钩子函数中调用编辑器的方法生成实例存储到刚刚申明的变量中,在实例中传入参数。第一个是id,id是生成编辑器的div的id。第二个参数是一个对象。对象内容是对编辑器的配置。如资源访问路径,toolbars内容配置。 5、在html部分写一个div标签 6、然后配置资源路径。在实例化的时候传入的参数里。第二个参数是一个对象。内容包括路径。 this.ue = UE.getEditor('editor',{ BaseUrl: '', UEDITOR_HOME_URL: 'static/utf8-jsp/', }); 这个UEDITOR_HOME_URL就是配置编辑器自己访问自己所需要的依赖的路径。设置到存放的文件下utf8-jsp是编辑器文件的更目录。目录不一样可自行更改 7、然后保存。就可以在界面上显示一个完整的富文本编辑器 8、如果要获取内容则使用在data里面申明的编辑器实例在vue中this.实例调用方法getContent()可以获取到内容 9如果要设置内容则调用:setContent('欢迎使用ueditor'); 更多方法参考官方文档。 10、文档内容属于个人踩坑的心得。如有错误。请留言指出。谢谢 11、需要注意的是资源路径容易搞错。使用相对路径即可 12、贴出代码
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/80454100
寿命的缩短与思想的虚耗成正比。——达尔文 官方文档 wangEditor:Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费 html里集成wangEditor非常简单 <script src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script> <script> var E = window.wangEditor; var editor =
由于个人一直想弄一个博客网站,所以写博客的功能也就必须存在啦,而之前想过用富文本编辑器来实现的。但是接触了markdown后,发现真的是太好玩了,而且使用markdown的话可以在博客园、CSDN、公众号等各个地方使用。如果使用富文本来实现的话。。那可就惨了,发一篇文章在不同的地方就要重新弄一下样式。真的是非常蛋teng。所以建议不会markdown语法的童鞋还是得好好去看看。 在这里我要介绍的是如何在你的网站接入Markdown功能
最初使用的若依自带的quill,刚开始使用就会有些卡顿,刚开始还不太在意,后来慢慢发现确实不爽,嵌入代码块时还会卡死浏览器,之后思考许久决定换一个文本编辑器。
(不要以为我放个慕课认证作者的截图是在ZB,其实我就是在ZB, 你能怎么滴我吧....哈哈哈...........)
在Fiberplane,我们最近遇到了一个有趣的挑战:我们正在使用的富文本编辑器库已经过时了。我们曾经使用Slate.js——一个很好的编辑器——但是当我们为协作编辑实现我们自己的富文本基元时,我们发现我们自己的基元和Slate的数据模型之间的脱节是一个阻碍因素。所以我们开始思考——如果我们建立自己的富文本编辑器(RTE, Rich Text Editor)会怎样?
它是目前 GitHub 上 Star 数最多的所见即所得 Web 编辑器,具有强大的可扩展性和兼容性,支持台式机、平板电脑和手机上几乎所有的浏览器
在之前的一篇文章中介绍了如何将富文本kindeditor结合到django中:Django2.0.4 结合 KindEditor 4.1.11 富文本编辑器
领取专属 10元无门槛券
手把手带您无忧上云