首先要下载kindeditor文件包,并将他们解压放在项目中。 前端的引用方式如下:
<textarea name="content" lay-verify="content" placeholder="" class="layui-textarea" id="content">{$article.content}</textarea> //编辑器位置 <script src="__JS__/kindeditor/kindeditor.config.js"></script> <script src="__JS__/kindeditor/kindeditor-all-min.js"></script> <script> $(document).ready(function () { var _kindEditor; KindEditor.ready(function(K) { _kindEditor = K.create('#content', KindEditorOptions); K('#upload-photo-btn').click(function () { var photo_list_item = ''; _kindEditor.loadPlugin('multiimage', function() { _kindEditor.plugin.multiImageDialog({ showRemote : false, imageUrl : K('#photo').val(), clickFn : function(data) { $.each(data, function (index, item) { photo_list_item += '<div class="photo-list"><input type="text" name="photo[]" value="' + item.url + '" class="layui-input layui-input-inline">'; photo_list_item += '<button type="button" class="layui-btn layui-btn-danger remove-photo-btn">移除</button></div>' }); $('#photo-container').append(photo_list_item); _kindEditor.hideDialog(); } }); }); }); }); $('#photo-container').on('click', '.remove-photo-btn', function () { $(this).parent('.photo-list').remove(); }); }); </script>