Шаблоны Tinymce: Как сохранить курсор внутри div после нажатия ENTER - PullRequest
Новая
       36

Шаблоны Tinymce: Как сохранить курсор внутри div после нажатия ENTER

0 голосов
/ 12 июня 2019

Я использую пользовательские шаблоны в моем TinyMCE.После нажатия кнопки «Шаблоны» пользователь может выбрать макет столбца начальной загрузки для вставки в редактор.

Все вставки и макет работают нормально.После выбора шаблона строки и столбцы начальной загрузки добавляются правильно.

Но, когда я редактирую текст внутри столбца, если я нажимаю ENTER, tinymce не создает внутри pdiv.Он создает одноуровневый элемент div без классов начальной загрузки.

Что мне нужно: с курсором внутри bootstrap column после нажатия ENTER создается пустой тег p под последним элементомв div.

у меня есть скрипка, чтобы объяснить: https://jsfiddle.net/3fd4cn6z/1/

tinymce.init({
  selector: "textarea",
  menubar: false,
  paste_as_text: true,
  resize: true,
  height: 500,
  image_caption: true,
  branding: false,
  media_dimensions: false,
  relative_urls: false,
  convert_urls: false,
  remove_script_host: false,
  keep_styles: false,
  plugins: "link,autolink,advlist,paste,lists,textcolor,colorpicker,hr,emoticons,wordcount,image,imagetools,media,template",
  toolbar: ["undo redo removeformat styleselect bold italic underline strikethrough | alignleft aligncenter alignright alignjustify pagebreak | bullist numlist outdent | template"],
  content_style: ".lws-editor-columns .row .col-xs-12{position:relative}.lws-editor-columns .row .col-xs-12::before{content:'';display:block;position:absolute;height:100%;width:calc(100% - 30px);border:1px dotted gray}.lws-editor-columns .row .col-xs-12 img{max-width:100%;height:auto}",
  content_css: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css",
  content_css_cors: true,
  templates: [{
      "title": "2 columns",
      "description": "Insert on the page, 2 columns with the same width",
      "content": "<div class=\"lws-editor-columns\"><div class=\"row\"><div class=\"col-xs-12 col-sm-12 col-md-6\">Column 1</div><div class=\"col-xs-12 col-sm-12 col-md-6\">Column 2</div></div></div><p></p><p></p><p></p><p></p>"
    },
    {
      "title": "3 columns",
      "description": "Insert on the page, 3 columns with the same width",
      "content": "<div class=\"lws-editor-columns\"><div class=\"row\"><div class=\"col-xs-12 col-sm-12 col-md-4\">Column 1</div><div class=\"col-xs-12 col-sm-12 col-md-4\">Column 2</div><div class=\"col-xs-12 col-sm-12 col-md-4\">Column 3</div></div></div><p></p><p></p><p></p><p></p>"
    },
    {
      "title": "4 columns",
      "description": "Insert on the page, 4 columns with the same width",
      "content": "<div class=\"lws-editor-columns\"><div class=\"row\"><div class=\"col-xs-12 col-sm-12 col-md-3\">Column 1</div><div class=\"col-xs-12 col-sm-12 col-md-3\">Column 2</div><div class=\"col-xs-12 col-sm-12 col-md-3\">Column 3</div><div class=\"col-xs-12 col-sm-12 col-md-3\">Column 4</div></div></div><p></p><p></p><p></p><p></p>"
    },
    {
      "title": "6 columns",
      "description": "Insert on the page, 6 columns with the same width",
      "content": "<div class=\"lws-editor-columns\"><div class=\"row\"><div class=\"col-xs-12 col-sm-12 col-md-2\">Column 1</div><div class=\"col-xs-12 col-sm-12 col-md-2\">Column 2</div><div class=\"col-xs-12 col-sm-12 col-md-2\">Column 3</div><div class=\"col-xs-12 col-sm-12 col-md-2\">Column 4</div><div class=\"col-xs-12 col-sm-12 col-md-2\">Column 5</div><div class=\"col-xs-12 col-sm-12 col-md-2\">Column 6</div></div></div><p></p><p></p><p></p><p></p>"
    }
  ],
});
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.9.4/tinymce.min.js"></script>
<form method="post" action="dump.php">
  <textarea name="content"></textarea>
</form>

Чтобы создать проблему, выполните следующие действия:

  1. На панели инструментов щелкните последний значок «Вставить».шаблон '

  2. Выберите любой шаблон

  3. Вы увидите пунктирные столбцы (один поверх другого - в скрипке я не могу добавитькласс начальной загрузки, но в моем коде я могу, и столбцы располагаются рядом)

  4. В любом столбце (в данном случае ROW) поместите курсор после числа и нажмите ENTER

Вместо того, чтобы развернуть столбец (строку) и добавить p, создается новый брат div.Если я нажимаю SHIFT + ENTER, он производит то, что я хочу, НО ... он не создает p, он просто добавляет br.Это плохо, потому что, если я хочу добавить ul, не будет работать.Попробуйте добавить ul или измените текстовый формат на h1.

Вопрос в том, что есть способ, после нажатия на клавишу ввода, он создает пустое p?

Iпризнателен за любую помощь.

1 Ответ

0 голосов
/ 12 июня 2019

Проблема заключается в следующем: текст по умолчанию «Столбец X» внутри шаблона находится в root div, но правильным является перенос в элемент p.

Содержание шаблона должно быть: 

<div class=\"lws-editor-columns\"><div class=\"row\"><div class=\"col-xs-12 col-sm-12 col-md-6\"><p>Column 1</p></div><div class=\"col-xs-12 col-sm-12 col-md-6\"><p>Column 2</p></div></div></div><p></p><p></p><p></p><p></p>

Я обновил скрипку с рабочей версией: https://jsfiddle.net/xrh2znu0/1/

...