layui框架富文本编辑器监听内容change事件

前言：

      layui框架目前2.x版本中未增加富文本编辑器的相关事件的API说明。所以当我们需要使用一些监听事件时，就没有那么快速使用当前富文本编辑器。

编辑器监听内容改变事件具体实现：

1. 首先编辑器初始化

<script>
 //加载模块
    layui.use(['layer', 'layedit'], function () {
        var layer = layui.layer
            , layedit = layui.layedit;

        //编辑器初始化，根据自身需要添加对应的工具
        var index = layedit.build('LAY_demo_editor', {
            tool: ['strong', 'italic', 'underline', 'left', 'center', 'right']
        });
    });
</script>

  2.HTML页面加载之后，找到对应的HTML元素，加载之后实例如下：

<div class="layui-layedit">
    <div class="layui-unselect layui-layedit-tool">
        <i class="layui-icon layedit-tool-b" title="加粗" lay-command="Bold" layedit-event="b"></i>
        <i class="layui-icon layedit-tool-i" title="斜体" lay-command="italic" layedit-event="i"></i>
        <i class="layui-icon layedit-tool-u" title="下划线" lay-command="underline" layedit-event="u"></i>
        <i class="layui-icon layedit-tool-left" title="左对齐" lay-command="justifyLeft" layedit-event="left"></i>
        <i class="layui-icon layedit-tool-center" title="居中对齐" lay-command="justifyCenter" layedit-event="center"></i>
        <i class="layui-icon layedit-tool-right" title="右对齐" lay-command="justifyRight" layedit-event="right"></i>
    </div>
    <div class="layui-layedit-iframe">
        <iframe id="LAY_layedit_1" name="LAY_layedit_1" textarea="LAY_demo_editor" frameborder="0"
                style="height: 280px;"></iframe>
    </div>
</div>

  3.iframe元素是整个编辑器的元素，然后通过浏览器页面开发者模式，我们可以看到iframe中还包含一个完整HTML元素模块，其body里的内容就是输入的内容

4.然后再采用JavaScript语法监听内容change事件即可

<script>
 //加载模块
    layui.use(['layer', 'layedit'], function () {
        var layer = layui.layer
            , layedit = layui.layedit;

        //编辑器初始化，根据自身需要添加对应的工具
        var index = layedit.build('LAY_demo_editor', {
            tool: ['strong', 'italic', 'underline', 'left', 'center', 'right']
        });

          //富文本编辑器改变事件
        $(document.getElementById("LAY_layedit_" + index)).contents().find("body").on('change', function () {
           layer.alert("富文本编辑器change事件触发", {icon: 5});
        });
    });
</script>