您好,我的动态添加文本区域有问题,
我需要在我的所有 textarea 中安装 niceEdit html 编辑器,它在硬编码 textarea 上运行良好,但是当我使用我的 javaScript 动态添加函数来生成 textarea 时,它没有获得 nicEdit html 编辑器。
谁能告诉我我在这里缺少什么。 非常感谢任何意见和建议。
这是我的 jsfiddle
最佳答案
循序渐进。您需要在每个新添加的控件上实例化新的 nicEditor 实例。
//Create the text area first and append it to DOM.
var elm = $('<TEXTAREA NAME="description[]" id="test" ></TEXTAREA><a href="#" id="remScnt">Remove</a>').appendTo(scntDiv);
// Instantiate the nicEditor Instance on it. It will now have the reference of the element in DOM.
new nicEditor().panelInstance(elm[0]);
//wrap it with p
elm.wrap($('<p/>')); //You can chain it in the first step itself after appendTo(scntDiv).
具有添加/删除功能的完整更新:
$(document).on('click', '#addScnt', function () {
// Add the textarea to DOM
var elm = $('<textarea NAME="description[]"></textarea>').appendTo(scntDiv);
//Get the current SIZE of textArea
var curSize = $('textarea[name="description[]"]').length;
//Set the Object with the index as key and reference for removel
editors[curSize] = new nicEditor().panelInstance(elm[0]);
//Create anchor Tag with rel attribute as that of the index of corresponding editor
elm.after($('<a/>', {
rel: curSize,
'class': "remScnt",
text: "Remove",
href: '#'
})).next().andSelf().wrapAll($('<p/>')); //add it to DOM and wrap this and the textarea in p
});
$(document).on('click', '.remScnt', function (e) {
e.preventDefault();
//Get the textarea of the respective anchor
var elem = $(this).prev('textarea');
//get the key from rel attribute of the anchor
var index = this.rel;
//Use it to get the instace and remove
editors[index].removeInstance(elem[0]);
//delete the property from object
delete editors[index];
//remove the element.
$(this).closest('p').remove();
});
Demo
注意 live()
在较新的版本中已被弃用和停用,因此请将 on()
与事件委托(delegate)一起用于动态创建的元素。还要将 id 更改为删除链接 .remScnt
的类,因为重复的 id 会导致问题并使 html 无效
关于php - NicEdit html 编辑器,用于管理动态添加/删除文本区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17416728/