TinyMCE에 비 편집 가능한 요소에 기본 스타일을 적용

Question

상황 :

TinyMCE에이 요소가 아닌 편집 할 수있는 noneditable 플러그인을 가지고있다. 요소가 mceNonEditable 클래스 인 경우 TinyMce는 요소를 편집 할 수 없도록 만듭니다.

문제 :

나는 기본 스타일 태그이 편집이 불가능한 요소를 래핑 할 수 있도록하려는

. 예를 들어

내가있는 경우 :

Hello <span class="mceNonEditable">user_name</span> how are you today ? 

나는 비 편집 가능한 범위를 선택하고 TinyMCE에 Blod 버튼 클릭 user_name을 클릭합니다.

나는 결과가되고 싶습니다 :하지만 그 대신이의

Hello <b><span class="mceNonEditable">user_name</span></b> how are you today ? 

을 아무 일도 발생하지 않습니다. TinyMce Blod 버튼을 클릭하면 코드가 변경되지 않습니다.

나는 이것을 보여주기 위해 작은 jsFiddle을 만들어 : https://jsfiddle.net/timotheejeannin/2hhpenm5/

내가 시도하는 것 :

• 다르게 (https://www.tinymce.com/docs/plugins/noneditable/)
• 사용에게 data-mce-contenteditable 속성이 아닌 편집을 대체 할 불능 플러그인 구성 단추를 클릭하면 동작. (See usage in TinyMce source code in DOMUtils.js line 1739)
• 편집 가능한 검색 내용을 둘러보십시오. (See in TinyMce source code in Formatter.js line 609)
• (이 플러그인으로 문제를 해결하는 것은 불가능 모양) 내 자신의 플러그인을 구축

난 정말 당신이 도와 수 있기를 바랍니다!

Answer 1

TinyMCE 구성에 추가 할 수있는 간단한 사용자 지정 도구 모음 단추를 사용하여이 작업을 수행 할 수 있다고 생각합니다.

편집 할 수없는 요소를 클릭하면 효과적으로 편집 할 수없는 전체 요소 인 DOM 노드가 생깁니다. 그런 다음 DOM 조작을 사용하여 해당 요소에 스타일을 추가하거나 다른 태그에 요소를 래핑 할 수 있습니다. 예를 들어이 TinyMCE에 바이올린을 참조하십시오

http://fiddle.tinymce.com/sDfaab

이 때 편집 할 요소를 클릭하고 전체 편집 할 요소는 텍스트를 bolds 새로운 인라인 스타일을 얻을 수 있습니다됩니다 Add Style to Node 버튼을 클릭합니다.