添加tinyMCE作为内联编辑器。有一个下一个问题:第一次这是工作良好-显示自定义风格(如我设置),工作正确,但当我点击取消,然后再次开始编辑我有空的编辑器-在编辑区没有文本。这是一个代码:UPD: cm。文档的节点包装器。createElement和el。setAttribute,厘米。getByAttr('attr', 'attr_val', el) -从el中按attr获取元素。请求- AJAX的包装器,cm。
var EditBlock = function(){
var my = this;
var o = cm.merge({
'id' : '',
'act' : '',
'val' : '',
'nobr' : false,
'text' : false,
'onSaved' : function(){},
'onSave' : function(){},
'params' : {'iconsPath' : 'interface/common/images/stdc/nicEditorIcons.gif'}
}, arguments[0]);
var prefix = 'tinyMCE_' + Math.random() + '_';
var node = cm.getEl(o.id);
var txtArea = cm.addClass(cm.Node('textarea', {'id' : prefix + o.id, 'style': ('width:' + node.offsetWidth + 'px')}), prefix + o.id);
var saveBtn = cm.Node('input', {'type':'button', 'value':'Save'});
var cancelBtn = cm.Node('input', {'type':'button', 'value':'Cancel'});
var container = cm.Node('div', txtArea, cm.Node('div', saveBtn, cancelBtn));
var plainText = function(node){
var str = '';
var childs = node.childNodes;
for(var i = 0, ln = childs.length; i < ln; i++){
if(childs[i].nodeType == 3)
str += childs[i].nodeValue;
else if(childs[i].childNodes.length)
str += plainText(childs[i]);
}
return str;
}
var init = function(){
node.onclick = my.edit;
cancelBtn.onclick = my.close;
saveBtn.onclick = function(){
my.save();
my.close();
}
}
my.save = function(){
var tmp = cm.Node('div', tinyMCE.get(prefix + o.id).getContent());
var content = o.text? plainText(tmp) : tmp.innerHTML;
o.onSave(content);
node.innerHTML = content;
req({
'act' : o.act,
'data' : 'data[content]=' + escape(content) + (o.val? '&data[val]=' + o.val : ''), 'handler' : function(){o.onSaved(content)}
});
}
my.close = function(){
tinyMCE.init({
'editor_deselector' : prefix + o.id
});
container.parentNode.removeChild(container);
node.style.display = 'block';
}
my.edit = function(){
txtArea.value = node.innerHTML;
node.style.display = 'none';
node.parentNode.insertBefore(container, node);
var styles = '';
var styleRef = cm.getByAttr('rel', 'stylesheet');
for(var i = 0, ln = styleRef.length; i < ln; i++){
styles += (i > 0? ',' : '') + styleRef[i].href;
}
tinyMCE.init({
'height' : '100%',
'content_css' : styles + ',/sdtc-new/nc/interface/common/css/mce-editor.css',
'mode' : "specific_textareas",
'editor_selector' : prefix + o.id
});
}
init();
}
使用如下:
new EditBlock({'onSave' : function(content){
page.content = content;
viewDepartment(page);
}, 'id':'depContent', 'act' : '/departments/setContent/', 'val' : page.id, 'params' : {buttonList : ['fontSize','bold','italic','underline','strikeThrough','html']}});
所以…还是关于问题。当第一次开始编辑时,所有的工作都很好,当点击保存-所有的工作也(仍然存在一些bug,但保存后,我可以点击并再次开始编辑),但当点击取消,编辑器是隐藏的,但当我再次点击编辑,我有一个空的编辑区。我看到控制台,发现取消后,当我再次开始编辑,然后我创建新的编辑,但旧的不销毁-只有隐藏。
我尝试使用yymce。编辑器类方法,如隐藏和显示和setContent,是一些结果-取消后,我可以再次编辑,但编辑区域没有样式和按钮。
请帮助。这是一个暗号问题,我很乐意回答。谢谢。
此处不要使用hide()
和show()
。您应该正确关闭tinymce,以便能够重新初始化具有与第一个相同id的tinymce编辑器。
关闭编辑器实例,使用:
tinymce.execCommand('mceRemoveControl',true,'editor_id');
重新初始化使用
tinymce.execCommand('mceAddControl',true,'editor_id');
请注意!这些已经改变了,你可能会有更好的运气(对于较新的版本,我想是4+):
尝试mceRemoveEditor
和mceAddEditor
代替…如:
tinymce.execCommand('mceRemoveEditor',true,'editor_id');
tinymce.execCommand('mceAddEditor',true,'editor_id');