2012-12-23 2 views
9

I는 다음과 같이 괄호 안에있는 TinyMCE에 편집기 내부에서 단축 있습니다TinyMCE를 편집기에서 단축 코드를 강조하는 방법

[my_shortcode]some text that gets parsed by my shortcode function[/my_shortcode] 

이 가능가 TinyMCE에 에디터의 내용에 런타임 스타일의 CSS를 적용 할 수 있도록 모든 요소 그 괄호 안에 (내 shortcodes * 목록에있어) 그들을 눈에 띄게하기 위해 특별한 CSS 처리를 가져옵니다?

아이디어는 현재 주변 텍스트와 구별하기 위해 특수 문자 또는 서식이 없으므로 더 눈에 띄지 않는 한 단축 코드에 사용하기가 어려울 수 있습니다.

단축 코드 (예)의 내 목록 :

[my_shortcode],[my_shortcode_2],[my_shortcode_3] 

업데이트 :이 하나를 얻을 수 있습니다 제가 할게요,하지만 이상적으로, 나는 단지 괄호에 스타일을 적용 할 텍스트가 아닌 그 브래킷이 감겨져 있습니다. 그래서 짧은 코드 대괄호 (예 : [my_shortcode] 및 [/ my_shortcode])에만 런타임 CSS 스타일을 적용하고 그 둘을 혼자 묶는 텍스트는 그대로 두십시오.

+0

나는 그것이 그들이 블록 (스팬 또는 다른 인라인 요소)로 변환 할 수 있습니다하지 않는 한 이러한 블록에 대한 영구적 인 스타일을 적용 할 수 있다고 생각하지 않습니다. 지정된 버튼을 사용하여 필요시 강조 표시하는 방법은 어떨까요? – raina77ow

+0

WYSIWYG + 템플릿 태그 = 재난입니다. 사람들은 항상 굵게/기울임 꼴/crapPastedFromWordDocument를 추가하여 문제를 해결합니다. 나는 이것에 대한 답을 고대하고 있는데, 비록 그것이 시각적 단서 일지라도, 나는 그것을 직접 사용할 수있다. 나는 당신의 업데이트가 약간의 질문을하고 있다고 생각합니다. 당신이 이걸 간단하게 생각할 수 없기 때문에, 당신이 얻을 수있는 것을 취해야합니다. –

+0

@ 웨슬리 - 나는 짧은 코드 대 html 코드를 넣는 것을 선호합니다. tinyMCE API를 더 깊이 파고 들어갈 시간이 있으면 단축 코드를 무시하고 단축 코드가 최종적으로 생성하는 관련 html 코드를 추가 할 수 있습니다. –

답변

1

문제는 당신이 HTML 요소의 텍스트 내용의 일부 CSS를 적용 할 수 없다는 것입니다. 해결 방법은 다음과 같습니다. 닫힌 태그를 특수 클래스가있는 범위로 묶어야합니다. 이렇게하면 단축 코드를 강조 표시 할 수 있습니다. 에디터의 내용을 서버에 제출할 때 특수 클래스로 span을 제거하고 textContent로 대체해야합니다.

0

단축 코드 또는 다른 요소에 대한 강조 표시를 제공하는 가장 좋은 방법은 모든 단축 코드를 나열하고 강조 표시된 편집기 영역에 삽입하는 사용자 정의 단축 코드 메뉴를 사용하거나 구문 강조 형광 표시기를 사용하여 HTML, CSS, JavaScript 및 shortocodes은 (경우에만 원시 모드에서)

이 사용 codemirror에 대한 간단한 해결책은 여기에 있습니다 : 텍스트 편집기에서 http://nikos-web-development.netai.net/blog/shortcodes-highlighting-overlay-in-codemirror/

관련 문제