写在前面

现在网上有很多现成的富文本编辑器，比如百度家的UEditor，kindeditor，niceditor等等，功能特别的多，API也很多，要去熟悉他的规则也很麻烦，所以想自己了解一下原理，做一个功能少点的编辑器，后面再不断累加、完善。

目前文本编辑器实现的功能有：选择字体大小、颜色、加粗、斜体、下划线。有 '提交' 和 '编辑' 按钮。

关键代码

document.execCommand() 函数　　　 <>

contentEditable   属性　　　　　　　　<>

[前端随笔][JavaScript] 制作一个富文本编辑器的更多相关文章

  1. iView + vue-quill-editor 实现一个富文本编辑器（包含图片，视频上传）

    1. 引入插件(注意IE10以下不支持) npm install vue-quill-editor --savenpm install quill --save (Vue-Quill-Editor需要 ...

  2. [前端随笔][CSS] 制作一个加载动画 即帖即用

    说在前面 描述 [加载中loading...] 的动画图片往往使用GIF来实现,但GIF消耗资源较大,所以使用CSS直接制作更优. 效果传送门1 效果传送门2 关键代码 @keyframes 规则 用 ...

  3. [译] 通过 contentEditable 属性创建一个所见即所得的编辑器（富文本编辑器）

    译者注 这只是一篇入门教程,介绍了一些基础知识,仅供参考,切不可因此觉得富文本编辑器很简单. 创建富文本编辑器是一个非常复杂的工程,需要考虑到方方面面,也有很多坑(请参考原文第一条评论). 为免误导大 ...

  4. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

  5. Spring+SpringMVC+MyBatis+easyUI整合优化篇（六）easyUI与富文本编辑器UEditor整合

    日常啰嗦 本来这一篇和接下来的几篇是打算讲一下JDBC和数据库优化的,但是最近很多朋友加我好友也讨论了一些问题,我发现大家似乎都是拿这个项目作为练手项目,作为脚手架来用的,因此呢,改变了一下思路,JD ...

  6. django富文本编辑器

    -------------------tinymce富文本编辑器1.下载安装 1.在网站pypi网站搜索并下载"django-tinymce-2.4.0" 2.解压:tar zxv ...

  7. easyUI整合富文本编辑器KindEditor详细教程(附源码)

    原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...

  8. vue集成百度UEditor富文本编辑器

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...

  9. JSP嵌入ueditor、umeditor富文本编辑器

    一.下载: 1.什么是富文本编辑器?就是: 或者是这个: 其中第一个功能比较详尽,其主要用来编写文章,名字叫做udeitor. 第二个就相对精简,是第一个的MINI版,其主要用来编辑即时聊天或者发帖, ...

随机推荐

  1. 使用expect实现自动登录的脚本

    使用expect实现自动登录的脚本,网上有很多,可是都没有一个明白的说明,初学者一般都是照抄.收藏.可是为什么要这么写却不知其然.本文用一个最短的例子说明脚本的原理. 脚本代码如下: ######## ...

  2. 【bzoj1029】【JSOI2007】建筑抢修

    1029: [JSOI2007]建筑抢修 Time Limit: 4 Sec  Memory Limit: 162 MBSubmit: 6417  Solved: 2883[Submit][Statu ...

  3. VMware 与Ubuntu通过samba服务器共享文件

    Linux和windows在虚拟机下文件共享有很多种方式,常用的有使用VMware Tools共享和Samba服务器进行共享,使用VMware Tools这里就不说了,我使用的是Samba服务器. 其 ...

  4. Nginx报错 nginx: [error] open() "/usr/local/nginx-1.6.3/logs/nginx.pid" failed (2: No such file or directory)

    问题: 解决: http://www.jianshu.com/p/918eb337a206 dd

  5. 理解PV操作和信号量

    对于信号量,可以认为是一个仓库,有两个概念,容量和当前的货物个数. P操作从仓库拿货,如果仓库中没有货,线程一直等待,直到V操作,往仓库里添加了货物,为了避免P操作一直等待下去,会有一个超时时间. V ...

  6. zoj 3229 Shoot the Bullet（有源汇上下界最大流）

    Shoot the Bullethttp://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3442 Time Limit: 2 Second ...

  7. 树上的构造 树分治+树重心的性质 Codeforces Round #190 (Div. 2) E

    http://codeforces.com/contest/322/problem/E E. Ciel the Commander time limit per test 1 second memor ...

  8. 2015/9/21 Python基础(17)：绑定和方法调用

    绑定和方法调用现在我们需要再次阐述Python中绑定(binding)的概念,它主要与方法调用相关联.方法是类内部定义的函数,这意味着方法是类属性而不是实例属性.其次,方法只有在其所属的类拥有实例时, ...

  9. Python学习笔记（四十六）网络编程（2）— UDP编程

    摘抄:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/0014320049779 ...

  10. Linux 目录详解 树状目录结构图

    1.树状目录结构图 2./目录 目录 描述 / 第一层次结构的根.整个文件系统层次结构的根目录. /bin/ 需要在单用户模式可用的必要命令(可执行文件):面向所有用户,例如:cat.ls.cp,和/ ...