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}