<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>原生JS实现简单富文本编辑器</title>

</head>

<body>

    <center><h2 style="margin:auto;">原生JS实现简单富文本编辑器</h2></center>

    <hr>

    <div id="toolbar"

        style="width:700px;margin:auto;border:2px solid gray;padding: 5px;overflow: auto;font-family: 'Courier New', Courier, monospace;">

        <input type="button" name="bold" value='Bold' class="bold">

        <input type="button" name="italic" value='Italic' class="italic">

        <input type="button" name="underline" value='Underline' class="decotation">

    </div>

    <div id="edit"

        style="width:700px;height:500px;margin:auto;border:2px solid gray;padding: 5px;overflow: auto;"

        contenteditable="true">

    </div>

    <button id="save" style="width:300px;height:30px;margin:auto;margin-top:30px;

    background-color: green;border:1px solid green;display: block;color: white;font-family:'Courier New', Courier, monospace;

    font-weight: 500;font-size: 20px;">点 击</button>

    <script>

        (function () {

            // 富文本编辑器类

            class Editor {

                constructor() {

                    this.bindElem();

                }

                bindElem() {

                    var toolbar = document.getElementById("toolbar");

                    var bs = toolbar.querySelectorAll('input,select');

                    for (var i = 0; i < bs.length; i++) {

                        if (bs[i].tagName.toLowerCase() == 'select') {

                            bs[i].onchange = function () {

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

                            }

                        } else if (bs[i].tagName.toLowerCase() == 'input') {

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

                        }

                    }

                }

                action(obj, attr) {

                    obj.onclick = function () {

                        document.execCommand(attr,true);

                    }

                }

            }

            new Editor();

            document.getElementById("save").onclick = function(){

                alert(document.getElementById("edit").innerHTML);

            }

        })();

    </script>

</body>

</html>

知识点：

　　1.contenteditable属性

　　2.document.execCommand()方法

参考文章：

　　1.https://blog.csdn.net/WU5229485/article/details/79692430

参考资料：

　　1.https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

原生JS实现简单富文本编辑器的更多相关文章

  1. 原生JS实现简单富文本编辑器2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 基于JQuery的简单富文本编辑器

    利用jQuery实现最简单的编辑器 我试了很多种方法,目前最快捷能够实现及其简单的编辑可以使用 document.execCommand("ForeColor", "fa ...

  3. summernote富文本编辑器

    下载summernote官方demo,解压,把文件夹中的summernote.js,summernote.css和font整个文件夹都放到服务器对应的项目目录里 引入summernote 所需要的bo ...

  4. Android - 富文本编辑器

    Android富文本编辑器(一):基础知识 目前主流的基于Android富文本开发方式思路如下: 基于TextView图文混排 使用方式: TextView textView = new TextVi ...

  5. 【JavaScript】富文本编辑器

    这是js写的富文本编辑器,还存在一些bug,但基本功能已经实现,通过这个练习,巩固了js富文本编辑方面的知识,里面包含颜色选择器.全屏.表情.上传图片等功能,每个功能实际对应的就是一个小插件啦 部分程 ...

  6. day82:luffy:课程详情页面显示&章节和课时显示&视频播放组件&CKEditor富文本编辑器

    目录 1.初始课程详情页面 2.视频播放组件 3.课程详情页面后端接口实现 4.课程详情页面-前端 5.CKEditor富文本编辑器 6.课程章节和课时显示-后端接口 7.课程章节和课时显示-前端 1 ...

  7. JS编写自己的富文本编辑器

    富文本编辑器,网上有很多功能齐全种类丰富的如百度的Ueditor,简单适用型的如WangEditor等等.在经过一番挑选后,我发现都不适用现在的项目,然后决定自己造轮子玩玩.富文本编辑器中主要涉及到J ...

  8. 浅析富文本编辑器框架Slate.js

    浅析富文本编辑器框架Slate.js 本文不是关于Slate.js使用入门的文章,如果还不了解该框架,建议先阅读下官方的文档:Slate官网文档 关于Slate的一些特性 不同于其他编辑器类的库,Sl ...

  9. 富文本编辑器UEditor自定义工具栏（三、自定义工具栏功能按钮图标及工具栏样式简单修改）

    导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...

随机推荐

  1. 使用runtime完成解档归档

    简单的创建一个Person对象,并声明几个属性 @interface Person : NSObject<NSCoding> // 归档问题 必须遵守该协议 /** */ @propert ...

  2. Java面试 - == 和 equals 的区别?

    ==:如果比较的对象是基本数据类型,则比较的是数值是否一致:如果比较的是引用数据类型,则比较的是对象的地址值是否一致. equals():equals()方法不能用于比较基本数据类型的对象,如果对象和 ...

  3. Lamda

  4. Azure经典虚拟机（Windows）如何监测单个磁盘的使用空间

    Azure云平台创建经典虚拟机(Windows)后,发现仪表板的监测项下默认是没有针对磁盘空间进行检测的指标的 本地机器安装Windows Azure Powershell模块,并通过如下命令登陆并查 ...

  5. 彻底理解JavaScript中的prototype、__proto__

    虽然在JavaScript里一切皆对象,但为了理解原型链系统,我们需要将JavaScript的对象分为对象和函数两大类.在此基础上,JavaScript的原型链逻辑遵从以下通用规则: 对象有__pro ...

  6. [DEBUG] Springboot打包jar/war后访问包外的路径

    ======================================================== 我是Ruriko,我爱这个世界:)

  7. goroutine基础

    程序1: package main import ( "fmt" "time" ) func test () { var i int for { fmt.Pri ...

  8. BZOJ4516 SDOI2016生成魔咒（后缀自动机）

    本质不同子串数量等于所有点的len-parent树上父亲的len的和.可以直接维护. #include<iostream> #include<cstdio> #include& ...

  9. sql注入测试(4)--如何防止该类缺陷发生

    检查用户输入的合法性,确信输入的内容只包含合法的数据,数据检查应当在客户端和服务器端都执行之所以要执行服务器端验证,是为了弥补客户端验证机制脆弱的安全性.在客户端,攻击者完全有可能获得网页的源代码,修 ...

  10. 改善C#程序的方法

    写在开头: http://www.cnblogs.com/luminji    157个建议_勘误表 一:属性 属性和方法一样.也可以是virtual和abstract. 条款2:运行时常量(read ...