ExecCommand in Meteor не работает

Я пытаюсь реализовать основные функции редактирования текста RichTextEditable в Meteor, и у меня возникла проблема с execCommand. Команды отмены и повтора работают нормально, но любая другая команда, такая как полужирный и курсив, не работает и не выдаёт никаких ошибок. Код также отлично работал как обычная страница (я сделал очевидную адаптацию для Meteor, такую как шаблоны и события).ExecCommand in Meteor не работает

Мой HTML:

<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 нерабочих + откат транзакции, как он работает, как для остальных его довольно много же):

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"); 
       } 
    )}; 
}

Кто-то знать, вопрос? Имеет ли он какое-то отношение к документу или сфере действия?

источник

2015-01-20 mesosteros

' "нулевой"' неправильно. Это должно быть просто «null» без кавычек. Однако я не уверен, что это будет иметь значение. Ваш редактор использует iframe для содержимого редактора? –

Нет, это не имеет никакого значения. У меня было это как раз до нуля, и я просто тестировал, было ли это из-за моего линта. Я не использую iframe, и я специально не хочу этого делать. – mesosteros

OK. Нет очевидной причины, по которой это не сработает. –

Если вы измените div метки на button вместо (для интерактивных элементов), или сделать текст ДИВ неактивна (например отключение user-select с CSS), он должен работать, как вы ожидаете.

Причина заключается в том, что при нажатии на div с текстом внутри, execCommand цели текста div «s (который не является contenteditable), поэтому команда не молча. Попробуйте добавить contenteditable="true" в div, и вы увидите, что он будет выделен жирным шрифтом в тексте div, если вы нажмете на него. В качестве альтернативы попробуйте добавить правило css -webkit-user-select: none; (в Chrome префикс поставщика отличается в других браузерах), чтобы отключить выбор текста в div, и вы увидите, что 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

У меня есть contenteditable = "true" в div. Это в коде выше. -webkit-user-select: none; не работал. – mesosteros

@mesosteros Посмотреть мое редактирование - я думаю, что я не понял. Я имел в виду, что если вы добавите 'contenteditable =" true "' в элементы clickable 'div' (те, у которых есть идентификаторы), вы увидите, что выделение полужирным шрифтом происходит в тексте этих divs, подразумевая, что проблема заключается в том, что' execCommand 'съедается текстом внутри этих' divs'. Решение состоит в том, чтобы либо сменить теги div на кнопки, либо использовать правило css. – mark

Это было сделано. Благодарю. – mesosteros

ExecCommand in Meteor не работает

ответ

Смежные вопросы