富文本编辑器原理 - 学习/实践
1.介绍
富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于 Microsoft Word 的编辑功能,容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱. |
2.原理
富文本编辑器又称为WYSIWYG(所见即所得),其本质就是在一个页面元素中嵌入HTML代码,并且这个元素可以像文档输入框一样进行文本的编辑,它同时还可以设置文本样式。写博客的工具就是一个功能丰富的富文本编辑器,编辑邮件以及论坛发贴都用到富文本编辑器。 |
3.常用的富文本编辑器
https://cloud.tencent.com/developer/article/1141421 //常用的六个富文本编辑器 1::功能齐全 tinymce|TinyMCE | The Most Advanced WYSIWYG HTML Editor 官方网址:https://www.tinymce.com/ TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。 2:百度 ueditor|UEditor - 首页 官方网址:http://ueditor.baidu.com/website/ UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 3:经典的ckeditor|CKEditor.com 官方网址:https://ckeditor.com/ 4:经典的kindeditor|在线HTML编辑器 官方网址:http://kindeditor.net/demo.php 5:wysiwyg|微型、开源的Bootstrap所见即所得(WYSIWYG)富文本编辑器 -- 由MindMup贡献 官方网站http://www.bootcss.com/p/bootstrap-wysiwyg/ 6:html5编辑器|Squire 官方网站http://neilj.github.io/Squire/ 另附三款源码: wangEditor|GitHub - wangfupeng1988/wangEditor: wangEditor —— 轻量级web富文本框 wangEditor—— 轻量级 web 富文本编辑器,配置方便,使用简单。支持 IE10+ 浏览器。 官网:www.wangEditor.com 文档:www.kancloud.cn/wangfupeng/wangeditor3/332599 源码:github.com/wangfupeng1988/wangEditor tower用的编辑器|GitHub - mycolorway/simditor: An Easy and Fast WYSIWYG Editor github:https://github.com/mycolorway/simditor summernote 编辑器|GitHub - summernote/summernote: Super simple WYSIWYG editor github :https://github.com/summernote/summernote |
4.实现一个简单的富文本编辑器
//待完善,补充... https://github.com/ningxiaofa/Rich-text-editor 参考: https://www.cnblogs.com/muyunren/p/8250596.html //富文本编辑器开发原理 http://www.cnblogs.com/keepfool/archive/2011/12/21/2295335.html //所见即所得富文本编辑器实现原理 https://www.cnblogs.com/longhx/p/5422003.html //实现一个简易的富文本编辑器(一) |
5.问题/补充
https://www.cnblogs.com/longhx/p/5422003.html //实现一个简易的富文本编辑器(一) 1.设置背景色,不能取消背景色 原因是:背景色设置为固定颜色,每次重复执行设置背景色. 解决办法:TBD 2. 思考如何加上引用[""],以及如何取消应用 思路:TBD WYSIWYG ['wɪzɪ'wɪg] abbr. 所见即所得(What You See Is What You Get) 为了不影响当前 document, 通常的做法是在页面中嵌入一个 iframe 元素,然后对这个 iframe 内的 document(通过 iframe.contentWindow.document 获得)进行操作。 #c8cbcf //click点击选中后 #DEE0E2 //hover悬浮 |
6.参考
https://w3c.github.io/editing/execCommand.html https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand#%E5%91%BD%E4%BB%A4 //命令大全 英文版 https://www.cnblogs.com/leong-min/p/6483523.html //Javascript中document.execCommand()的用法 http://neilj.github.io/Squire/ //使用这个富文本编辑器为切入点,搞明白原理[正合适] //发现源代码很多,怎么组织的代码也不是很清楚,需要分步了解,先了解怎么使用,后了解代码组织结构,实现原理 |
后续补充
...
富文本编辑器原理 - 学习/实践相关推荐
- kind富文本编辑器_富文本编辑器原理探索
经常在做企业网站的管理系统的时候需要用到富文本编辑器,之前基本上都是直接去 npm 或者 github 上面搜找一些排名考前或者 readme 写的好的库,直接拿来用.万变不离其宗,是时候探索下本质了 ...
- android 富文本编辑器_富文本编辑器原理探索
经常在做企业网站的管理系统的时候需要用到富文本编辑器,之前基本上都是直接去 npm 或者 github 上面搜找一些排名考前或者 readme 写的好的库,直接拿来用.万变不离其宗,是时候探索下本质了 ...
- js 免费可靠cdn地址(富文本编辑器tinymce的实践)
推荐一个 cdn源的可靠源地址(免费且持久) https://www.jsdelivr.com/?query=tinymce 有个富文本编辑的需求,要求导入html字符串去生成富文本htm,使用的是r ...
- 原生手写富文本编辑器组件
H5富文本编辑器原理解析: 核心属性: 1.contentEditable="true"; //属性规定是否可编辑元素的内容 2.window.document.designMod ...
- 三甲:在线富文本编辑器的架构设计及实践
12月5日, 极客邦(InfoQ)在深圳举办 GMTC 大会,蚂蚁集团语雀编辑器技术同学三甲受邀参加大会并分享<在线富文本编辑器的架构设计及实践>,以下内容是根据现场演讲收集整理. 大家下 ...
- (转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)
http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...
- 富文本编辑器 —— 学习笔记
富文本编辑器 -- 学习笔记 文章目录 富文本编辑器 -- 学习笔记 一.wangEditor 1.内容处理--获取/设置 JSON 一.wangEditor 1.内容处理--获取/设置 JSON 使 ...
- 学习整理在php中使用KindEditor富文本编辑器
学习整理在php中使用KindEditor富文本编辑器 1.下载编辑器 2.部署kindeditor编辑器 3.在html页面里引入编辑器 4.Ajax提交表单时获取不到 KindEditor 内容 ...
- 【实践】简洁大方的summernote 富文本编辑器插件的用发——导入篇
首先在这里吐槽一下,网上不少教程实在太坑人,错误的代码也敢发上来真的是误人子弟,这篇文章是我踩了无数个坑写上来的,可能也会有不足之处所以自己以后可能也会进行更正. 好吧,先说说最近的情况,忙着学校的期 ...
最新文章
- .统计日志中攻击的IP次数然后加IP屏蔽
- 斯洛文尼亚最大零售商接受BCH支付
- 通信upf是什么意思_5G给边缘计算带来了什么?
- yum是干什么的_什么是yum源,yum的工作原理又是什么
- C# WinForm中获取当前程序运行目录的方法
- php长轮询阻塞,ajax长轮询时php被阻塞
- ES6(二)——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol
- PreScan中对象沿预设轨迹运动的若干方式介绍
- arcgis更改字段名_ArcGIS怎么修改属性表字段名称
- GPS距离测量与定位方法概述
- JDBC--DAOUtil封装
- 小程序员的不完整大学回忆3
- MacBook Pro 用户系统故障修复
- python九九乘法表如何对齐_python怎么样输出九九乘法表
- 《宝塔面板教程6》:如何修改用户名和密码
- 如何在电脑浏览器查看微信文章
- 什么情况下PMP可自学?
- bilibili服务器维护7月,GitHub - thestarweb/bilibilidan: 一个B站弹幕姬,就是不会在第一时间维护。。支持插件!!...
- 软件可靠性测试与用例设计
- 厉害了!中国农历算法