Как манипулировать текстом в редактируемых документах iFrame?

Question

Я хочу создать необычные "текстовые области", как у typeit.org.Я почти уверен, что они используют iFrames со значением contentEditable элемента iFrame, установленным в true, но как могут работать кнопки с символами?При использовании этого метода, как вы заменяете текущее выделение внутри фрейма символом или, если ничего не выделено, вставляете символ слева от курсора?http://currencies.typeit.org/

Answer 1

При использовании iFrame в качестве редактора форматированного текста вы можете указать iFrame включить режим разработки и выполнить команды.

Чтобы включить режим дизайна (что позволяет пользователю редактировать iframe), вы можете использовать этофрагмент:

document.getElementById("myiframe").document.designMode="on";

Затем, чтобы выполнить команду, когда пользователь нажимает кнопку, вы просто используете этот фрагмент кода:

var textEditor = document.getElementById("myiframe");
textEditor.document.execCommand(x,"",y);
textEditor.focus();

, где x - команда, а yэто значение.Для получения дополнительной информации о доступных командах посмотрите MSDN .Я считаю, что OverWrite обеспечивает функциональность, которую вы видите в TypeIt;но я могу ошибаться, я посмотрю в него и обновлю свой ответ.

РЕДАКТИРОВАТЬ: Как предложил @TimDown: IE не поддерживает insertHTML, поэтому для того, чтобы сделать эквивалент вIE, используйте textEditor.document.selection.createRange().pasteHTML("some HTML").