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. python fire库的使用

    一. 介绍 fire是python中用于生成命令行界面(Command Line Interfaces, CLIs)的工具,不需要做任何额外的工作,只需要从主模块中调用fire.Fire(),它会自动 ...

  2. 八 web爬虫讲解2—urllib库爬虫—ip代理—用户代理和ip代理结合应用

    使用IP代理 ProxyHandler()格式化IP,第一个参数,请求目标可能是http或者https,对应设置build_opener()初始化IPinstall_opener()将代理IP设置成全 ...

  3. day26 CRM search && 增删改查

    代码:https://github.com/liyongsan/git_class/tree/master/day26/LuffyCRM ORM查询之Q学习 http://www.cnblogs.co ...

  4. cmd 操作WinService

    1.运行--〉cmd:打开cmd命令框 2.在命令行里定位到InstallUtil.exe所在的位置 InstallUtil.exe 默认的安装位置是在C:\Windows\Microsoft.NET ...

  5. Gif图片验证码类

    新开发的安全验证码类,支持生成Gif图片验证码(带噪点,干扰线,网格,随机色背景,随机自定义字体,倾斜,Gif动画). 上图: 字体及字体文件的路径需要在类中$FontFilePath及$FontFi ...

  6. C/C++ 安全编码 —— 指针与内存

    1. 仿踩内存 if (buf[len - 1] != 0x5A) { return; }

  7. GitLab non-standard SSH port

    /***************************************************************************** * GitLab non-standard ...

  8. 【MFC】断言（ASSERT)的用法

    摘自:Moondark  http://www.cnblogs.com/moondark/archive/2012/03/12/2392315.html 断言(ASSERT)的用法   我一直以为as ...

  9. 细说 const

    1.const 简单应用 const int pp=0 //pp 为整形常量,不能修改 还有另外一种不常用的方式 但是最容易误导 int const pp=0 //pp 为整形常量,不能修改 记住这两 ...

  10. Java连接Mysql的基本用法

    Java连接数据库(以MySQL为例)2007-04-05 02:23           这篇文章主要以MySQL为例讲下Java如何连接到数据库的. 当然,首先要安装有JDK(一般是JDK1.5. ...