Layui富文本

it2024-07-26  36

下面介绍两种编辑器 number1

<div class="layui-form-item" id="content"> <label class="layui-form-label layui-form-required layui-required">描述</label> <div class="layui-input-inline" style="margin-left: 150px;width:1400px;top:-20px"> <!-- <textarea name="content1" class="layui-textarea" id="demoEditor"></textarea> --> <textarea id="demo" name="content" lay-verify="content" class="layui-textarea layui-content field-content" ></textarea> </div> <div class="layui-form-mid layui-word-aux">必填项</div> </div> <script> layui.use(['upload', 'func', 'form','laydate','admin','layedit'], function() { var layedit = layui.layedit; }) layedit.set({ uploadImage: { url: '{:url("upload")}' //接口url ,type: '' //默认post } }); //注意:layedit.set 一定要放在 build 前面,否则配置全局接口将无效。 var index1 = layedit.build('demo'); //建立编辑器 //提交content内容 form.verify({ content: function(value) { return layedit.sync(index1); } }); </script>

number2

<div class="layui-form-item" id="content"> <label class="layui-form-label layui-form-required layui-required">描述</label> <div class="layui-input-inline" style="margin-left: 150px;width:1400px;top:-20px"> <textarea id="demoEditor" name="content" class="layui-textarea layui-content field-content" lay-verify="content"></textarea> </div> <div class="layui-form-mid layui-word-aux">必填项</div> </div> <script type="text/javascript" src="__PUBLIC_JS__/layui/tinymce/tinymce.min.js"></script> <script type="text/javascript" src="__PUBLIC_JS__/layui/tinymce/tinymce.min.js"></script> <script > form.on("submit(articleEditSubmit)",function (data) { admin.req("{:url()}",data.field,function(res){ if(res.code==0){ notice.msg(res.msg,{icon:2,timeout:1500}); }else{ admin.putLayerData('formOk', true); // 设置操作成功的标识 admin.putLayerData('msg', res.msg); // 设置操作成功的标识 admin.closeThisDialog(); // 关闭当前iframe弹窗 } },'POST'); return false; }) // 渲染富文本编辑器 tinymce.init({ selector: '#demoEditor', height: 525, branding: false, language: 'zh_CN', plugins: 'code print preview fullscreen paste searchreplace save link autolink image imagetools media table codesample lists advlist hr charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount', toolbar: 'fullscreen preview code | undo redo | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | formatselect fontselect fontsizeselect | link image media emoticons charmap anchor pagebreak codesample | ltr rtl', toolbar_drawer: 'sliding', images_upload_url: '{:url("upload")}', file_picker_types: 'image', setup: function (editor) { editor.on('change', function () { editor.save(); }); } }); </script>

备注 配置工具项 toolbar 比如emoticons 表情 配置工具栏之一

最新回复(0)