写在前面

现在网上有很多现成的富文本编辑器，比如百度家的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. 【bzoj3811】【清华集训2014】玛里苟斯

    3811: 玛里苟斯 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 500  Solved: 196[Submit][Status][Discuss] ...

  2. Mobile Service

    link 试题分析 我们发现$dp(t,s1,s2,s3)$表示在$t$时刻$3$个人的位置.发现时间复杂度为$O(n \times L^3)$.不仅会$T$还会$MLE$,所以需要优化$dp$.我们 ...

  3. 修改ranger ui的admin用户登录密码踩坑小记

    修改的ranger ui的admin用户登录密码时,需要在ranger的配置里把admin_password改成一样的,否则hdfs的namenode在使用admin时启动不起来,异常如下: Trac ...

  4. array_filter 过滤一维中空数组，数组的序列不变

    <?php header('Content-type:text;charset=utf8'); $str = "%11111%22222%333333%"; $arr = e ...

  5. 「Linux」制作一个Linux系统

    一.前言 Linux操作系统至1991年10月5日诞生以来,就其开源性和自由性得到了很多技术大牛的青睐,每个Linux爱好者都为其贡献了自己的一份力,不管是在Linux内核还是开源软件等方面,都为我们 ...

  6. OpenCV---图像梯度

    图像梯度 推文:[OpenCV入门教程之十二]OpenCV边缘检测:Canny算子,Sobel算子,Laplace算子,Scharr滤波器合辑 图像梯度可以把图像看成二维离散函数,图像梯度其实就是这个 ...

  7. centos7 nginx开启启动

    centos 7以上是用Systemd进行系统初始化的,Systemd 是 Linux 系统中最新的初始化系统(init),它主要的设计目标是克服 sysvinit 固有的缺点,提高系统的启动速度.关 ...

  8. 封装-python

    六 封装 从封装本身的意思去理解,封装就好像是拿来一个麻袋,把小猫,小狗,小王八,还有alex一起装进麻袋,然后把麻袋封上口子.但其实这种理解相当片面 首先我们要了解 回到顶部 6.1 要封装什么 你 ...

  9. 维护后面的position + 离线 + 线段树 bzoj 3585

    3585: mex Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 918  Solved: 481[Submit][Status][Discuss] ...

  10. hadoop之存储篇

    ---持续更新中,可留言讨论--- --题目导航见页面左上角的悬浮框#目录导航#-- 一.目录: 集群规划 HDFS HA 冒烟测试 功能特性 二.集群规划: 负载类型 容量规划 可扩展性 角色分离 ...