当我们要开发一个博客、社区、论坛等内容生产平台的时候,为用户挑选一个 UI 优雅简洁、交互丝滑顺畅的文本编辑器总是必不可少的一步。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/137644.html原文链接:https://javaforall.cn
阿里巴巴集团前端委员会主席 @圆心 对前端未来期许有四点:搭建服务, Serverless,智能化,IDE。仔细想想,一个「可视化搭建系统」的想象空间,正能完美命中这些方面。前端的边界在哪里,对于业务的价值又在哪里,我们不妨静下来,一起从「可视化搭建系统」的角度来思考。
上文说道,我被百度编辑器上了套,今天,说下我的个人进展,因为我把截图粘贴的功能兼容到IE了,算是给自己的鼓励。
当然,我们已经有可以使用的很好的Web编辑器:你只需下载,并插入页面即可。我以前习惯于使用CodeMirror和ACE。例如,我为CodeMirror写了一个插件来支持PlantUML。然而,这些编辑器有一个问题:它们难以扩展和难以理解。
(不要以为我放个慕课认证作者的截图是在ZB,其实我就是在ZB, 你能怎么滴我吧....哈哈哈...........)
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、贴出代码
Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器
在使用了众多富文本编辑器后,终于有一些总结经验了. 这两天换了不下5个富文本编辑器,最后还是选择了第一次用的.后面的都白试了. 先说一下这个项目的需要,1.基本的字体以及样式修改要的,要图片上传功能,需要上传到自己公司的服务器,在获取地址后加上编辑中去,2.需要placeholder属性. 也许很多人都觉得这两个属性的富文本编辑器很多,然而在我花了1天左右时间寻找后,只有1款勉强满足自己的需要,placeholder这个属性还是自己通过修改原插件才得以实现的. 下面是我使用过的富文本编辑器: 1.react
本文介绍了如何使用 Vue2 和 VueRouter2 结合 Webpack 和 Axios 来实现一个基本的个人博客系统。作者还根据实际开发经验,分享了如何集成使用 UEditor 编辑器以及如何在 Vue2 的项目中使用 Element UI 进行前端界面的开发。此外,文章还介绍了一些重要的配置和注意事项,为开发者提供了一份实用的参考文档。
Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。
UEditor富文本编辑器的简单入门 首先既然我们要用UEditor插件,我们就需要引入对应的文件,在UEditor官网下载,然后将static文件夹拷贝到我们项目的根目录下,接下来就是引用: ---- * 引入配置文件 <script src="static/UE/ueditor.config.js"></script> * 引入all.js <script src="static/UE/ueditor.all.min.js"></script> * 引入parse.js <script
转载请说明作者或者注明出处,谢谢 说到前端常用的编辑器,自然也少不了富文本编辑器(RichText Editor) 笔者在此之前也看了一些相关的在线编辑器,其中包括了当百度搜索“富文本编辑器”字样时出现在最上面的百度UEditor,里面的功能相当丰富,但是配置也相对复杂,对于使用者要求较高。况且在轻量级网页应用的开发中也并不需要如此多的功能,所以真正需要的是一个使用简单的轻量级富文本编辑器,出于方便考虑,也应该尽可能保证“所见即所得”原则。 wangEditor正是其中之一(官网链接:wangEditor)
KindEditor是一款还不错的开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。之所以推荐这一款编辑器,是因为它非常的轻量化,也不需要安装,从而耦合度非常低,无论是使用表单提交内容还是异步提交,都非常方便,这里简单介绍一下如何在Django2.0.4中使用这款富文本编辑器。
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费
UEditor是由百度web前端研发部开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点。UEditor存在一个XSS漏洞,编辑器在定义过滤规则的时候不严和读取内容的时候的绕过导致了该漏洞,目前此漏洞已经上报。
这边文章https://blog.csdn.net/liuxiao723846/article/details/106732401 介绍了Ace的使用,本文围绕Ace的api深入介绍其具体功能。
下载ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip两个压缩文件
目前市面上已经有很多类似的平台和方案了,类似像jsfiddle、CodePen、Storybook这样的平台,这些平台可以让我们在浏览器中创建代码并直接执行,无需单独在我们本地创建项目,所以当你在测试一段代码时,这些平台可能会为你提供一些帮助。
EditorX是DevUI开发的一款好用、易用、功能强大的富文本编辑器,它的底层基于Quill,并对其做了大量扩展,以增强编辑器的能力。
之前一直以为开发VS code插件是一件很难的事情,后来工作上需要搞一个效率小工具,就试着找了些资料来入门,发现其实就入门和开发一些简单功能的插件来说难度还是很低的。因为vscode本身是基于electron开发的,所以总体来说开发插件就是在写node代码,额外再加一些编辑器api,插件发布的过程和npm包的发布很类似。
添加文章功能里面,最重要的就是文章内容部分,需要配置上富文本编辑器,这样才能给我们的内容增加样式。
Quill 是一个免费的,开源的 WYSIWYG (What You See Is What You Get)编辑器,专为现代网络而打造。凭借其模块化架构和富有表现力的 API,你可完全自定义以满足任何需求。
我所在的城市昨天出了近20+的阳性案例,但这丝毫没有 影响 到996的工作时间,当然,也没有影响到我想继续更新文章的决心。
公元 2019 年,微信公众号排版能力孱弱,始终为运营者所诟病,秀米、135 编辑器等工具割据一方。
UEditor 百度富文本编辑器的 initialFrameWidth 属性默认值是1000,设置 initialFrameWidth=null 时,编辑器会在第一次加载的时候获取屏幕宽度,然后赋值给 initialFrameWidth 属性,这样确实可以在第一次加载时适应屏幕宽度,但是似乎宽度稍微过了一点点。而且当你改变浏览器大小时,会有很严重的排版BUG,由于它不会自适应宽度。
在前文中我们介绍了富文本的基础概念,以及富文本的基本发展历程,那么在本文中将会介绍当前主流开源的富文本编辑器引擎。当前使用最广泛的富文本编辑器是L1的富文本编辑器,其能满足绝大部份使用场景,由此也诞生了非常多优秀的开源富文本引擎,这其中有仅提供引擎的编辑器例如Slate.js,也有提供了部分开箱即用的功能的例如Quill.js,也有基于这些引擎二次开发的例如Plate.js,本文主要介绍了Slate.js、Quill.js、Draft.js三款编辑器引擎。
写这个的目的是因为之前项目里用到过 CodeMirror,觉得作为一款在线代码编辑器还是不错,也看到过有些网站用到过在线代码编辑,当然我不知道他们是用什么做的,这里我把公司项目里用到的那部分抽出来,单独写篇博客,并把抽出来的那部分代码提交到 GitHub 去(地址),以防日后可能会再次用到(没准毕业设计里可能用的到)。
最新全家桶激活码获取方法:https://docs.qq.com/doc/DS3hpVWFnQ2ZGVnhH
依赖浏览器特性,主要是使用到了 designMode、ContentEditable、webkit-user-modify、execCommand 等特性。早期的编辑器都采用这种方案,但可定制的空间有限。例如早期的技术产品 WYSIWYG Editor。
安装开发环境:首先,确保你的本地环境已经安装了 Node.js 和 Git。然后,通过 npm 安装 yo 和 generator-code 脚手架工具。
对于JavaScript程序员来说,目前有很多很棒的工具可供选择。本文将会讨论10个优秀的支持JavaScript,HTML5和CSS开发,并且可以使用Markdown进行文档编写的文本编辑器。为什么使用编辑器而不是IDE进行JavaScript编程?原因就是速度快。
微软开发的跨平台文档格式,大多数的文字处理软件都能读取和保存RTF文档,其实就是可以添加样式的文档,和HTML有很多相似的地方
今天给推荐一款字节跳动旗下掘金社区官方出品的 Markdown 编辑器 JS 开发库:ByteMD。
---- 博客地址 我个人博客的地址👉👉点击进入 开源项目地址 📷 这是我一个开源的收藏网址的项目 项目地址👉👉点击进入,可以直接设置为浏览器主页或者桌面快捷方式进行使用,本人在用,长期维护。 完全
做过Web开发的朋友相信都使用过富文本编辑器,比较出名的CuteEditor和CKEditor很多人应该已经使用过,在功能强大的同时需要加载的东西也变得很多。下面要推荐的两款富文本编辑器都是使用JS编写,使用简单,非常轻量级。
VS Code可以通过名为代码片段的功能像编辑器中插入一段指定的文本,具体操作步骤为首选项->用户代码片段->新建全局代码片段。
最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件。 在线预览:https://suweiteng.github.io/vue2-management-platform/#/editor 项目地址:https://github.com/suweiteng/vue2-management-platform
写这个的目的是因为之前项目里用到过 CodeMirror,觉得作为一款在线代码编辑器还是不错,也看到过有些网站用到过在线代码编辑,当然我不知道他们是用什么做的,这里我把公司项目里用到的那部分抽出来,单独写篇博客,并把抽出来的那部分代码提交到 GitHub 去
大家好,我是鱼皮,昨天 的小伙伴问我:现在想做个写作网站,有没有好用的前端富文本编辑器组件?
Markdeep 是一个用来写纯文本的插件,它能以 Markdown 的语法与渲染方式纯文本,并在网页上展示。同时,除了 Markdown 语法,Markdeep 还额外支持图表、数学方程等扩展能力。
LoT.UI汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui 上次说的是强大的百度编辑器 http://www.cnblogs.com/d
转载自:AI有道 只要你有纯文本编辑器,加上一条语句,瞬间它就可以成为 Markdown 编辑器。
领取专属 10元无门槛券
手把手带您无忧上云