작은 MCE : 사람들이 들여 쓰기를 허용하는 방법

Question

사람들을 작은 MCE 편집기에서 들여 쓰기 할 수있는 방법을 찾으려고합니다. 지금 누군가가 tab을 누를 때마다 그들은 다음 필드로 이동합니다. 실제로 tab을 치고 새 단락의 탭을 만들 수있는 코드가 있습니까?

Answer 1

사용자가 탭을 누르면이 이벤트와 stopPropagation/return false을 잡을 수 있습니다. 사용자가 브라우저에 의해 삭제 얻을 것이다 단락의 시작이나 끝 부분에 탭을 삽입하는 경우

는

// Adds an observer to the onKeyUp event using tinyMCE.init 
tinyMCE.init({ 
    ... 
    setup : function(ed) { 
     ed.onKeyDown.add(function(ed, evt) { 
      console.debug('Key up event: ' + evt.keyCode); 
      if (evt.keyCode == 9){ // tab pressed 
      ed.execCommand('mceInsertRawHTML', false, '\x09'); // inserts tab 
      evt.preventDefault(); 
      evt.stopPropagation(); 
      return false; 
      } 
     }); 
    } 
}); 

(이것에 대한 해결 방법은 탭이 아닌 미리 정의 된 길이의 특수 문자를 삽입하는 것입니다) .

Answer 2

Thariama의 해결책이 나를 위해 제대로 작동하지 않았습니다. Jon Hulka의 고침에 동의합니다. 이것은 Firefox (mac + pc), Chrome (mac + pc) 및 Internet Exploder에서 제대로 작동하는 것 같습니다. 그것은 완벽하지는 않지만, 나는 그것을 매우 유용하고 수용 할 수있는 것으로 생각합니다. 다음과 같은 솔루션은 나를 위해 일한 작은 MCE 에디터의 새 버전

tinyMCE.init({ 
    ... 
    setup : function(ed) { 
     ed.onKeyDown.add(function(ed, evt) { 
      if (evt.keyCode == 9){ 
      ed.execCommand('mceInsertContent', false, '  '); 
      evt.preventDefault(); 
      } 
     }); 
    } 
}); 

Answer 3

: 감사합니다 존

그래서, 영업 이익 존의 솔루션을 포장

setup: function(ed) { 
    ed.on('keydown', function(event) { 
     if (event.keyCode == 9) { // tab pressed 
      if (event.shiftKey) { 
      ed.execCommand('Outdent'); 
      } 
      else { 
      ed.execCommand('Indent'); 
      } 

      event.preventDefault(); 
      return false; 
     } 
    }); 
} 

Answer 4

답변을 여기에 주어진 확실히하지 않았다 줄의 중간에 텍스트를 들여 줘야하므로 필자의 요구 사항을 충족시킵니다. 나는 지사의 이름을 열거하고 함께 전화 번호를 정렬하기를 원했습니다. 각 사무실 이름이 다른 길이라면 @ Mac의 답과 공백을 조합 해 보았습니다.하지만 정확도를 충분히 얻을 수 없었기 때문에 Shift 키와 스페이스 바를 사용하여 작은 공백 옵션을 추가하여 모든 것이 완벽하게 정렬되도록했습니다 . 유일한 단점은 tinymce의 기본 엔티티에는 & hairsp가 포함되지 않는다는 것입니다. 그래서 기본 엔티티 목록을 내 설정에 추가하고 끝에 "8202, hairsp"를 추가해야했습니다.

tinyMCE.init({ 
    ... 
    setup : function(ed) { 
     ed.on('keydown', function(event) { 
     if (event.keyCode == 9) { // tab pressed 
      ed.execCommand('mceInsertContent', false, '  '); // inserts tab 
      event.preventDefault(); 
      return false; 
     } 
     if (event.keyCode == 32) { 
      if (event.shiftKey) { 
       ed.execCommand('mceInsertContent', false, ' '); // inserts small space 
       event.preventDefault(); 
       return false; 
      } 
     } 
     }); 
    } 
}); 

그것은 TinyMCE에 사용할 플러그인을 줄 바꿈을 통해 수행 할 수 있습니다

Answer 5

tinymce.init({ 
    selector: "textarea", // change this value according to your HTML 
    plugins: "nonbreaking", 
    mewnubar: "insert", 
    toolbar: "nonbreaking", 
    nonbreaking_force_tab: true 
}); 

세부 사항은 쉽게 다음 코드를 사용하여 탭 공간을 추가 할 수 https://www.tinymce.com/docs/plugins/nonbreaking/

Answer 6

에서 찾을 수 있습니다

ed.on('keydown',function(evt){ 
      if (evt.keyCode==9) { 
       ed.execCommand('mceInsertContent', false, '<span class="mce-nbsp">&emsp;&emsp;&emsp;&emsp;</span>'); 
       tinymce.dom.Event.cancel(evt); 
       return; 
      } 
    });