thinkadmin 单页面多个富文本初始化

更改thinkadmin 文件上传为富文本编辑器

html代码

<label class="layui-form-item relative block" data-rule-list><span class="color-green font-w7">选项</span><span class="color-desc margin-left-5">Question Option</span><div class="layui-form-item text-center"><label class="layui-form-item   "><b class="notselect color-green margin-right-5">富文本1</b><textarea data-textarea class="layui-textarea" name="result[]" placeholder="请输入测评结论"></textarea></label><label class="layui-form-item   "><b class="notselect color-green margin-right-5">富文本2</b><textarea data-textarea class="layui-textarea" name="result[]" placeholder="请输入测评结论"></textarea></label><label class="layui-form-item   "><b class="notselect color-green margin-right-5">富文本3</b><textarea data-textarea class="layui-textarea" name="result[]" placeholder="请输入测评结论"></textarea></label></div>
</label>

JS代码

    require(['ckeditor'], function () {/*! 初始化 富文本插件 */(function initTextArea() {$('[data-rule-list] textarea[data-textarea]').map(function () {if (!$(this).attr('inited')) {$(this).attr('inited', true);window.createEditor($(this), {height: 150})}});setTimeout(initTextArea, 100);})();});

完整代码

{extend name="../../admin/view/main"}{block name='content'}
<form action="{:request()->url()}" autocomplete="off" class="layui-form layui-card" data-auto="true" method="post"><div class="layui-card-body padding-40"><label class="layui-form-item relative block" data-rule-list><span class="color-green font-w7">内容</span><span class="color-desc margin-left-5">Content</span><div class="layui-form-item text-center"><a class="layui-btn layui-btn-primary" data-item-add>添加内容</a></div></label><div class="hr-line-dashed"></div><div class="layui-form-item text-center"><button class="layui-btn" type="submit">保存数据</button><button class="layui-btn layui-btn-danger" data-history-back data-confirm="确定要取消编辑吗？" type='button'>取消编辑</button></div></div></form><div class="layui-hide" data-item-tpl><div class="layui-form-item" data-rule-item><label class="layui-form-item   "><b class="notselect color-green margin-right-5">内容</b><input class="layui-input inline-block margin-right-5" name="name[]" placeholder="请输入选项" required style="width:240px" value=""><a class="layui-btn layui-btn-primary" data-item-up><i class="layui-icon layui-icon-up margin-0"></i></a><a class="layui-btn layui-btn-primary" data-item-dn><i class="layui-icon layui-icon-down margin-0"></i></a><a class="layui-btn layui-btn-primary" data-item-rm><i class="layui-icon layui-icon-close margin-0"></i></a></label><label class="layui-form-item   "><b class="notselect color-green margin-right-5">富文本</b><textarea data-textarea class="layui-textarea" name="result[]" placeholder="请输入测评结论"></textarea></label></div>
</div><label class="layui-hide"><textarea id="DefaultData">{$vo.option|default=[]}</textarea>
</label><style>[data-rule-page] {margin-top: -3px;margin-left: 5px;}[data-rule-item] {padding-left: 40px;margin-bottom: 20px;}[data-rule-item] .uploadimage {width: 135px;height: 100px;}[data-item-dn], [data-item-up], [data-item-rm] {margin-top: -4px;margin-left: 5px;}
</style><script>require(['ckeditor'], function () {(function (data) {console.log(data);/*! 默认数据渲染 */if (data.length < 1) addItem();else data.forEach(function (item) {addItem(item)});/*! 初始化 富文本插件 */(function initTextArea() {$('[data-rule-list] textarea[data-textarea]').map(function () {if (!$(this).attr('inited')) {$(this).attr('inited', true);window.createEditor($(this), {height: 150})}});setTimeout(initTextArea, 100);})();/*! 数据选项操作 */$('[data-rule-list]').on('click', '[data-item-add]', function () {addItem();}).on('click', '[data-item-rm]', function () {$(this).parents('[data-rule-item]').remove();}).on('click', '[data-item-up]', function () {var item = $(this).parents('[data-rule-item]');var prev = item.prev('[data-rule-item]');if (item.index() > 0) item.insertBefore(prev);}).on('click', '[data-item-dn]', function () {var item = $(this).parents('[data-rule-item]');var next = item.next('[data-rule-item]');if (next) item.insertAfter(next);});/*! 表单提交处理 */$('form#DataForm').vali(function (ret) {var idx,data={},option = [];for (idx in ret.name) {{if $evaluation_type == 1}if (!ret.result[idx]) return $.msg.tips('请输入内容！');option.push({result: ret.result[idx]});{/if}}$.form.load('{$request->url()}', data, 'post');});})(JSON.parse($('#DefaultData').val() || '[]') || []);});/*! 添加数据选项 */function addItem(data) {this.$html = $($('[data-item-tpl]').html());if (data) for (this.index in data) this.$html.find('[name^="' + this.index + '"]').val(data[this.index]);$('[data-item-add]').parent().before(this.$html), setTimeout(function () {$.form.reInit();}, 100);}
</script>
{/block}

thinkadmin 单页面多个富文本初始化相关推荐

html JSP 富文本案例,JSP页面引入Ueditor富文本编辑器！
最近做项目时,需要用到富文本编辑器,使用了百度的Ueditor编辑器,因此在这和大家分享下工具/原料 myeclipse,ueditor 方法/步骤从官网上地开级还思层似未屏别.域一插式近址发 ...
html表单控件富文本框,表单控件之富文本框实践
多行文本输入框(不是富文本框)的html代码如下: 学历及经历: ${emp.details} 富文本的js代码如下: // create Editor from textarea HTML elem ...
在html页面写一个富文本框
第一步:获取到富文本框的这个文件,链接地址:https://ckeditor.com/cke4/builder (1)里面有几个选择,看你需求自己进行选择,然后鼠标一直拖到最下面,开始下载包下面我只 ...
html5文本域边框管理,表单控件之富文本框实践
多行文本输入框(不是富文本框)的html代码如下: 学历及经历: ${emp.details} 富文本的js代码如下: // create Editor from textarea HTML elem ...
商家后台-商品录入【商品介绍】、富文本编辑器
1.1 需求分析实现商品介绍的录入,要求使用富文本编辑器. 1.2 富文本编辑器介绍富文本编辑器,Rich Text Editor,简称RTE,它提供类似于Microsoft Word 的编辑功能 ...
富文本编辑器和fastdfs的使用
宜立方商城的系统架构 a) 功能介绍(项目架构,有哪些功能模块,这些功能模块如何实现?) b) 架构讲解工程搭建-后台工程 c) 使用maven搭建工程(后台工程如何搭建?) d) 使用maven的 ...
React版TinyMCE富文本入坑
React版TinyMCE富文本中文教程写在前面:因为公司项目的需要,需要寻找一款免费,开源,功能强大的富文本用作自定义打印.公司的前端框架用的是React,所以需求就很明显,要支持框架,开源,功能 ...
小程序的四次元口袋：editor富文本编辑器的使用、渲染，以及rich-text进行解析
editor富文本 1.介绍富文本编辑器,可以对图片.文字进行编辑.极大地丰富了我们文章的结构样式,之前小程序还没有自己开发富文本插件,而在2019年微信小程序正式发布了富文本api. 支持的类型 ...
jeeplus mysql_JeePlus富文本框、时间框
一. 时间框 1.效果展示 2.相关代码---JSP页面 (1)时间字段初始化 (2)时间格式二.富文本框 1.效果展示 2.添加字段 (1)数据库 (2)实体类 3.JSP页面 (1)引入相关插件 ...

thinkadmin 单页面多个富文本初始化

html代码

JS代码

thinkadmin 单页面多个富文本初始化相关推荐

最新文章

热门文章