HLuseEditor

一款基于Bootstrap的所见即所得web富文本编辑器

HLuse的一个小小功能之一，同时适用于移动端和pc端

最新版本: 1.0.2 GitHub Gitee

有没更轻量？

20KB

得益于Bootstrap的加持，所有文件的压缩包不到20KB，手机端、电脑端自适应

使用方便

专题文档

导入HLuseEditor的js文件后，在想显示的地方写入HTML模板,一条js语句完成调用

灵活定制

HLE.init('editorid')

所有工具都可以自由定制，可以自由选择扩展，支持自定义语言包，多色矢量表情

任意扩展

HLE.insertText(html)

只需关注一个API接口，你想插入视频，图片，附件，商品还是直播随你！真自由发挥

<h1>
<a id="user-content-hluseeditor" class="anchor" href="#hluseeditor">
</a>HLuseEditor</h1>
<h4>
<a id="user-content-介绍" class="anchor" href="#%E4%BB%8B%E7%BB%8D">
</a>介绍</h4>
<p>
    HLuseEditor是一款基于Bootsrap所见即所得富文本web编辑器，支持手机触屏，具有轻量，使用便利，易扩展，多语言支持，注重用户体验等特点。
HLuseEditor是 <strong>HLuse</strong> 的一个小功能，独立出来开放使用，得益于Bootsrap的支持，全程序只有两个JS文件共约 <strong>20K</strong> 。
</p>
<h4>
<a id="user-content-使用前提" class="anchor" href="#%E4%BD%BF%E7%94%A8%E5%89%8D%E6%8F%90">
</a>使用前提</h4>
<ol>
<li>Bootsrap5环境；</li>
<li>引入Bootsrap图标<a href="https://icons.getbootstrap.com/" rel="nofollow">
https://icons.getbootstrap.com/</a>；</li>
<li>需支持 <strong>Popper</strong>
</li>
</ol>
<h4>
<a id="user-content-安装教程" class="anchor" href="#%E5%AE%89%E8%A3%85%E6%95%99%E7%A8%8B">
</a>安装教程</h4>
<ol>
<li>引入JS：
<code>&lt;script src=&quot;HLuseEditor.min.js&quot;&gt;
&lt;/script&gt;</code>
</li>
<li>初始化：
<code>HLE.init('editorid')</code>
</li>
<li>在需要地方创建HTML模板：</li>
</ol>
<pre><code>&lt;textarea name="editorid" id="editorid"  style="display: none;" &gt;初始化文本&lt;/textarea&gt;
&lt;div id="editorid_editor"&gt;&lt;div&gt;&lt;div id="editorid_editor_menu"&gt;&lt;div class="btn-group btn-group-sm me-1 my-1"&gt;自定义工具(非必须可省略)&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</code></pre>
<h4>
<a id="user-content-使用说明" class="anchor" href="#%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E">
</a>使用说明</h4>
<ol>
<li>获取HTML:&nbsp;<code>HLE.getHtml();</code></li>
<li>获取文本:<code> HLE.getText();</code></li>
<li>插入HTML：<code>HLE.insertText(html);</code></li>
</ol>
<h4>
<a id="user-content-关于自定义" class="anchor" href="#%E5%85%B3%E4%BA%8E%E8%87%AA%E5%AE%9A%E4%B9%89">
</a>关于自定义</h4>
<ol>
<li>自定义工具按钮的样式参考 Bootstarp 的<b> btn-group</b>组件；</li>
<li>点击自定义按钮触发你自定义的事件，然后组织成你想要插入或者替换的html,最后调用HLE.insertText(html);</li>
</ol>
<h4>
<a id="user-content-特色" class="anchor" href="#%E7%89%B9%E8%89%B2">
</a>特色</h4>
<ol>
<li>所有功能支持手机触屏操作，但是由于手机上无法完成选择字段所以有些功能不太方便（建议手机上只开启必要功能）；</li>
<li>大部分功能（包括你自定义）支持源码模式下编辑；</li>
<li>支持EXCEL片段转表格（合并在表格功能）；</li>
<li>在Bootstarp架构下，你所编辑几乎是99%实际表现效果，不增加额外的资源消耗；</li>
<li>脱程式自定义，你无需关心程序本身，只需要明确你要插入/替换什么；最后调用<code>HLE.insertText(html)</code>;</li>
<li>更多使用方法见文档中心：<a href="https://doc.hl05.com/" rel="nofollow">
https://doc.hl05.com/</a>
</li>
</ol>