原生API编写简单富文本编辑器001
原生API编写简单富文本编辑器001
系列文章快速阅读:
富文本编辑器开发系列-1-基础概念
富文本编辑器开发系列2-document.execCommand 的API
富文本编辑器开发系列3-selection
富文本编辑器开发系列4——Range对象
富文本编辑器开发系列5——浏览器Selection API
探究
富文本编辑器开发系列6——Range API
探究
富文本编辑器开发系列7——textRange对象详解
富文本编辑器开发系列8——常用DOM API
原生API编写简单富文本编辑器001
原生API编写简单富文本编辑器002
原生API编写简单富文本编辑器003
原生API编写简单富文本编辑器004
原生API编写简单富文本编辑器005
从这一节开始,我们将亲自动手,使用我们之前介绍过的浏览器原生API来实现一个简单的可以处理文本的富文本编辑器。
1. 设计
这一个简单版的编辑器,由于我们是基于原生的API,基于浏览器原生API的能力,我们将实现以下功能:
文字输入
文字格式调整
- 加粗
- 斜体
- 下划线
- 删除线
- 前景色
- 背景色
- 改变字号
- 改变字体
- 上角标
- 下角标
段落格式调整
- 清除格式
- 首行缩进
- 段落居左对齐
- 段落居右对齐
- 段落居中对齐
- 段落两端对齐
- 插入有序列表
- 插入无序列表
其它
- 插入超链接
- 取消超链接
- 插入网络图片
- 拷贝
- 剪切
- 撤销
- 重做
2. 图标准备
通常,当用户使用富文本编辑器时,都希望点击一个按钮来实现某种功能,而传统的按钮太过丑陋,所以我们为其准备一个按钮图标。
这里,我们使用iconfont.cn
上提供的免费图标。
我们可以进入iconfont 官网,登陆后,新建一个项目:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ktRo8kIW-1670512094428)(https://gitee.com/hjb2722404/tuchuang/raw/master/img/202203101510248.png)]
然后根据功能设计,将免费图标先添加到购物车,再导入到项目中:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VKddQ9G2-1670512094431)(https://gitee.com/hjb2722404/tuchuang/raw/master/img/202203101518863.png)]
3. 编写界面
3.1 初始结构
├── index.html└── static├── css│ ├── iconfont│ │ ├── demo.css│ │ ├── demo_index.html│ │ ├── iconfont.css│ │ ├── iconfont.js│ │ ├── iconfont.json│ │ ├── iconfont.svg│ │ ├── iconfont.ttf│ │ ├── iconfont.woff│ │ └── iconfont.woff2│ └── index.css└── js|——index.js
3.2 html结构:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./static/css/index.css"><link rel="stylesheet" href="./static/css/iconfont/iconfont.css"><script src="./static/css/iconfont/iconfont.js"></script>
</head>
<body><div class="editor-box"><div class="editor"><div id="editorBar" class="editor-toolbar"><ul><li command="undo"><i class="iconfont icon-chexiao" title="撤销"></i></li><li command="redo"><i class="iconfont icon-zhongzuo" title="重做"></i></li><li command="copy"><i class="iconfont icon-fuzhi" title="复制"></i></li><li command="cut"><i class="iconfont icon-jianqie" title="剪切"></i></li><li command="fontName"><i class="iconfont icon-ziti" title="字体"></i></li><li command="fontSize"><i class="iconfont icon-zihao" title="字号"></i></li><li command="Bold"><i class="iconfont icon-zitijiacu" title="加粗"></i></li><li command="italic"><i class="iconfont icon-zitixieti" title="斜体"></i></li><li command="underline"><i class="iconfont icon-zitixiahuaxian" title="下划线"></i></li><li command="strikeThrough"><i class="iconfont icon-zitishanchuxian" title="删除线"></i></li><li command="superscript"><i class="iconfont icon-zitishangbiao" title="上标"></i></li><li command="subscript"><i class="iconfont icon-zitixiabiao" title="下标"></i></li><li command="fontColor"><i class="iconfont icon-qianjingse" title="字体颜色"></i></li><li command="backColor"><i class="iconfont icon-zitibeijingse" title="字体背景色"></i></li><li command="removeFormat"><i class="iconfont icon-qingchugeshi" title="清除格式"></i></li><li command="insertOrderedList"><i class="iconfont icon-youxuliebiao" title="有序列表"></i></li><li command="insertUnorderedList"><i class="iconfont icon-wuxuliebiao" title="无序列表"></i></li><li command="justifyLeft"><i class="iconfont icon-juzuoduiqi" title="局左对齐"></i></li><li command="justifyRight"><i class="iconfont icon-juyouduiqi" title="居右对齐"></i></li><li command="justifyCenter"><i class="iconfont icon-juzhongduiqi" title="居中对齐"></i></li><li command="justifyFull"><i class="iconfont icon-liangduanduiqi" title="两端对齐"></i></li><li command="createLink"><i class="iconfont icon-charulianjie" title="插入链接"></i></li><li command="unlink"><i class="iconfont icon-quxiaolianjie" title="取消链接"></i></li><li command="indent"><i class="iconfont icon-shouhangsuojin" title="首行缩进"></i></li><li command="insertImage"><i class="iconfont icon-tupian" title="插入图片"></i></li></ul></div><div id="editor-content" class="editor-content" contenteditable></div></div></div>
</body>
<script src="./static/js/index.js"></script>
</html>
注意:
我们这里为每一个按钮所在
li
元素添加了command
属性,这个属性就是当点击该按钮时需要传递给
document.execCommand(command);
命令的命令名称参数。
3.3 css
.editor-box {width: 960px;margin: auto;
}.editor {width: 100%;margin-top: 50px;height: 600px;border: 1px solid #ccc;
}.editor-toolbar {width: 100%;border-bottom: 1px dotted #555;
}.editor-toolbar ul {list-style: none;
}.editor-toolbar ul li {width: 20px;height: 20px;line-height: 20px;display: inline-block;cursor: pointer;margin-left: 10px;
}
.editor-toolbar ul li .iconfont {font-size: 16px;
}
.editor-content {margin-top: 20px;height: 500px;overflow: auto;padding: 0 25px;
}
3.4 界面效果
好了,我们写好了界面,下一节,我们将实现编辑器功能。
本系列文章代码可从gitee获取
(本节内容对应代码可在1.0.1
分支找到)
原生API编写简单富文本编辑器001相关推荐
- 用 java swing 编写的富文本编辑器,成品小程序,拿来即可用
这里写自定义目录标题 用 java swing 编写的富文本编辑器,成品小程序,拿来即可用 用 java swing 编写的富文本编辑器,成品小程序,拿来即可用 前言 在最开始的开始,我也一直在找一个 ...
- React H5 使用div自定义简单富文本编辑器
最近项目中h5端要实现图文上传,而且还要支持用户用户输入的格式,例如换行啥的,那么使用输入控件保存输入内容,图片上传控件就不合适了,因为很难知道用户的输入样式. 如果使用一些现有的富文本编辑器,貌似又 ...
- MVC+API 实现tinymce富文本编辑器上传图片、上传视频
首先是要下载一个版本,这里我自己用的放到GitHub上了 https://github.com/dhgr1/tinymce 之前我试过官网的以及别的地方的,但都会报错,我也没搞清楚原因,你们可以自己去 ...
- 富文本编辑器开发系列5——浏览器`Selection API`探究
系列文章快速阅读: 富文本编辑器开发系列-1-基础概念 富文本编辑器开发系列2-document.execCommand 的API 富文本编辑器开发系列3-selection 富文本编辑器开发系列4- ...
- HTML JS实现富文本编辑器
HTML/CSS/JS 目录:https://blog.csdn.net/dkbnull/article/details/87934939 JS实现富文本编辑器主要借助 document.execCo ...
- 安卓文本编辑器php cpp,用安卓原生控件封装一个简易的富文本编辑器
最近接到项目需求:移动端原生写一个富文本编辑器. ( ⊙ o ⊙ )从没遇到过富文本要用原生写的,然后就查阅各种资料.然后结合自己的思路:其实安卓的富文本编辑器就是一个 "容器 ...
- JS编写自己的富文本编辑器
富文本编辑器,网上有很多功能齐全种类丰富的如百度的Ueditor,简单适用型的如WangEditor等等.在经过一番挑选后,我发现都不适用现在的项目,然后决定自己造轮子玩玩.富文本编辑器中主要涉及到J ...
- html——简单文章发布html页面及富文本编辑器wangEditor的使用
实现结果截图: 说明: 1.主要组件使用了bootstrap4,富文本编辑器使用wangEditor,在使用前需要下载wangEditor的js文件,地址参考 wangEditor3使用手册 2.所用 ...
- 原生JS实现富文本编辑器
富文本编辑器是我们常用到的编辑器,也有很多功能完备且强大的编辑器,比如Quill Rich Text Editor.ueditor等,都是很优秀的富文本编辑器.在我们写网页的时候也会用到它,通常省事的 ...
最新文章
- LeetCode简单题之单值二叉树
- HTML5 canvas画图
- 山东计算机编程哪个学校好,山东男孩,8岁懂电脑编程,10岁考上南科大,最后为何惨遭退学?...
- php 打开任意文件下载,TEC-004-php文件下载任意文件读取漏洞修复
- asp.net core mvc权限控制:在视图中控制操作权限
- 实现二维码-完整三种编码流程加代码解析(javascript)
- linux-关于用户的约定
- STM8S001J3M3还能完这么多花样,开发板尝鲜体验。
- 【Oracle】修改参数的同时添加注释
- JumpList中Recent类别和自定义类型
- jquery表单美化组件实例
- android无线投屏到电视盒子,【沙发管家】教你如何把电脑视频投屏到智能电视/电视盒子上!...
- SOME/IP报文格式-Payload
- Protel DXP 2004的元件封装/快捷键大全/PCB使用技巧
- 偏差-方差分解、损失函数和正则化
- 【物联网取证篇】5G消息取证浅谈
- 股票自动买卖 java_股票如何实现程序化交易和自动交易?
- 【华为OD机试真题 python】 5键键盘【2022 Q4 | 100分】
- 未能解析主引用“Fiddler”,因为它是针对“.NETFramework,Version=v4.6.1”框架生成的。该框架版本高于当前目标框架“.NETFramework,Version=v4.5
- 软件测试测试用例—用户注册界面