一、 layui富文本框layedit的使用及内容的禁用

时间:2024-05-31 07:42:12
  • layui富文本框layedit的使用及内容的禁用

参考网址:https://www.layui.com/doc/modules/layedit.html

  1. 使用。官网实例展示

<textarea id="demo" style="display: none;"></textarea>

<script>

layui.use('layedit', function(){

  var layedit = layui.layedit;

  layedit.build('demo'); //建立编辑器

});

</script>

 

实际应用中实例展示

<!--系统维护公告详情页面-->

<!--#include virtual ="include/header.html"-->

<body>

<div class="layui-fluid larry-wrapper">

    <section class="panel panel-padding">

        <form class="layui-form layui-form-pane form-conmon">      

            <div class="layui-form-item layui-form-text layui-form-item-sm" style="margin: 10px;">

                <label class="layui-form-label">公告内容</label>

                           <!-- 跟那些过往的编辑器一样,你需要放置一个标签(一般为textarea文本域)作为编辑器的目标元素,然后调用 layedit.build('id') 即可,如下所示:-->

                <div class="layui-input-block">

                    <textarea id="content" name="content" class="layui-textarea"></textarea>

                </div>

            </div>

        </form>

    </section>

</div>

</body>

<!--#include virtual ="include/version.html"-->

<script type="text/javascript">

    layui.use(['jqform', 'laytpl', 'layer', 'jquery', 'form', 'layedit', 'jqajax'], function () {

        var tpl = layui.laytpl,

            $ = layui.jquery,

            form = layui.form,

            layer = layui.layer,       

            layedit = layui.layedit,

            jqajax = layui.jqajax;        

 

        var index = layedit.build('content'); //建立编辑器

 

        //获取参数

        var id = getUrlParam("id");

        var ajax = new jqajax();

        ajax.options.method = 'POST';

        ajax.options.loading = false;//使用layedit后台会报“layedit is not defined”,一直去加载,这个可以停止加载

        ajax.options.contentType = "application/json;charset=UTF-8";

        ajax.options.url = "/sys/callboard/getNoticeById";

        ajax.options.data = {id: id};

        ajax.complete = function (ret, options) {

            var data = ret.data;

            var informationCode = data.informationCode;

            var title = data.title;

            var newTitle = title+"_"+informationCode;

            var content = data.content;

            if (ret.httpCode == 200) {

                $("#title").val(newTitle);

                /*内容不可编辑。此行必须在setContent函数前修改属性,否则属性设置不成功*/

                $("#LAY_layedit_1").contents().find("body[contenteditable]").prop("contenteditable",false);//jquery获取iframe里的内容

                layedit.setContent(index,content);

            }

        };

        ajax.ajax(ajax.options);

    });

</script>

</html>

将内容设为不可编辑前端代码

一、	layui富文本框layedit的使用及内容的禁用