tinyMCE를 인라인 편집기로 추가했습니다. 다음 프로 블렘을 가져보십시오 : 처음에는 작업이 좋았습니다 - 사용자 정의 스타일로 표시 (설정대로) 제대로 작동하지만 취소를 클릭하고 다시 편집을 시작하면 편집 영역에 텍스트가없는 빈 편집기가 나타납니다. 이 코드는 다음과 같습니다. UPD : cm.Node - docuement.createElement 및 el.setAttribute, cm.getByAttr ('attr', 'attr_val', el)에 대한 래퍼 - el에서 attr에 의해 elemnt를 가져옵니다. REQ - AJAX를위한 래퍼, cm.merge - array_merge 같은 PHP에서두 번째 쇼와 함께 TinyMCE 문제. 도움말
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']}});
그래서 .... 처음에 편집을 시작하면 저장을 클릭해도 제대로 작동합니다. 모든 버그는 여전히 존재하지만 (저장 후에도 클릭하고 다시 편집을 시작할 수 있습니다.)하지만 편집을 취소하려면 숨기기를 클릭하지만 다시 편집하려면 클릭하십시오. 빈 편집 영역 콘솔을보고 사라진 후 다시 편집을 시작한 후 새로운 편집을 만들지 만 이전에는 파괴하지 않고 숨겨진 것만 찾습니다.
나는 hideet, show 및 setContent와 같은 usetynyMCE.Editor 클래스 메소드를 시도하고 일부 결과가 있습니다. 취소 한 후에는 egain을 편집 할 수 있지만 편집 영역에는 스타일과 버튼이 없었습니다.
도와주세요. 만약에 코드에 의한 quaestion이라면 - 대답하게되어 기쁩니다. 감사합니다. .
당신이 할 말은 tinyMCE.init을 사용 하시겠습니까? 또는 제 시간에 그것을 사용하고 다른 것을 execCommand를 사용하십시오. 공식 사이트에서 명확한 예를 찾을 수 없기 때문에 간단한 예제 나 링크를 예제로 제공 할 수 있다면 제발. 대답 – ZigZag
주셔서 감사합니다 tinyMCE.init, 사용할 수 있지만 DOM 주위에 편집기를 이동하거나 ajax를 통해로드 할 경우 먼저 이전 tinymce 인스턴스를 종료해야합니다. – Thariama
감사합니다, 이것은 정확히 내가 필요합니다. – ZigZag