更改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}