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上不起作用。