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. H5手机端按钮点击一次却触发了多次点击事件

    方案:在点击事件方法中加入以下语句 event.stopPropagation();

  2. XMLHttpRequest Level2

    本文转自 http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html 感谢作者分享. XMLHttpRequest是一个浏览器 ...

  3. 多态、Object类和 JDK常用封装类型

    多态 定义:某一类事物的多种存在形态. 多态的体现:父类的引用指向了自己的子类对象.父类的引用也可以接收自己的子类对象. 多态的前提:必须是类与类之间有关系,要么继承,要么实现.通常还有一个前提,存在 ...

  4. .Net版SQLite无法访问网络位置的数据库文件-winOpen,os_win.c 36702异常

    最近一个C#小程序,希望将SQLite数据库放在网络共享的位置,让多个客户端同时访问.却发现SQLite连接不上该网络位置的数据库,而如果数据库在本地则一切正常. 例如将SQLite数据库 test. ...

  5. Android 自定义组件之如何实现自定义组件

    参考链接:http://blog.csdn.net/jjwwmlp456/article/details/41076699 简介 Android提供了用于构建UI的强大的组件模型.两个基类:View和 ...

  6. 解决问题：zipimport.ZipImportError: can't decompress data; zlib not available

    场景描述 需要从源代码编译安装python-3.6.1的版本 环境描述 python-2.7.5, Centos 7 步骤重复 解压缩python-xx.tgz 进入源代码目录 ./configure ...

  7. 如何回复在Git中误操作删除的文件？

    不小心的操作,删除了某些文件 某天很高大地用上了git来管理版本,分布式版本管理工具,好是好,但是还不是很熟悉,结果某天一不小心就从本地仓库中删除了若干个文件,该如何找回这些文件呢? 调查现场 git ...

  8. SVG 总结

    //文件名:11.svg<?xml version="1.0" encoding="UTF-8" ?> <!--XML NameSpace:名 ...

  9. tomcat8启动慢原因及解决办法

    tomcat8在linux下安装使用一段时间后启动非常慢,6分钟左右. 原因是一个随机数生成参数导致的. 处理如下: 修改catalina.sh .配置JRE使用非阻塞的Entropy Source ...

  10. bulkcopy实现批量插入与更新

    public static void UpdateData<T>(List<T> list, string TabelName) { DataTable dt = new Da ...