<!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. jqGrid通过行id获取行对象

    $("#jqGrid").jqGrid('getRowData',rowid);

  2. C#学习笔记06--类/对象/访问修饰符/方法

    编程思想   1.面向过程   面向过程是要把问题解决的过程分成有一定顺序的不同步骤, 然后按照步骤一步步的将问题解决.   2.面向对象   面向对象解决问题的思路是先分析问题中所涉及的对象, 然后 ...

  3. 内网环境下搭建maven私服小技巧

    背景 最近接手一个其他公司的项目,因为工程中使用了maven,而且里面有很多他们自己封装很多自己的构件(就是jar.war等等),需要将他们maven私服迁移到我们的私服上去,因为网络环境不通,所以不 ...

  4. CentOs7环境下手动配置JDK7

    下载: JDK7下载地址:http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-javase7- ...

  5. Hystrix（下），使用公共降级类

    使用Hystrix熔断(下) 在一个分布式系统里,一个服务依赖多个服务,可能存在某个服务调用失败,         比如超时.异常等,如何能够保证在一个依赖出问题的情况下,不会导致整体服务失败,   ...

  6. 切片（Slice）

    Python提供了切片(Slice)操作符:可以一次取出多个列表元素 L[0:3]表示,从索引0开始取,直到索引3为止,但不包括索引3.0可以省略:L[:3] L[:]:就是整个列表   补充: 前1 ...

  7. SAS学习笔记15 SAS导入数据（import txt csv xlsx spss）

  8. 第三代PacBio测序技术的测序原理和读长

    针对PacBio单分子测序——第三代测序技术的测序原理和读长     DNA基因测序技术从上世纪70年代起,历经三代技术后,目前已发展成为一项相对成熟的生物产业.测序技术的应用也扩展到了生物.医学.制 ...

  9. XCode下在不同位置声明变量的用法（转）

    XCode下在不同位置声明变量的用法 方式一:直接在.h文件@interface中的大括号中声明. @interface Test : NSObject { NSString *str; // 私有变 ...

  10. css：display：grid布局

    简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...