как загрузить контент в крошечном mce?

Question

Я загружаю контент в текстовую область, которая затем инициализируется как экземпляр крошечного mce. Это работает отлично, пока текстовая область не имеет только параграф. Когда я пытаюсь загрузить абзац с изображением внутри, это работает странно. Все содержимое внутри исходного абзаца перемещается в новый абзац, а оригинал добавляется пустым. Почему это происходит? Заранее спасибо.

Я пытаюсь загрузить следующее: -

<p id="paragraph-06C073B3-6BA7-AE52-7BFE-9CA282E448DC" 
class="textElementClass"><div aria-disabled="true" style="position: relative; 
z-index: auto;" class="draggableItem imageElement NestedImg ui-draggable-disabled
ui-state-disabled" id="Element-4C4AC020-0B32-99E9-356E-CCD6470E8294">
<img style="position: relative;" src="images/file-managements.png" class="ImageEdit 
ui-draggable ui-draggable-disabled" 
id="image-4C4AC020-0B32-99E9-356E-CCD6470E8294"></div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown 
printer took a galley of type and scrambled it to make a type specimen book. It has 
survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of 
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><div 
style="" class="dropAfter ui-droppable"></div>

После загрузки изменяется на:

<p id="paragraph-06C073B3-6BA7-AE52-7BFE-9CA282E448DC" 
class="textElementClass">&nbsp;</p>
<div id="Element-4C4AC020-0B32-99E9-356E-CCD6470E8294" class="draggableItem 
imageElement NestedImg ui-draggable-disabled ui-state-disabled" style="position:
relative; z-index: auto;"><img id="image-4C4AC020-0B32-99E9-356E-CCD6470E8294"
class="ImageEdit ui-draggable ui-draggable-disabled" style="position: relative;"
src="images/file-managements.png" alt="" /></div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
   unknown printer took a galley of type and scrambled it to make a type specimen book. It 
   has survived not only five centuries, but also the leap into electronic typesetting, 
  remaining essentially unchanged. It was popularised in the 1960s with the release of 
  Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
  publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>&nbsp;</p>

Answer 1

TinyMCE имеет HTML-движок «нормализатора», который переписывает ваш код на лету. Насколько я помню, это потому, что некоторые браузеры добавляют странные пробельные элементы в редактируемые области контента и другие подобные и другие различия.

Вы не можете поместить тег div (уровень блока) в тег p (уровень блока). TinyMCE, вероятно, принимает это во внимание. Вместо этого используйте стилизованный тег span.

Существует опция init, позволяющая TinyMCE не нормализовать содержимое, но это не рекомендуется, поскольку некоторые браузеры могут отображать содержимое неправильно, как того требует TinyMCE.

Answer 2

Это может быть связано с тем, что p-тег используется в качестве оберточного элемента по умолчанию благодаря tinymce, ведущему к такому странному поведению.

РЕДАКТИРОВАТЬ: "/ div>" не является допустимым HTML-тегом. Попробуйте проверить HTML, который вы хотите вставить.