tiny editor

小编辑

用香草JavaScript编写的小型HTML丰富的文本编辑器

目标

创建一个小于5 kb（压缩）库，该库可以将HTML元素用作普通旧Vanilla JavaScript中的丰富文本编辑器。

支持

如果您使用并喜欢此库，请随时支持我的开源项目。

如何安装

 npm install tiny-editor

或直接在HTML文档末尾加载捆绑文件。

 <script src="https://unpkg.com/tiny-editor/dist/bundle.js"></script>

如何使用

1. 在您的HTML文档中引用编辑库
2. 将data-tiny-editor属性添加到要转换为编辑器的HTML元素

如何动态创建编辑器

使用导出的函数window.__tinyEditor.transformToEditor() ，它是您要转换为编辑器的第一个参数（通常是a <div> ）。有关示例，请参阅/public/index.html 。

如何提取格式的文本

在编辑器HTML元素上聆听input事件。

 document
  .querySelectorAll('[data-tiny-editor]')
  .forEach(editor =>
    editor.addEventListener('input', e => console.log(e.target.innerHTML)
  )
);

如何自定义

可以使用多种选项来自定义如何渲染小型编辑器。默认情况下，启用了每个选项。您可以使用数据属性禁用选项。

例如，您可以使用以下属性删除BOLD格式按钮：

 <div data-tiny-editor data-bold="no"></div>

选项

• data-formatblock="no" ：删除样式下拉列表
• data-bold="no" ：删除粗体按钮
• data-italic="no" ：：删除斜体按钮
• data-underline="no" ：删除下划线按钮
• data-fontname="no" ：删除字体下拉列表
• data-forecolor="no" ：：删除文本颜色按钮
• data-justifyleft="no" ：删除左对齐按钮
• data-justifycenter="no" ：删除中心对齐按钮
• data-justifyright="no" ：删除正确的对齐按钮
• data-insertorderedlist="no" ：删除编号列表按钮
• data-insertunorderedlist="no" ：删除子弹列表按钮
• data-outdent="no" ：删除减少凹痕按钮
• data-indent="no" ：删除增加的缩进按钮
• data-remove-format="no" ：删除清晰格式的按钮
• data-autofocus="no" ：从编辑器中删除自动对焦

支持的浏览器

支持现代浏览器（Chrome，Firefox，Edge等）。 Tiny编辑器在Internet Explorer上不起作用。