php简单富文本,JS简易版富文本编辑器实现代码

直到今天才来，初略的了解了下，当然呢，至于过程也是前一秒痛苦，后三秒轻松加容易的。这个富文本编辑器，主要是用p自带的contenteditable属性document.execCommand()方法实现的，为了方便布局，偷了下小懒，直接拿table布局了，唉，作为一名那些年的前端开发人员，还真是不不知道该说些啥了。

下面展示实现的效果：

体的实现过程：

(1)HTML结构：

size

img

请选择图片

timg.jpg

timg1.jpg

timg2.jpg

timg3.jpg

timg4.jpg

这是一个用p的contenteditable属性以及document.execCommand实现的一个简易富文本编辑器。

(2)JS实现逻辑：

(function() {

//富文本编辑器类

class Editor {

constructor() {

this.bindElem();

}

bindElem() {

var text = document.querySelector('.text');

var txt = null;

var tablebox = document.getElementById_x('tablebox');

var inputbs = tablebox.querySelectorAll('input,select');

for (var i = 0; i {

if (inputbs[i].tagName.toLowerCase() == 'input') {

this.action(inputbs[i], inputbs[i].name);

} else if (inputbs[i].tagName.toLowerCase() == 'select') {

inputbs[i].onchange = function() {

document.execCommand(this.name, true, this.value);

}

action(obj, attr) {

obj.onclick = function() {

document.execCommand(attr, true);

}

new Editor();

})();

php简单富文本,JS简易版富文本编辑器实现代码相关推荐

html5 拖拽滚动条,js 简易版滚动条实例(适用于移动端H5开发)
废话不多说,直接上代码滑动条 *{ margin: 0; padding: 0; } #content{ margin-top: 50px; width:100%; height: 200px; b ...
js简易版歌单播放，可切换下一首
可暂停可点击切换上一首下一首同时变动歌曲名字新手小白版还没有实现列表功能如果需要兼容所有浏览器在<audio> 元素中使用 <source> 元素 <s ...
从零开始学习Java神经网络、自然语言处理和语音识别，附详解和简易版GPT，语音识别完整代码示例解析
QT实现文本编辑器（简易版）
一.简介二.实现功能三.思路四.代码实现五.运行结果一.简介:这是一个简易版的文本编辑器,只能进行简单的文件读取与保存二.实现功能: (1)打开指定路径的文件 (2)把文件的名字显示在标签 ...
实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS
实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS 实现简易版德州扑克 1.先上达到网页效果图(简易版德州扑克) 2. 代码实现 2.1 HTML和JS代码 2.2 CSS代 ...
手写简易版Vue源码之数据响应化的实现
当前,Vue和React已成为两大炙手可热的前端框架,这两个框架都算是业内一些最佳实践的集合体.其中,Vue最大的亮点和特色就是数据响应化,而React的特点则是单向数据流与jsx. 笔者近期正在研究 ...
在直播APP系统源码中基于腾讯视频云SDK制作简易版直播回放播放器
在直播App系统中,当主播结束之后,我们需要使用播放器观看直播的一些回放片段,在观看回放的过程中,我们会使用到开始,暂停,控制播放位置,进度监听,全屏等功能,然而腾讯点播并没有提供这些简单的控制功能, ...
python车辆管理系统_Python简易版停车管理系统
本文实例为大家分享了Python简易版停车管理系统的具体代码,供大家参考,具体内容如下 import time # 最大停车数 max_car = 100 # 当前停车数,初始为0 cur_car = ...
停车场管理系统python_Python简易版停车管理系统
本文实例为大家分享了Python简易版停车管理系统的具体代码,供大家参考,具体内容如下 import time # 最大停车数 max_car = 100 # 当前停车数,初始为0 cur_car = ...
如何用Vue实现简易的富文本编辑器，并支持Markdown语法
前端开发经常会用到富文本编辑器,比如CKEditor,动不动一个库几十M的代码量,其中涉及许多你可能用不到的功能特性和相关设置,CKEditor最新版本的代码仓库就有接近2000个JS文件,300,0 ...

php简单富文本,JS简易版富文本编辑器实现代码

php简单富文本,JS简易版富文本编辑器实现代码相关推荐

最新文章

热门文章