html5 list 优化,fastadmin filedlist动态渲染动态添加的编辑器---编辑页面的优化

问题

通过fieldlist动态添加的组件，是没法自动渲染的。

关于内置组件的渲染

fa官网也只对10个内置的组件，提供了重新渲染的方法。以下是：十个组件，两种方法。

方法1：全部重新渲染 Form.api.bindevent("form[role=form]")

方法2: 精确渲染 并提供了10个组件精确渲染的方法，如下图

如何渲染编辑器组件

1.编辑器一般都是官方提供的收费插件

2.安装插件的时候，插件本身就提供了渲染方法。(我安装的是官方的nkeditor插件)

3.具体的渲染方法，写在\public\assets\js\backend\addon.js里

4.从addon.js里复制编辑器插件的渲染方法，写到\public\assets\js\require-form.js里。

5.具体的写法是，跟十个组件同级的地方，添加一个editor方法，内容来自addon.js里编辑器的渲染方法。

6.以后就直接调用这个方法，就能渲染。调用方式：Form.events.editor($("form"));

新增位置

新增代码

editor: function(form){

if ($(".editor",form).size() > 0) {

require(['nkeditor', 'upload'], function (Nkeditor, Upload) {

var getImageFromClipboard, getImageFromDrop, getFileFromBase64;

getImageFromClipboard = function (data) {

var i, item;

i = 0;

while (i < data.clipboardData.items.length) {

item = data.clipboardData.items[i];

if (item.type.indexOf("image") !== -1) {

return item.getAsFile() || false;

}

i++;

}

return false;

};

getImageFromDrop = function (data) {

var i, item, images;

i = 0;

images = [];

while (i < data.dataTransfer.files.length) {

item = data.dataTransfer.files[i];

if (item.type.indexOf("image") !== -1) {

images.push(item);

}

i++;

}

return images;

};

getFileFromBase64 = function (data, url) {

var arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1],

bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

while (n--) {

u8arr[n] = bstr.charCodeAt(n);

}

var filename, suffix;

if (typeof url != 'undefined') {

var urlArr = url.split('.');

filename = url.substr(url.lastIndexO