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

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

参考网址:

  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>

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

经验分享 程序员 微信小程序 职场和发展