<!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. sas（Serial Attached SCSI）技术详解

    1.什么是SAS 即串行SCSI技术,是一种磁盘连接技术,它综合了并行SCSI和串行连接技术(FC,SSA,IEEE1394)的优势,以串行通讯协议为协议基础架构,采用SCSI-3扩展指令集,并兼容S ...

  2. nginx 为什么受欢迎？

    优势:1.高并发 2.可扩展性 3.高可靠性 4.热部署 5.BSD许可证 如何做到以上优势呢?高并发:异步io非阻塞,占用更少资源,支持更多连接可扩展:模块化设计,第三方模块多高可靠:核心框架代码的 ...

  3. 【转载】熟练利用google hacking来辅助我们快速渗透

    转载于:https://klionsec.github.io/2014/12/14/search-hacking/?tdsourcetag=s_pcqq_aiomsg 0x01 google hack ...

  4. [转帖]Keccak简介

    Keccak简介 https://blog.csdn.net/chengqiuming/article/details/82819769 2018年09月23日 08:04:40 cakincqm 阅 ...

  5. 使用Struts2实现图片上传和拦截器

    今天来分享一个图片上传 现在很多小项目里面基本上都有要显示图片的功能,所以呢图片上传是基本要掌握的啦 一般的图片上传原理就是从本地选择一张图片然后通过io流发布到服务器上去 上传方案基本有三种: 1. ...

  6. asp.net core-3.应用程序部署到iis

    asp.net core在部署到iis 上的时候,iis服务器要装一个AspNetCoreModule,网站—>模块  具体下载地址可以去网上搜索https://www.nuget.org/pa ...

  7. 最全APP安装/卸载/更新测试点

    1.安装查看在安装过程中存在的提示信息是否明确,意思是否明确在安装过程中,点击取消按钮,能否正常退出安装程序,软件是否可用.安装时是否识别有SD卡,并默认安装到sd卡中安装过程中,接听电话或者短信,安 ...

  8. Task执行多次

    项目中,曾经出现过启动时数据库连接数瞬间增大,当时并没有注意该问题. 后期,由于Task任务多次执行,才着手查看这个问题,经排查,由于tomcat中webapp配置多次,导致webapp被扫描多次(配 ...

  9. C#记录日志到本地文件工具类

    using System; using System.Diagnostics; using System.IO; using System.Threading; using System.Web; n ...

  10. 解决Cannot change version of project facet Dynamic web module to 2.5（转）

    我们用Eclipse创建Maven结构的web项目的时候选择了Artifact Id为maven-artchetype-webapp,由于这个catalog比较老,用的servlet还是2.3的,而一 ...