Meteor의 ExecCommand가 작동하지 않습니다.

Meteor에서 ContentEditable의 기본 서식있는 텍스트 편집 기능을 구현하려고하는데 execCommand에 문제가 있습니다. 실행 취소 및 다시 실행 명령은 제대로 작동하지만 굵게 및 기울임 꼴과 같은 다른 모든 명령은 작동하지 않으며 오류가 발생하지 않습니다. 코드는 일반 페이지처럼 잘 작동합니다 (템플릿 및 이벤트와 같은 Meteor에 대한 명백한 적용을 수행했습니다).Meteor의 ExecCommand가 작동하지 않습니다.

내 HTML :

if (Meteor.isClient) { 
     Template.buttons.events({ 
       "click #bold": function() { // Toggles bold on/off for the selection or at the insertion point 
        document.execCommand("bold", false, "null"); 
       }, 
       "click #italic": function() { // Toggles italics on/off for the selection or at the insertion point 
        document.execCommand("italic", false, "null"); 
       }, 
       "click #undo": function() { // Undoes the last executed command. 
        document.execCommand('undo', false, "null"); 
       } 
    )}; 
}

는 누군가가 알고 :

<body> 
    {{> buttons}} 
    <div id="editor" class="textZone" contenteditable="true"></div> 
</body> 

<template name="buttons"> 

    <div id="rtfOptions"> 
     <div class="separate"> 
      <div class="rtfOption" id="undo">undo</div> 
      <div class="rtfOption" id="redo">redo</div> 
     </div> 

     <div class="separate"> 
      <div class="rtfOption" id="bold">bold</div> 
      <div class="rtfOption" id="italic">italic</div> 
     </div> 
    </div> 
</template>

내 이벤트 (. 단지 2 비 작업 + 작동으로 실행 취소는 거의 같은 나머지 부분에 관해서는) 발행물? 그것은 문서 또는 범위와 관련이 있습니까?

출처

2015-01-20 mesosteros

' "널 (null)"'잘못된 것입니다. 따옴표없이 'null'이어야합니다. 그러나, 나는 그것이 어떤 차이를 만들지 모르겠다. 에디터가 에디터 내용에 iframe을 사용하고 있습니까? –

아니요, 별 차이가 없습니다. 나는 이전에 null과 마찬가지로 그것을 가지고 있었고, 그것이 단순히 내 linter 때문에 그것이 었는지 테스트하고있었습니다. iframe을 사용하고 있지 않으며 특별히 원하지 않습니다. – mesosteros

확인. 그것이 왜 작동하지 않을지에 대한 명백한 이유는 없습니다. –

대신 div 태그를 button (클릭 가능한 요소의 경우)으로 변경하거나 div 텍스트를 선택 취소 할 수있는 경우 (예 : user-select의 CSS 사용 중지) 예상대로 작동해야합니다.

이유는 내부 텍스트로 div를 클릭하면 (contenteditable되지 않음) div의 된 텍스트 execCommand 목표 때문에 명령이 자동으로 실패한다는 것입니다. div에 contenteditable="true"을 추가하면 클릭하면 div의 텍스트를 굵게 표시됩니다. 또는 div에서 텍스트 선택을 사용 중지하는 CSS 규칙 -webkit-user-select: none; (Chrome에서는 다른 공급 업체 프리픽스가 다른 경우)을 추가하면 execCommand이 올바르게 작동하는 것을 확인할 수 있습니다.

작업 데모 here을 참조하십시오. 선명도

코드 예제 :

옵션 1 개

<template name="buttons"> 
    <div id="rtfOptions"> 
    <div class="separate"> 
     <div class="rtfOption" id="bold" style="user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;">bold</div> 
    </div> 
    </div> 
</template>

옵션 2

<template name="buttons"> 
    <div id="rtfOptions"> 
    <div class="separate"> 
     <button class="rtfOption" id="bold">bold</button> 
    </div> 
    </div> 
</template>

출처

2015-01-26 20:17:51 mark

div에 contenteditable = "true"가 있습니다. 위의 코드에 나와 있습니다. -webkit-user-select : none; 작동하지 않았다. – mesosteros

@mesosteros 편집을 참조하십시오 - 나는 분명하지 않다고 생각합니다. 즉, 클릭 할 수있는 div 요소 (id가있는 요소)에'contenteditable = "true"를 추가하면 해당 div의 텍스트에서 굵은 글씨가 표시된다는 것을 알 수 있습니다. 문제는 'execCommand' '그 divs 안에있는 텍스트에 의해 먹히고있다. 해결책은'div' 태그를 버튼으로 변경하거나 CSS 규칙을 사용하는 것입니다. – mark

그랬습니다. 감사. – mesosteros

Meteor의 ExecCommand가 작동하지 않습니다.

답변

관련 문제