초기화 후 Tinymce 보기 모드가 전환됩니다.

StackOverflow https://stackoverflow.com//questions/25054335

문제

내 편집자는tinymce4+입니다.그것은 대부분의 부분에서 크게 작동합니다.

하지만 내가 무엇을 하든, 내가 할 수 없는 일이 있다.- 편집 모드를 즉시 전환합니다.-

사용자가 데이터를 선택하고 편집하고 콘텐츠를 볼 수 있는 페이지가 있습니다.사용자는 " viewmode "라는 버튼을 클릭하고 다른 측면은 " editmode "입니다.

두 개를 넣어서 이것을 달성했습니다. DIV동일한 컨테이너에 있으므로 사용자가 선택한 시작 모양 설정에 따라 그 중 하나가 보이지 않게 됩니다.하나 DIV Tinmce 편집기, iframe 태그가 있고 또 다른 하나에는 편집기가 보유하고 있는 HTML 값이 있습니다.그러나 이것의 부작용은 스타일 속성에 따라 콘텐츠 스타일이 다르게 보일 수 있다는 것입니다.

지금 제가 이야기하고 있는 이 웹 애플리케이션은 자체적인 기능을 갖춘 기존 시스템입니다. CSS에스.너무 복잡해서 한번 보면 도망가고 싶을 수도 있습니다.

그래서 나는 이것을 피하고 싶습니다. CSS 편집기를 양방향으로 동적으로 전환할 수 있도록 하여 불일치를 방지합니다.

여러 개의tinymce 개체를 로드하는 것은 여기서 필요한 마지막 작업입니다.

속성을 설정하여 편집기를 비활성화할 수 있습니다. contenteditable = false - 그러나 툴바 요소는 여기서 나쁜 소년이됩니다.왜냐하면 그들은 여전히 ​​​​일하기 때문입니다.이 임무를 완료하기 위해 도구 모음 자체를 숨깁니다.

하지만 내 고객은 그것을 싫어했고 편집자가 보기 모드에 인쇄 버튼을 제공해야 한다고 주장했습니다.이것은 실망 스럽습니다.

따라서 도구 모음의 요소를 조작하는 방법에 대한 아이디어를 주시면 이 문제를 해결할 수 있을 것 같습니다.

너무 어렵다면 인쇄 이벤트 리스너를 외부 요소에 연결하는 것도 나에게는 차선책일 수 있습니다.왜냐하면 그 순간부터 그냥 툴바를 버리고 에디터 상단에 인쇄 아이콘을 만들고 거기에 이벤트를 첨부하기 때문이죠.

일반 텍스트를 모두 입력해서 죄송합니다.하지만 이와 같은 문제에는 코드가 필요하지 않다고 생각합니다.Tinmce 전문가가 들러서 나를 도와주기를 바랍니다.

도움이 되었습니까?

해결책

마지막으로 편집기를 전환 가능하게 만들었습니다.

첫 번째 단계는 도구 모음의 모든 요소를 ​​숨기는 것입니다. tinyMCE.

tinyMCE 도구 모음에는 특정 클래스 이름이 있으므로 다음을 사용하여 선택할 수 있습니다. jQuery 클래스 선택자.하지만 클래스 이름만으로 선택하면 원치 않는 툴바도 나타나게 되므로 주의해야 합니다.

참고로 .eq() API가 도움이 될 수 있습니다.

도구 모음의 모든 요소를 ​​숨긴 후(단, 도구 모음을 숨기지 마십시오.) 이 작업을 수행.

tinymce.ui.Factory.create({
    type: 'button',
    cmd: 'mcePrint',
    icon: 'print',
    shortcut: 'Ctrl+P',
    class : 'temp'
}).renderTo(appendTarget);

그러면 도구 모음에 버튼 요소가 추가됩니다.

하지만 어쩐지 cmd 값에 정의한 명령이 호출되지 않습니다.

따라서 이 이벤트를 버튼에 수동으로 첨부해야 합니다.

tinymce.activeEditor.execCommand('mcePrint');

지금까지 보기 모드 편집기용 사용자 정의 도구 모음을 만들었습니다.이제 편집기의 실제 콘텐츠 필드를 동결할 차례입니다.

iframe 콘텐츠를 다음과 같이 가져온 후에는 매우 쉽습니다. jQuery 물체.

.contents() API가 도움이 될 것입니다.

그 후에는 선택할 수 있습니다 <BODY> 요소가 있으므로 마지막으로 해야 할 일은 body 태그에 'contenteditable=false' 속성과 값을 제공하는 것입니다.

그런 다음 편집기가 정지됩니다.

편집 모드로 돌아가는 것도 쉽습니다.그냥 거꾸로 해보세요.

자신의 "스위치" 버튼을 클릭하면 이러한 이벤트를 호출합니다.그런 다음 편집기를 보기 모드에서 편집 모드로 전환할 수 있습니다(그리고 반대 사이트에서도 가능).

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top