Почему не срабатывает execcommand
Перейти к содержимому

Почему не срабатывает execcommand

Почему execCommand(‘createLink’) не работает в Firefox?

Когда я выделяю текст, над ним появляется тулбар с кнопкой «create link», по клику на эту кнопку появляется input и курсор сразу фокусируется на этом инпуте, ввожу ссылку, нажимаю enter, и в firefox ничего не происходит ( ссылка не создается ), в chrome и safari все работает отлично, в чем может быть причина?

events:< 'click .link': 'toggleLink', 'keypress [name="link"]': 'setUrl' >,

сами функции ивентов:

toggleLink: function(e) < if(this.options.nodes.url)< this.$el.find('[name="link"]').val(this.options.nodes.url); >this.lastRange = window.getSelection().getRangeAt(0); this.$el.find('[name="link"]').focus(); >, setUrl: function(e) < if(e.which == 13)< e.preventDefault(); this.$el.find('[name="link"]').blur(); window.getSelection().addRange(this.lastRange); var url = $(e.currentTarget).val(); if(url.length >0)< document.execCommand('createLink', false, url); >else < document.execCommand('unlink', false, null); >> >

что я делаю не так и почему firefox не хочет понимать что я ввел ссылку? спасибо!

  • Вопрос задан более трёх лет назад
  • 2662 просмотра

Document.execCommand()

Когда HTML документ переключён в режим редактирования ( document.designMode ), для него будет доступен метод execCommand , который предоставляет команды для работы с контентом в редактируемой области. Большинство команд влияют на выделение (bold, italics, и т. п.), другие вставляют новые элементы (createLink) или влияют на всю строку (indenting). При использовании contentEditable , вызов execCommand влияет на активный редактируемый элемент.

Синтаксис

execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument) 

Аргументы

String aCommandName

имя команды

Boolean aShowDefaultUI

нужно ли показать пользовательский интерфейс по умолчанию. Это не реализовано в Mozilla.

String aValueArgument

некоторым командам (например insertimage) также требуется значение аргумента (url картинки). Если аргумент не нужен введите null .

Команды

backColor

Изменить цвет фона документа. В режиме styleWithCss командой устанавливается цвет фона родительского блока. Необходима передача строкового значения цвета в качестве аргумента. (Internet Explorer таким образом устанавливает цвет фона текста.)

bold

Включает/отключает выделение жирным bold отмеченного текста или начиная с места ввода текста. (Internet Explorer использует тег вместо .)

contentReadOnly

Делает содержимое документа либо неизменяемым либо редактируемым. Требуется передача булевого true/false в качестве аргумента. (Не поддерживается Internet Explorer.)

copy

Копирует выделенное в буфер обмена. Возможность такого поведения отличается от браузера к браузеру и расширяется со временем. Следует проверить таблицу совместимости, чтобы убедиться в возможности использования.

createLink

Создаёт ссылку из выделения, если таковое имеется. Необходима передача HREF URI в качестве аргумента. URI должен содержать как минимум один символ, допускается пробельный. (Internet Explorer создаст ссылку и без URI.)

cut

Вырезает выделенное и помещает его в буфер обмена. Возможность такого поведения отличается от браузера к браузеру и расширяется со временем. Следует проверить таблицу совместимости, чтобы убедиться в возможности использования.

decreaseFontSize

Добавляет тег (en-US) вокруг выделения или с места ввода текста. (Не поддерживается Internet Explorer.)

delete

Удаляет выделенное.

enableInlineTableEditing

Включает/выключает возможность вставки и удаления строк/столбцов таблицы. (Не поддерживается Internet Explorer.)

enableObjectResizing

Включает/выключает возможность изменения размера картинок и других объектов. (Не поддерживается Internet Explorer.)

fontName

Изменяет название шрифта для выделенного текста или с места ввода текста. Требует передачи в качестве аргумента наименования шрифта (напр., «Arial»)

fontSize

Изменяет размер шрифта выделенного текста или с места ввода текста. Требует передачи в качестве аргумента размера шрифта (1-7).

foreColor

Изменяет цвет шрифта выделенного текста или с места ввода текста. Требует передачи в качестве аргумента наименования шрифта.

formatBlock

Добавляет тег HTML-блока вокруг строк, содержащих в себе выделенный текст, заменяя блочный элемент, содержащий такие строки, если он существует (в Firefox, BLOCKQUOTE является исключением — он обернёт любой блочный элемент). Требует передачи в качестве аргумента наименования Тега. Теоретически может использоваться любой блочный тег (напр., «H1», «P», «DL», «BLOCKQUOTE»). (Internet Explorer поддерживает только теги заголовков H1 — H6, ADDRESS и PRE, которые должны также быть заключены в символы < >, как например: «».)

forwardDelete

Удаляет символ справа от курсора, так же как при нажатии на клавишу delete.

heading

Добавляет тег заголовка вокруг выделенного текста либо в месте, где установлен курсор. Требует передачи строки имени тега в качестве аргумента. (то есть «H1», «H6»). (Не поддерживается в Internet Explorer и Safari)

hiliteColor

Изменяет цвет фона для выделенного текста либо в месте, где установлен курсор. Требует передачи цвета в качестве аргумента. UseCSS должен быть включён для работы этой функции. (Не поддерживается в Internet Explorer)

increaseFontSize

Добавляет тег BIG вокруг выделенного текста или на месте курсора. (Не поддерживается в Internet Explorer)

indent

Добавляет отступ в строку, в которой расположен курсор (или что-то выделено). В Firefox, если выделение охватывает несколько строк с разными уровнями отступа, будут сдвинуты только строки с наименьшим отступом.

insertBrOnReturn

Добавляет тег или разбивает текущий элемент на два блока. Не работает в Internet Explorer

insertHorizontalRule

Вставляет горизонтальную линию на месте курсора (удаляет выделение).

insertHTML

Вставляет HTML текст на месте курсора (удаляет выделенный текст). Требует передачи правильной HTML строки в качестве аргумента. (Не поддерживается в Internet Explorer)

insertImage

Вставляет изображение на место курсора (удаляет выделенный текст). Необходимо указывать ссылку на изображение в параметре «aValueArgument». (Internet Explorer может создавать изображения с пустым SRC)

insertOrderedList

Создаёт пронумерованный список из выбранного или на месте курсора.

insertUnorderedList

Создаёт список из выбранного или на месте курсора.

insertParagraph

Вставляет параграф вокруг выделения или для текущей строки. (Internet Explorer вставляет параграф в месте курсора и удаляет выделенный текст)

insertText

Вставляет простой текст в месте курсора или выделения (выделенный текст будет заменён).

italic

Переключает курсив в месте курсора или выделения. (Internet Explorer использует теги вместо (en-US).)

justifyCenter

Центрирует строку, в которой есть выделение или установлен курсор.

justifyFull

Выравнивает по ширине строку, в которой есть выделение или установлен курсор.

justifyLeft

Выравнивает по левому краю строку, в которой есть выделение или установлен курсор.

justifyRight

Выравнивает по правому краю строку, в которой есть выделение или установлен курсор.

outdent

Добавляет выступ для строки, в которой расположен курсор (или что-то выделено).

paste

Вставляет данные из буфера обмена в место курсора или выделения (последнее заменяется). Доступ к буферу обмена должен быть включён в файле user.js

redo

Повтор последнего действия. (Если было отменено с помощью undo или ctrl+z)

removeFormat

Очищает форматирование для выделенного.

selectAll

Выделяет всё в редактируемом документе.

strikeThrough

Переключает зачёркивание текста для выделения или на месте курсора.

subscript

Переключает нижний индекс для выбранного или на месте курсора.

superscript

Переключает верхний индекс для выбранного или на месте курсора.

underline

Переключает подчёркивание для выбранного или на месте курсора.

undo

Отменяет последнее действие.

unlink

Удаляет ссылку или якорь для выбранной ссылки/якоря

useCSS Устарело

Переключает режим стилизации HTML и CSS для генерируемой разметки. Может принимать только булевы значения true/false. ПРИМЕЧАНИЕ: этот аргумент с перевёрнутой логикой (т.е. false = CSS / true = HTML). (Не поддерживается в Internet Explorer.) Внимание! Эта команда является устаревшей, используйте styleWithCSS.

styleWithCSS

Заменяет команду useCSS. Аргумент работает как ожидалось, т.е. true модифицирует/генерирует атрибуты стиля в разметке, false генерирует элементы форматирования.

Пример

iframeNode.execCommand("bold"); // Жирный текст iframeNode.execCommand("undo"); // Отмена последнего действия iframeNode.execCommand("insertText", false, "Lorem ipsum dolor sit amet, consectetur adipisicing elit."); // Вставка текста

Спецификации

Specification
Trusted Types
# dom-document-execcommand

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • document.contentEditable
  • document.designMode
  • Rich-Text Editing в Mozilla

Почему не срабатывает execcommand

Код ниже работает везде кроме ФФ.
Проблема похоже с focus() или SelectAll, потому что текст вставляется, но не в input а родительский объект.

function doLoad() setTimeout(function() var elem = document.getElementById(«name»);
elem.focus();

document.execCommand(«selectAll»);
document.execCommand(«insertText», false, «12345678»);

document.designMode = «off»;
>,
1000);
>

Мне нужно, чтобы текст был заменен в самом input элементе.
Помогите разобраться с проблемой.
Спасибо.

Почему не срабатывает execcommand

Здравствуйте!
Ребят, кто умеет копировать текст из блока в буфер обмена, отзовитесь!

Казалось бы такая простая задачка, но это ж ёб. джаваскрипт, тут пока не заплюёшь весь экран по десятому разу, ничего не получится.

В общем почти все советы идут через «execCommand(‘copy’)«, но в документации написано, что этот метод устарел (да какая разница один хрен не работает), поэтому не хотелось бы его использовать.
Однако ж инновационно-новый, супер-пупер АХ. какой хороший «window.navigator.clipboard.writeTex t(‘$temp’)» не работает, потому что этот самый clipboard равен ундефинед, как я понимаю (почитав документацию через третьи руки) к нему нельзя получить доступ, если у тебя не https.
А что же нам, простым сайтам с древним http и локальным серверам теперь уже невозможно выполнить простейшее действие, скопировать текст в буфер.

Поможите, чем можите.

Последний раз редактировалось begovik; 07.04.2021 в 09:40 .
Пользователь
Регистрация: 08.03.2010
Сообщений: 48

Неужели никому не приходилось копировать текст из блока.
Или я один такой криворукий и у всех это работает по стандартным советам на форумах?

Участник клуба
Регистрация: 19.01.2009
Сообщений: 1,452

Делайте проверку на существование обьекта и используйте тот вариант который поддерживает браузер.
Пример:

function clipboard (text) < if (!text) return; if ('clipboard' in navigator) < navigator.clipboard.writeText(text); return; >; var input = document.createElement('input'); document.body.appendChild(input); input.style.cssText = 'position:fixed; top:-999px; left:-999px; width:1px; height:1px;'; input.value = text; input.select(); if (document.execCommand('copy')) < setTimeout(function () < input.remove(); >, 1000); > >

Пользователь
Регистрация: 08.03.2010
Сообщений: 48

Спасибо за участие конечно, но это то же самое что и на всех других форумах, и конечно не работает, пробовал на Хроме, Мозиле и Эдже.

Я же писал, что не работает либо .select, либо .execCommand
После

input.select();

делаю вывод

console.log(input.value);

и в консоли есть весь текст, но в буфере пусто.

И ещё один вывод делаю внутри таймаута, вывод в консоль отрабатывает, значит казалось бы

if (document.execCommand('copy')) 

отрабатывает, но в буфере так ничего нового и не появляется.

А у вас что этот код работает?

Последний раз редактировалось begovik; 09.04.2021 в 17:18 .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *