Этот вопрос был задуман при изучении ответа на вопрос StackOverflow # 37370944 .
В моей базе данных есть разметка html, за которую я хотел бы дать свою html -agnosti c пользователи веб-приложения, чтобы иметь инструмент для редактирования его в браузере. Это справочные материалы, в основном заметки и ссылки на источники. Для этого я использую форму html, сгенерированную на стороне сервера, и виджет JavaScript, то есть ContentTools, который при событии нажатия кнопки отправки формы собирает строку с результирующей разметкой html из отредактированной области и устанавливает его как значение в указанном поле формы.
Проблема в том, что, как я обнаружил, ContentTools не позволяет редактировать вложенную разметку, например, внутри html элементов блока, т.е. <div>, <section>, <article>, <aside> , et c., из коробки или вообще (я не знаю). Чтобы продемонстрировать это, я модифицировал разветвленный пример JSFiddle, предоставленный вышеупомянутым вопросом StackOverflow # 37370944. Итак, взгляните на эту скрипку .
В разметке описаны три кнопки ссылки:
Первая - это автономный <a>, являющийся непосредственным потомком div-оболочки, содержащей отредактированное содержимое области (<div data-name="main-content" data-editable="">).
Вторая кнопка ссылки находится внутри вложенного <div> с установленным атрибутом data-ce-tag="text" для предположительного включения распознавания содержимого как редактируемого текста.
Третья кнопка ссылки находится внутри тега <p>, который является непосредственным потомком обертка div.
Все три элемента-обертки кнопок ссылки (<a>, <div> и <p>) имеют специальный css класс "js -has-anchor" для включения изменение инструментов на панели инструментов через событие «focus», привязанное к редактору Root.
Оказывается, событие «focus» запускается только для <p> (case 3) элементов в документ, не для <div> (случай 2) или <a> (случай 1). В результате только для 3-й кнопки ссылки обновляется набор инструментов панели. Кроме того, элементы <div> и <a> редактировать нельзя.
Разметка html в моей базе данных - это в основном беспорядок, ранее отредактированный в CKEditor или введенный вручную. Я хотел бы, чтобы все доступное содержимое было легко распознано ContentTools как редактируемое (не «stati c»), включая вложенные структуры, подобные структуре в примере ниже. Основная идея предоставленного образца html состоит в том, что это вложенная структура (а не просто список элементов <hN>, <p> и <img>, как в отредактированной области page__content из демо ContentTools ), каждый <section> состоит только из <article> элементов, а каждая статья состоит из заголовка (<hN>) и либо другого раздела, либо обтекания <div>, содержащего все содержимое этой статьи , И я бы хотел, чтобы эта структура не была нарушена, если она уже установлена, и в идеале должна применяться, если ее еще нет. Но все это один регион, который сохраняется в одном текстовом поле моей базы данных (отдельные регионы невозможны).
<h1>Section 1 heading</h1>
<section class="mb-5">
<article>
<h2>Sub-Section 1.1 heading</h2>
<section class="mb-3">
<article>
<h3>Chapter 1.1.1 heading</h3>
<div>
<p>Some text</p>
<figure>
<img src="pic.jpg" alt="Some text" style="width:100%">
<figcaption>Fig.1 - Picture Caption</figcaption>
</figure>
<p>Some other text</p>
</div>
</article>
<article>
<h3>Chapter 1.1.2 heading</h3>
<p>Some text</p>
<figure>
<img src="another_pic.jpg" alt="Some other text" style="width:100%">
<figcaption>Fig.2 - picture caption</figcaption>
</figure>
</article>
</section>
</article>
<article>
<h2>Sub-Section 1.2 heading</h2>
<section class="mb-3">
<article>
<h3>Chapter 1.2.1 heading</h3>
<div>
<p>Some text</p>
<p>Some other text</p>
</div>
</article>
<article>
<h3>Chapter 1.2.2 heading</h3>
<p>Some text</p>
</article>
</section>
</article>
</section>
Итак, это вообще возможно с ContentTools, и я был бы признателен за пример с "настраиваемым" содержимым панели инструментов из JSFiddle , работающим для всех кнопок ссылок ( и все они должны быть доступны для редактирования), а не только для тега <p>.