TinyMCE에 - 나는 현재 TinyMCE에 사용하고 다음과 같이 작동하는 사용자 정의 버튼을 추가 할

Question

하는 태그로 선택한 텍스트를 감싸는 버튼을 추가하는 방법 : 텍스트 editior에서

1. 사용자 하이라이트 텍스트를
2. 사용자는 사용자 정의 버튼 X
3. 텍스트 (개 산책) 태그 (개 산책)로 싸여있다

이 작업을 수행 할 수있는 경우에 어떤 아이디어를 클릭?

// Add a custom button 
ed.addButton('mybutton', { 
    title : 'My button', 
    'class' : 'MyCoolBtn', 
    image : 'MyCoolBtn.png', 
    onclick : function() { 
     // Add you own code to execute something on click 
     ed.focus(); 
     ed.selection.setContent('<strong>Hello world!</strong>'); 
    } 
}); 

---

감사 : 나는 사용자 정의 버튼 텍스트를 삽입 만들지 만, 텍스트를 포장하지하는 방법을 알아 냈어요 ... 여기에 현재 코드입니다! (1) 반드시 선택, 다음 (2) execCommand() 방법을하지 빈 사용되었는지 확인하기 위해 빠른 검사를 수행

Answer 1

ed.addButton('mybutton', { 
    title: 'My button', 
    class: 'MyCoolBtn', 
    image: 'MyCoolBtn.png', 
    onclick: function() { 
    // Add your own code to execute something on click 
    ed.focus(); 
    ed.selection.setContent('<tag>' + ed.selection.getContent() + '</tag>'); 
    } 
}); 

Answer 2

이를 달성하기 위해 더 나은 방법입니다.

execCommand()을 사용하면 실행 취소 할 수 있음을 의미합니다. @ Warrior의 답변은 실행 취소 할 수없는 setContent()을 사용합니다.

ed.addButton('mybutton', { 
    title: 'My button', 
    class: 'MyCoolBtn', 
    image: 'MyCoolBtn.png', 
    onclick: function() { 
    ed.focus(); 
    var text = ed.selection.getContent({'format': 'html'}); 
    if(text && text.length > 0) { 
     ed.execCommand('mceInsertContent', false, '<tag>'+text+'</tag>'); 
    } 
    } 
});