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. Linux：安装Zookeeper

    1.下载 wget http://mirror.bit.edu.cn/apache/zookeeper/zookeeper-3.5.3-beta/zookeeper-3.5.3-beta.tar.gz ...

  2. Selenium with Python 010 - unittest 框架（又称PyUnit 框架）

    unittest进行python代码单元测试 calculator.py--被测试类 #!/usr/bin/env python # -*- coding: utf-8 -*- # 将要被测试的类 c ...

  3. [eShopOnContainers 学习系列] - 02 - vs 2017 开发环境配置

    [eShopOnContainers 学习系列] - 02 - vs 2017 开发环境配置 https://github.com/dotnet-architecture/eShopOnContain ...

  4. 用Spring和c3p0工具简单的实现增删改查

    1.导入Spring和c3p0的jar包 2.配置beans.xml文件 <?xml version="1.0" encoding="UTF-8"?> ...

  5. Qt之图形（QPainterPath）

    简述 QPainterPath 类(绘图路径)提供了一个容器,用于绘图操作,可以创建和重用图形形状. 绘图路径是由许多图形化的构建块组成的对象,例如:矩形.椭圆.直线和曲线.构建块可以加入在封闭的子路 ...

  6. flowable 6.1.2 命令行完成请假审批流程的例子

    一.创建 eclipse maven新项目 1.设置项目选项 其中,Create a simple project 要选中. 2.填写项目包名和项目名称 这里的Group id:必须是 org.flo ...

  7. Arcgis Add-In开发入门实例

    作为一个本科侧重于应用,工作之后却做了开发的程序员来说,做GIS,开发应该是一门必修课,只是,苦于各种原因吧,做GIS应用的人会开发的很少,做GIS开发的大部分都是计算机出身,痛心疾首啊-- 不好意思 ...

  8. Java局域网对战游戏、天气预报项目

    功能 1.天气预报 2.局域网对战 展示  java学习群669823128   部分源码 package game.weather; import java.util.HashMap; public ...

  9. SQLServer流水号自动生成

    最近给客户做生成条码的功能时,碰到个问题,需要根据数量自动生成流水号,然后加上客户指定的前缀,组合成条码. 折腾了一会,最后通过个存储过程实现. --@Prefix 指定前缀,@InitialVal ...

  10. 牛顿方法的简单MATLAB编程示意

    function y = f(x) y=(x-2)^2; function x0 syms x; x0=rand; while f(x0)~=0 x0=-f(x0)/vpa(subs(diff((x- ...