HLuseEditor使用方法

本文介绍HLuseEditor的安装和使用

更新于: 2023-05-09 23:20:36 查看: 450

发布于: 2021-9-13 14:43 发布者: 大米

使用前提

  • Bootsrap5环境；
  • 引入Bootsrap图标 https://icons.getbootstrap.com/；
  • 需支持 Popper
对于HLuse的应用开发无需关心这些已经全部支持
JS引入：

1.通过下载源文件引入

<script src="HLuseEditor.min.js"> </script>
以上引入方法，需要先下载HLuseEditor文件到您的电脑或者服务器。
2.通过CDN方式的引用
<script type="text/javascript" language="javascript" src="https://cdn.jsdelivr.net/gh/fht21/HLuseEditor/HLuseEditor.min.js"></script>

3.在HLuse应用中使用

<script type="text/javascript" language="javascript" src="{STATICURL}editor/HLuseEditor.min.js?{VERHASH}"></script>
该方法只限于HLuse的应用使用

创建HLTML模板

1.在form表单内创建

<textarea name="editorid" id="editorid"  style="display: none;" ></textarea>
注意这里id使用的是editorid必须上下文保持一致，style="display: none;"用来隐藏表单textarea

2.在需要的地方构建

<div id="editorid_editor"><div><div id="editorid_editor_menu"><div class="btn-group btn-group-sm me-1 my-1"></div></div></div></div>
<div class="btn-group btn-group-sm me-1 my-1"></div>是放置自定义工具栏的地方，如果不需要可以省略

初始化编辑器

HLE.init('editorid')
必须在Bootstrap的JS加载完毕后进行初始化，如果你Bootstrap的JS在后面加载，可以在页面加载后初始化，例如在HLuse应用中我们这样初始化：
$(function() { 
     HLE.init('editorid')
});


获取编辑器内容

1.获取编辑器的HTML

 HLE.getHtml();

2.获取编辑器的文本

HLE.getText();

3.同步内容到textarea

HLE.hync();
对于直接提交的表单，我们需要先同步内容到textarea

向编辑器插入自己生成的内容

HLE.insertText(html);
有时候你需要插入自己生成的HTML你只需要关注这个接口


扫描二维码，手机查看
声明：部分数据/图片来源互联网，不代表Hluse Doc.,真实性请妥善甄别。
收藏 邀请