当前位置:网站首页>使用Ts从零实现以一个简易编辑器

使用Ts从零实现以一个简易编辑器

2020-11-10 15:10:54 Jere

小目标

  1. 使用ts从零实现一个简单的富文本编辑器
  2. 初步实现“设置标题”,“加粗”,“设置颜色”这几个基本功能

知识准备

  1. contenteditable属性

    给任何一个元素加上contenteditable="true" 便可使其可编辑,由此为基础便可实现一个简单的富文本编辑器了。

    <div contenteditable="true"></div>
  2. Document.execCommand()

    当HTML文档切换到designMode时,它的文档对象将公开一个execCommand方法来运行操作当前可编辑区域的命令,如表单输入或可满足元素。

    document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

实现过程

  1. 初始化项目
    "lint": "eslint . --ext .js,.ts",
    "build": "webpack --env production",
    "start": "webpack-cli serve"

    基于webpack搭建一个基础项目,yarn start 用于本地开发。yarn build 用于构建生产文件。

  2. 确定简易富文本编辑器的调用方式
    import Editor from '../src/editor';
    
    new Editor('#editor_root', {
      style: {
        height: '300px',
      },
    });
  3. 初始化编辑器结构

    image-20201110140645515

  4. 实现编辑器菜单

    image-20201110140958264

总结

  1. 简易富文本编辑器的基本功能已实现
  2. webpack目前尚不支持export library 为es6 module
  3. 尚未添加单元测试
  4. document.execCommand已被标记为Obsolete

源码地址

版权声明
本文为[Jere]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000037785814