1. 效果图

  2. 代码

<!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>Document</title>

    <style>

        .editButtons span{

            display:inline-block;

            white-space:nowrap;

        }

        [data-edit] {

            float:left;

            border:0;

            font: 12px/1 monospace;

            background:#ddd;

            padding:4px 8px;

        }

        [contenteditable] {

            padding:4px 16px;

            background:#eee;

        }

    </style>

</head>

<body>

    <div class="editButtons">

        <span title="STYLES">

            <!-- 加粗 -->

            <button data-edit="bold"><b>B</b></button>

            <!-- 斜体 -->

            <button data-edit="italic"><i>I</i></button>

            <!-- 下划线 -->

            <button data-edit="underline"><u>U</u></button>

            <!-- 中划线 -->

            <button data-edit="strikeThrough"><s>S</s></button>

        </span>

        <span title="TEXT FORMAT">

            <!-- 字体标签设置 -->

            <button data-edit="formatBlock:p">P</button>

            <button data-edit="formatBlock:H1">H1</button>

            <button data-edit="formatBlock:H2">H2</button>

            <button data-edit="formatBlock:H3">H3</button>

        </span>

        <span title="FONT SIZE">

            <!-- 字体大小设置 -->

            <button data-edit="fontSize:1">s</button>

            <button data-edit="fontSize:3">M</button>

            <button data-edit="fontSize:5">L</button>

        </span>

        <span title="LISTS">

            <!-- 列表格式设置 -->

            <button data-edit="insertUnorderedList">UL</button>

            <button data-edit="insertOrderedList">OL</button>

        </span>

        <span title="ALIGNMENT">

            <!-- 文本对齐设置 -->

            <button data-edit="justifyLeft">⇤</button>

            <button data-edit="justifyCenter">↔</button>

            <button data-edit="justifyRight">⇥</button>

        </span>

        <span title="CLEAR FORMATTING">

            <!-- 清除文本 -->

            <button data-edit="removeFormat">&times;</button>

        </span>

        <span title="COPY">

            <!-- 复制选中文本 -->

            <button data-edit="copy">C</button>

        </span>

    </div>

    <div contenteditable id="textbox">

        <p>文本编辑器</p>

    </div>

</body>

<script>

    document.querySelectorAll("[data-edit]").forEach(btn =>

        btn.addEventListener("click", function (ev) {

            ev.preventDefault();

            console.log(this.getAttribute("data-edit"))

            const cmd_val = this.getAttribute("data-edit").split(":");

            if(cmd_val[0] == 'copy'){ // 复制选中的文本

                document.execCommand(cmd_val[0]);

            }else{

                document.execCommand(cmd_val[0], false, cmd_val[1]);

            }

        })

    );

</script>

</html>

用纯js实现一个文本编辑器的更多相关文章

  1. js 判断一个文本框是否获得焦点

    1.js 判断一个文本框是否获得焦点 // 可以用document.activeElement判断 // document.activeElement表示当前活动的元素   // 查找你要判断的文本框 ...

  2. 如何使用纯js实现一个带有灰色半透明背景的弹出框

    原文如何使用纯js实现一个带有灰色半透明背景的弹出框 // 加入透明背景 var body = document.body;var backgroundDiv = document.createEle ...

  3. 手把手教你使用 js 实现一个 Canvas 编辑器

    手把手教你使用 js 实现一个 Canvas 编辑器 拖拽 缩放,等比缩放 导出 image 模版 撤销,重做 OOP,封装,继承,多态 发布库 CI/CD (gitlab/github) ... h ...

  4. draft.js开发富文本编辑器

    写在前头的话 在react中去寻找一个好用的富文本编辑器网上很少有推荐的,搜到的也只有一些个人不成熟的作品,慢慢发现网上比较推荐的一个东东叫做draft.js. 这个东西在网上可以找到的教程也是手指头 ...

  5. js中的文本编辑器控件KindEditor---那些打酱油的日子

    使用文本编辑器控件KindEditor渲染文本域页面显示 this.sync()同步KindEditor的值到textarea文本框 editor.isEmpty()判断文本域是否是空 editer. ...

  6. js处理富文本编辑器转义、去除转义、去除HTML标签

    富文本编辑器生成的HTML标签,进行转义,然后写入数据库,防止脚本注入: function htmlEncode(value){ return $('<div/>').text(value ...

  7. js中的文本编辑器控件KindEditor

    使用文本编辑器控件KindEditor渲染文本域页面显示 this.sync()同步KindEditor的值到textarea文本框 editor.isEmpty()判断文本域是否是空 editer. ...

  8. Vue.js示例：文本编辑器。使用_.debounce()反抖动函数

    Markdown编辑器 https://cn.vuejs.org/v2/examples/index.html 新知识: Underscore.js库 用于弥补标准库,方便了JavaScript的编程 ...

  9. Qt学习笔记-制作一个文本编辑器

    创建一个MainWindow工程.添加一个TextEdit.垂直布局. 在menu上面创建新的action. 在新建的时候判断文本有没有被修改. 下面,将某个文件打开读入到TextEdit中. 保存文 ...

随机推荐

  1. Solr工具类

    import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.spr ...

  2. Redis 安装，配置，简介，数据类型（一）

      Redis 安装 Window 下安装 下载地址:https://github.com/MSOpenTech/redis/releases. Redis 支持 32 位和 64 位.这个需要根据你 ...

  3. DDOS SYN Flood攻击、DNS Query Flood， CC攻击简介——ddos攻击打死给钱。限网吧、黄网、博彩，，，好熟悉的感觉有木有

    摘自:https://zhuanlan.zhihu.com/p/22953451 首先我们说说ddos攻击方式,记住一句话,这是一个世界级的难题并没有解决办法只能缓解 DDoS(Distributed ...

  4. Node多进程相关

    现状: 目前使用child_process.fork实现多进程,一个center.js负责任务分配及相关状态管理,一个worker.js负责任务执行. center.js结构: 1) 一个task_q ...

  5. 【python】python内存管理摘要

    a = 1 id(a)  == id(1) 每次退出ipython重新进入,这个Id都会不一样 sys.getrefcount(a) 可以计数某个对象的引用次数,是原来的次数+1 垃圾回收 使用gc包 ...

  6. Android 之Navicat for SQLite 数据库介绍

     Navicat for SQLite 是一套专为SQLite 设计的强大数据库管理及开发工具 Navicat for SQLite 是一套专为SQLite 设计的强大数据库管理及开发工具.它可以 ...

  7. SlowHTTPTest-慢速DoS攻击

    Slowhttptest是一个依赖于实际HTTP协议的Slow HTTP DoS攻击工具,它的设计原理是要求服务器所有请求被完全接收后再进行处理. SlowHTTPTest是一款对服务器进行慢攻击的测 ...

  8. HDU - 6333：Harvest of Apples （组合数前缀和&莫队）

    There are n n apples on a tree, numbered from 1 1 to n n . Count the number of ways to pick at most ...

  9. bzoj 3124 直径

    Written with StackEdit. Description 小\(Q\)最近学习了一些图论知识.根据课本,有如下定义. 树:无回路且连通的无向图,每条边都有正整数的权值来表示其长度.如果一 ...

  10. 使用Gson轻松解决复杂结构的Json数据解析

    转载请注明来源: http://blog.csdn.net/kjunchen/article/details/50961803 JSON简介 JSON(JavaScript Object Notati ...