<!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. springboot与shiro在html中使用shiro标签

    上一章讲环境搭建 springboot与shiro和mybatis和mysql 现在讲html中怎么使用shiro标签,这里是基于上一章讲的 在pom文件引入依赖 <dependency> ...

  2. [转帖]从零开始入门 K8s：应用编排与管理：Job & DaemonSet

    从零开始入门 K8s:应用编排与管理:Job & DaemonSet https://www.infoq.cn/article/KceOuuS7somCYbfuykRG 陈显鹭 阅读数:193 ...

  3. 针对Quizii的基本抓包实验(Fiddler)

    本实验仅限于了解POST和GET几种常规数据获取方案的学习.简单的来说,POST就是向服务器发送数据,GET会向服务器请求数据.可以参考https://www.zhihu.com/question/2 ...

  4. 跳转语句 break；continue; return; goto 区别用法

    C语言是按顺序执行语句的语言——一个接一个.即使它有条件语句或循环语句,程序的流程也是自上而下的.没有顺序流的随机跳转或跳转.但我们的程序是为了满足任何现实世界的需求,一个接一个地执行永远不会很直接. ...

  5. SAS学习笔记19 SAS删除空格函数（left、right、trim、strip、compress、compbl函数）

  6. uboot 代码执行顺序

    ref:http://blog.chinaunix.net/uid-30352139-id-5128405.html uboot: 2014.07 1.1    U-boot相关文件 boards.c ...

  7. 17-MySQL DBA笔记-应用程序调优

    第17章 应用程序调优 本章将主要讲述应用程序调优的一些方法和步骤,应用程序调优的领域很广,本章主要关注的是涉及数据库方面的调优. 在进行性能分析之前,我们先要熟悉应用的角色,它是什么版本的,做什么的 ...

  8. ASP.NET Core 3.0 入门

    原文:ASP.NET Core 3.0 入门 课程简介 与2.x相比发生的一些变化,项目结构.Blazor.SignalR.gRPC等 课程预计结构 ASP.NET Core 3.0项目架构简介 AS ...

  9. metronic-v4.6 使用经验

    1.弹框居中显示 上下居中 需要上下居中引用  bootstrap-modalmanager.js 左右居中 修改 bootstrap-modal.js 中 this.$element.css('ma ...

  10. 转录组测序（RNA-seq）技术

        转录组是某个物种或者特定细胞类型产生的所有转录本的集合.转录组研究能够从整体水 平研究基因功能以及基因结构,揭示特定生物学过程以及疾病发生过程中的分子机理,已广泛应 用于基础研究.临床诊断和药 ...