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. 使用Monkey对apk做稳定性测试

    认识Monkey 官方文档:https://developer.android.com/studio/test/monkey.html 什么是Monkey? Monkey是Android中的一个命令行 ...

  2. Ceph配置项动态变更机制浅析

    转自:https://www.ustack.com/blog/ceph%e9%85%8d%e7%bd%ae%e9%a1%b9%e5%8a%a8%e6%80%81%e5%8f%98%e6%9b%b4%e ...

  3. 【Python】序列的方法

    任何序列都可以引用其中的元素(item). 下面的内建函数(built-in function)可用于列表(表,定值表,字符串) #s为一个序列 len(s) 返回: 序列中包含元素的个数 min(s ...

  4. nmap基本使用方法

    nmap基本使用方法 我自己的使用: nmap 149.28.72.184 Starting Nmap 7.70 ( https://nmap.org ) at 2018-06-15 16:53 CS ...

  5. Java8_02_lambda表达式

    一.前言 这一节我们来了解下lambda表达式,主要关注以下几点: 行为参数化 匿名类 Lambda 表达式 方法 引用 二.行为参数化 1.概念 行为参数化(behavior parameteriz ...

  6. 理解RESTful风格（转）

    原文链接:http://www.ruanyifeng.com/blog/2011/09/restful.html 越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件 ...

  7. Go开发Struct转换成map两种方式比较

    最近做Go开发的时候接触到了一个新的orm第三方框架gorose,在使用的过程中,发现没有类似beego进行直接对struct结构进行操作的方法,有部分API是通过map进行数据库相关操作,那么就需要 ...

  8. hibernate缓存机制详解

    hiberante面试题—hibernate缓存机制详解   这是面试中经常问到的一个问题,可以按照我的思路回答,准你回答得很完美.首先说下Hibernate缓存的作用(即为什么要用缓存机制),然后再 ...

  9. SSH框架(2)

    个人分类: Java面试   Struts 谈谈你对Struts的理解. 答: 1.struts是一个按MVC模式设计的Web层框架,其实它就是一个大大的servlet,这个Servlet名为Acti ...

  10. yarn 管理nextjs 项目

     预备环境 nodejs npm 1. yarn 安装 npm install -g yarn 2. nextjs 项目初始化 yarn add next react react-dom 3. 配置n ...