<!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. SQLite基础-1.SQL简介

    目录 一.SQLite简介 二.SQLite命令 三.SQLite安装 在 Windows 上安装 SQLite 四.SQLite 点命令 一.SQLite简介 最近在使用Python+Flask框架 ...

  3. Office常用快捷键大全，包含 Word、Excel、PowerPoint

    功能 快捷键 查找文字.格式和特殊项 Ctrl+G 使字符变为粗体 Ctrl+B 为字符添加下划线 Ctrl+U 删除段落格式 Ctrl+Q 复制所选文本或对象 Ctrl+C 剪切所选文本或对象 Ct ...

  4. Linux-BSP-驱动-面试题大全

    1. 了解Linux的那个驱动?举例讲讲. a.驱动注册过程:通过platform bus, platform_device_register和platform_driver_register时都会在 ...

  5. docker 实践一：简介和安装

    docker 的简介 docker 绝对是这几年来的重量级开源软件,它是使用 Go 实现的开源容器项目,分属于虚拟化技术. docker 和 虚拟机 docker 作为一种轻量级的虚拟化方式,在运行应 ...

  6. CI/CD/Jenkins

    Continuous Integration, Continuous Delivery & Deployment (CI/CD) 持续集成.持续部署&持续交付. Jenkins就是一个 ...

  7. （六）easyUI之对话框窗口

    一.拥有HTML的对话框 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  8. （一）weblogic11g的安装配置

    一.安装 找到weblogic安装包,小编这里用的是wls1034_win32.exe版本,双击打开 完成后运行快速启动,打开快速启动界面,配置weblogic.如果没有打开,还可以在开始菜单中找到q ...

  9. Entity framework 意外删除了表，如何在不影响其它表的情况下恢复回来

    关于EntityFramework数据迁移原理 查询数据库的表"__MigrationHistory",遍历代码库的Migrations文件夹下的所有文件,如果文件不在__Migr ...

  10. 验证 vector = 是深拷贝还是浅拷贝

    #include <vector> using namespace std; int main() { int w=1920; int h = 1080; vector<int> ...