Added tinyMCE as inline editor. Have a next probllem : first time this is work good - show with custom style (as I setup), works correctly but when I click cancel and then start edit again I have empty editor - without text in edit area. so this is a code: UPD : cm.Node - wrapper for docuement.createElement and el.setAttribute, cm.getByAttr('attr', 'attr_val', el) - get elemnt by attr from el. req - wrapper for AJAX, cm.merge - like array_merge in PHP
var EditBlock = function(){
var my = this;
var o = cm.merge({
'id' : '',
'act' : '',
'val' : '',
'nobr' : false,
'text' : false,
'onSaved' : function(){},
'onSave' : function(){},
'params' : {'iconsPath' : 'interface/mon/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/mon/css/mce-editor.css',
'mode' : "specific_textareas",
'editor_selector' : prefix + o.id
});
}
init();
}
use this like :
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']}});
So ... again about problem. When first time start to edit that all works fine when click save - all works too (still exists some bugs but after saving I can click and start edit again) but when click cancel that editor is hide but when I click to edit again I have a empty edit area. I see to console and find that after canceling when I start editing again then I create new edit but old not destroy - only hidden.
I try to usetynyMCE.Editor class methods like hide and show and setContent and was a some result - after canceling I could edit egain but edit area was without styles and buttons.
Please help. If would be quaestion by code - I pleasure to answer. Thanks.
Added tinyMCE as inline editor. Have a next probllem : first time this is work good - show with custom style (as I setup), works correctly but when I click cancel and then start edit again I have empty editor - without text in edit area. so this is a code: UPD : cm.Node - wrapper for docuement.createElement and el.setAttribute, cm.getByAttr('attr', 'attr_val', el) - get elemnt by attr from el. req - wrapper for AJAX, cm.merge - like array_merge in PHP
var EditBlock = function(){
var my = this;
var o = cm.merge({
'id' : '',
'act' : '',
'val' : '',
'nobr' : false,
'text' : false,
'onSaved' : function(){},
'onSave' : function(){},
'params' : {'iconsPath' : 'interface/mon/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/mon/css/mce-editor.css',
'mode' : "specific_textareas",
'editor_selector' : prefix + o.id
});
}
init();
}
use this like :
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']}});
So ... again about problem. When first time start to edit that all works fine when click save - all works too (still exists some bugs but after saving I can click and start edit again) but when click cancel that editor is hide but when I click to edit again I have a empty edit area. I see to console and find that after canceling when I start editing again then I create new edit but old not destroy - only hidden.
I try to usetynyMCE.Editor class methods like hide and show and setContent and was a some result - after canceling I could edit egain but edit area was without styles and buttons.
Please help. If would be quaestion by code - I pleasure to answer. Thanks.
Share Improve this question asked Sep 3, 2011 at 17:20 ZigZagZigZag 5491 gold badge8 silver badges19 bronze badges2 Answers
Reset to default 5Don't use hide()
and show()
here. You should shut down tinymce correctly in order to be able to reinitialize a tinymce editor with the same id as the first one.
To shut down an edtor instance use:
tinymce.execCommand('mceRemoveControl',true,'editor_id');
To reinitialize use
tinymce.execCommand('mceAddControl',true,'editor_id');
Please note! These have since changed, you may have better luck with (for newer versions, 4+ I think):
try mceRemoveEditor
and mceAddEditor
instead...as in:
tinymce.execCommand('mceRemoveEditor',true,'editor_id');
tinymce.execCommand('mceAddEditor',true,'editor_id');