From a8ef9d9e0013fa6b7ded33595de89b36bdee5eb5 Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Sat, 9 Dec 2023 01:21:22 +0300 Subject: [PATCH] [ru] remove obsolete `conflicting/Web/HTML/Global_attributes/contenteditable` (#17350) [ru] remove obsolete 'conflicting/Web/HTML/Global_attributes/contenteditable' --- files/ru/_redirects.txt | 1 - files/ru/_wikihistory.json | 4 - .../contenteditable/index.md | 241 ------------------ 3 files changed, 246 deletions(-) delete mode 100644 files/ru/conflicting/web/html/global_attributes/contenteditable/index.md diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 1b131d8fa083bd..a3f38b4025047a 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -674,7 +674,6 @@ /ru/docs/Web/Guide/HTML/Content_categories /ru/docs/Web/HTML/Content_categories /ru/docs/Web/Guide/HTML/Drag_and_drop /ru/docs/Web/API/HTML_Drag_and_Drop_API /ru/docs/Web/Guide/HTML/Drag_and_drop/Drag_operations /ru/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations -/ru/docs/Web/Guide/HTML/Editable_content /ru/docs/conflicting/Web/HTML/Global_attributes/contenteditable /ru/docs/Web/Guide/HTML/Forms /ru/docs/Learn/Forms /ru/docs/Web/Guide/HTML/Introduction /ru/docs/Learn/HTML/Introduction_to_HTML /ru/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages /ru/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index e1ec966954b4eb..5c146dde810594 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -16390,10 +16390,6 @@ "modified": "2019-03-23T23:27:06.077Z", "contributors": ["wbamberg"] }, - "conflicting/Web/HTML/Global_attributes/contenteditable": { - "modified": "2019-03-18T21:32:40.829Z", - "contributors": ["warsan"] - }, "conflicting/Web/HTTP/CORS": { "modified": "2019-07-16T07:11:05.759Z", "contributors": ["curdwithraisins"] diff --git a/files/ru/conflicting/web/html/global_attributes/contenteditable/index.md b/files/ru/conflicting/web/html/global_attributes/contenteditable/index.md deleted file mode 100644 index 2d0e003771a20c..00000000000000 --- a/files/ru/conflicting/web/html/global_attributes/contenteditable/index.md +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: Создание контента для редактирования -slug: conflicting/Web/HTML/Global_attributes/contenteditable -original_slug: Web/Guide/HTML/Editable_content ---- - -В HTML любой элемент может быть доступен для редактирования. Используя некоторые обработчики событий JavaScript, вы можете превратить свою веб-страницу в полноценный и быстрый текстовый редактор. В этой статье содержится некоторая информация об этой функции. - -## Как это работает? - -Все, что вам нужно сделать, это установить атрибут [`contenteditable`](/ru/docs/Web/HTML/Global_attributes#contenteditable) почти на любой элемент HTML, чтобы сделать его доступным для редактирования. - -Вот простой пример, который создаёт элемент {{HTMLElement("div")}}, содержимое которого пользователь может редактировать. - -```html -
- Этот текст может быть отредактирован пользователем. -
-``` - -Вот приведённый выше HTML-код в песочнице: - -{{ EmbedLiveSample('Как_это_работает') }} - -## Выполнение команд - -Когда HTML-элемент имеет `contenteditable` установленный в `true`, метод {{ domxref("document.execCommand()") }} становится доступным. Это позволяет запускать команды для управления содержимым редактируемого региона. Большинство команд влияют на выбор документа, например, применяя стиль к тексту (полужирный, курсив и т. д.), в то время как другие вставляют новые элементы (например, добавление ссылки) или влияют на всю строку (отступы). При использовании `contentEditable`, вызов `execCommand()` будет влиять на текущий активный редактируемый элемент. - -## Различия в генерации разметки - -Использование `contenteditable` в разных браузерах было болезненным в течение длительного времени из-за различий в сгенерированной разметке между браузерами. Например, даже что-то простое, что происходит, когда вы нажимаете Enter/Return для создания новой строки текста внутри редактируемого элемента, обрабатывалось по-разному в основных браузерах (Firefox вставлял элементы {{htmlelement("br")}}, IE/Opera использовала {{htmlelement("p")}}, в Chrome/Safari использовался {{htmlelement("div")}}). - -К счастью, в современных браузерах ситуация несколько более последовательна. Начиная с [Firefox 60](/ru/docs/Mozilla/Firefox/Releases/60), Firefox будет обновлён, чтобы обернуть отдельные строки в элементах {{htmlelement("div")}}, соответствующих поведению Chrome, современной Opera, Edge и Safari. - -Попробуйте это в приведённом выше примере. - -> **Примечание:** Internet Explorer, который больше не разрабатывается, использует элементы {{htmlelement("p")}} вместо `
`. - -Если вы хотите использовать другой разделитель абзацев, все вышеперечисленные браузеры поддерживают {{domxref("document.execCommand")}}, предоставляющий для этих изменений команду `defaultParagraphSeparator`. Например, чтобы использовать элементы {{htmlelement("p")}}: - -```js -document.execCommand("defaultParagraphSeparator", false, "p"); -``` - -Добавочно, Firefox поддерживает нестандартный аргумент, `br`, для `defaultParagraphSeparator` с Firefox 55. Это действительно полезно, если ваше веб-приложение обеспечивало поддержку старого Firefox, а у вас, к сожалению, нет времени исправить его для более нового Firefox, то вы можете вернуть прежнее поведение Firefox вставкой этой строки во время инициализации `designMode` или `contenteditable` редактора: - -```js -document.execCommand("defaultParagraphSeparator", false, "br"); -``` - -## Безопасность - -По соображениям безопасности Firefox не позволяет JavaScript-коду использовать связанные с буфером функции (копировать, вставлять и т. д.) по умолчанию. Используя `about:config` вы можете включить их, установив настройки, показанные ниже: - -``` -user_pref("capability.policy.policynames", "allowclipboard"); -user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org"); -user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess"); -user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); -``` - -## Пример: - -Простой, но полный текстовый редактор: - -```html - - - -Rich Text Editor - - - - -
- -
- - - - - -
-
- - - - - - - - - - - - - - - - - - - - -
-

Однажды в студёную, зимнюю пору...

- - -
- - -``` - -```css -.content { display: none; } -.content::after { - display: block; content: ' ( 'url(href="sample.php")' ) '; -} -form { - display: inline-block; - background-color: rgba(180,180,180,.8); - border: 1px solid rgba(155,155,155,.6); -} -.intLink { cursor: pointer; } -img.intLink { border: 0; } -#toolBar1 select { font-size:10px; background-color: #eff;} -#textBox { - min-width: 500px; - height: 300px; - border: 1px solid rgba(155,155,155,.6); - padding: 12px; - overflow: scroll; - background-color: #eff; -} -#textBox #sourceText { - padding: 0; - margin: 0; - max-width: 800px; - min-height: 200px; -} -#switchBox, label, #btn { cursor: pointer; } -``` - -```js -var oDoc, sDefTxt; - -function initDoc() { - oDoc = document.getElementById("textBox"); - sDefTxt = oDoc.innerHTML; - if (document.compForm.switchBox.checked) { setDocMode(true); } -} - -function formatDoc(sCmd, sValue) { - if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); } -} - -function validateMode() { - if (!document.compForm.switchBox.checked) { return true ; } - alert("Uncheck \"Показать HTML\"."); /* убрать галочку из "Показать HTML" */ - oDoc.focus(); - return false; -} - -function setDocMode(bToSource) { - var oContent; - if (bToSource) { - oContent = document.createTextNode(oDoc.innerHTML); - oDoc.innerHTML = ""; - var oPre = document.createElement("pre"); - oDoc.contentEditable = false; - oPre.id = "sourceText"; - oPre.contentEditable = true; - oPre.appendChild(oContent); - oDoc.appendChild(oPre); - document.execCommand("defaultParagraphSeparator", false, "div"); - } else { - if (document.all) { - oDoc.innerHTML = oDoc.innerText; - } else { - oContent = document.createRange(); - oContent.selectNodeContents(oDoc.firstChild); - oDoc.innerHTML = oContent.toString(); - } - oDoc.contentEditable = true; - } - oDoc.focus(); -} - -function printDoc() { - if (!validateMode()) { return; } - var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); - oPrntWin.document.open(); - oPrntWin.document.write("Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>"); - oPrntWin.document.close(); /* */ -} -``` - -Результат: {{EmbedLiveSample('Пример')}} - -## Смотрите также - -- {{domxref("HTMLElement.contentEditable")}} -- [`contenteditable`](/ru/docs/Web/HTML/Global_attributes#contenteditable) глобальный атрибут -- [Midas](/ru/docs/Mozilla/Projects/Midas) (компонент сценария для текстового редактора) -- {{cssxref("caret-color")}}, позволяющий установить цвет вставляемого текста