LayUI富文本编辑器的使用--数据加载与编辑器创建的先后顺序
来源:互联网 发布:手机迅雷总是网络异常 编辑:程序博客网 时间:2024/05/16 18:33
Layui 首个版本发布于2016年秋,官网说明兼容人类正在使用的全部浏览器(IE6/7除外),可作为后台系统与前台界面的速成开发方案。 刚接触该框架是公司想做一套通用的业务系统出来,我们希望包含用户、部门、角色管理和日志等基础功能,然后同时又能方便地扩展。
跟那些过往的编辑器一样,需要放置一个标签(一般为textarea文本域)作为编辑器的目标元素,然后调用 layedit.build('id') 即可,如下所示:
codelayui.code
- <textarea id="demo" style="display: none;"></textarea>
- <script>
- layui.use('layedit', function(){
- var layedit = layui.layedit;
- layedit.build('demo'); //建立编辑器
- });
- </script>
然后会看到一个如下模样(部分工具Bar未配置出来),它跟Layui的所有存在体一样,兼容IE6/7以外的全部浏览器。
mysql中的text对应oracle中的clob又分为TINYTEXT, TEXT, MEDIUMTEXT,LONGTEXT, 都是表示数据长度类型的一种。语法:[ UNSIGNED ] mediumtextTINYTEXT: 256 bytesTEXT: 65,535 bytes => ~64kbMEDIUMTEXT: 16,777,215 bytes => ~16MLONGTEXT: 4,294,967,295 bytes => ~4GB 对添加的内容执行修改操作时需要从数据库中取出文本内容再回显至编辑器中,可是layedit中获取数据必须早于构建编辑器,否则无法在编辑器中显示出来。代码如下:<script type="text/javascript">var pages;var groups;var totalRows;var layer;var jQuery;var form;var laypage;var text;var layedit;var index;/**获取数据放在layui.use之前**/$(document).ready(function(){var $content = $("#emergencyPlan");var url = location.search;var paramStr = url.substr(url.indexOf("?")+1);if(paramStr.indexOf("emergencyId")>0){var param = paramStr.substr(paramStr.indexOf("emergencyId"));var emergencyId = param.substr(param.indexOf("=")+1);$.post("${ctx}/emergency/getEmergencyById.ht",{id:emergencyId},function(result){//alert(JSON.stringify(result));if(result.status == "0"){var vo = result.vo;returnValue = vo.emergencyPlan;$("#emergencyId").val(vo.id);$("#emergencyPlanTitle").val(vo.emergencyPlanTitle);$("#emergencyLevel").val(vo.emergencyLevel);$content.val(vo.emergencyPlan);//$("#TrueEmergencyPlan").val(vo.emergencyPlan); $("#remark").val(vo.remark);}else{layer.msg(result.msg);}},"json");}/*layui.use start */layui.use(['jquery','form','laypage','layer','laydate','layedit'],function(){form = layui.form();laypage = layui.laypage;layer = layui.layer;laydate =layui.laydate;jQuery = layui.jquery;layedit = layui.layedit;//建立预案编辑器//index = layedit.build("emergencyPlan"); /* layedit.build('emergencyPlan', { tool: ['face', 'link', 'unlink', '|', 'left', 'center', 'right'] ,height: 300}); */index = layedit.build('emergencyPlan', { tool: [ 'strong' ,'italic' ,'underline' ,'del' ,'|' ,'left' ,'center' ,'right' ,'link' ,'unlink' ] ,height: 200});//Form尺寸自适应$(window).resize(function() {var toolBarHeight = $(".toolBar").outerHeight(); $("#emergencyForm") .height( $(this).height() - toolBarHeight - 30 )}).resize();});/*layui.use end */});
阅读全文
0 0
- LayUI富文本编辑器的使用--数据加载与编辑器创建的先后顺序
- layui-富文本编辑器
- 富文本编辑器的使用
- 富文本编辑器的使用
- 富文本编辑器的使用
- 富文本编辑器的使用
- 富文本编辑器的使用
- 关于使用百度富文本编辑器UE重新加载数据的问题
- CKEditor(在线富文本编辑器)的安装与使用
- 富文本编辑器的基本原理与实践
- 富文本编辑器的基本原理与实践
- layui富文本编辑器注意点
- jquery的wysiwyg富文本编辑器使用
- kindeditor富文本编辑器的使用
- UMeditor百度富文本编辑器的使用
- 富文本web编辑器--ueditor的使用
- 富文本编辑器ckeditor的使用
- 百度富文本编辑器Ueditor的使用
- 华为防火墙VPN-GRE配置
- 回归
- 复习 activity 的生命周期 手机锁屏时生命周期变化
- 【转】时间复杂度的计算
- Python:视频截取
- LayUI富文本编辑器的使用--数据加载与编辑器创建的先后顺序
- Android中的回调举例解析
- Cookie应用实例
- WebView加载网页不显示图片解决办法
- java.lang.Package.getPackages()方法实例
- js回调及应用在elementui。例如多个弹窗三级联动
- jsp编码问题与基本知识,上课笔记
- ZooKeeper(二)-在Linux上的伪集群布置
- 欢迎使用CSDN-markdown编辑器