Tinymce 模板：如何在按 ENTER 后将光标保持在 div 内

Question

我在我的 TinyMCE 中使用自定义模板。单击 'templates' 按钮后，用户可以选择要在编辑器中插入的 bootstrap 列布局。

所有的插入和布局工作正常。 select 模板后，bootstrap 行和列已正确添加。

但是，当我在列中编辑文本时，如果我按 ENTER，tinymce 不会在 div 中创建 p。它创建了一个兄弟 div，没有 bootstrap classes.

我需要的是：光标在 bootstrap column 内，按下 ENTER 后，它会在 div 中最后一个元素下方创建一个空白的 p 标签.

我有一个fiddle解释一下：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>

要生成问题，请按照下列步骤操作：

在工具栏中，单击最后一个图标 'Insert template'
选择任意模板
您将看到虚线列（一个在另一个之上 - 在 fiddle 中我无法添加 bootstrap class，但在我的代码中, 我可以并且列并排)
在任何列（在本例中为 ROW），将光标放在数字后面并按 ENTER

它不是扩展列（行）并添加一个 p，而是创建一个新的同级 div。如果我按 SHIFT + ENTER 它会产生我想要的结果，但是......它不会创建 p，它只会添加一个 br。这很糟糕，因为如果我想添加一个 ul，是行不通的。尝试添加 ul 或将文本格式更改为 h1.

问题是：有一种方法可以在按下回车后创建一个空白 p?

感谢任何帮助。

Answer 1

问题是：模板中的默认文本 "Column 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>

我用工作版本更新了 fiddle：https://jsfiddle.net/xrh2znu0/1/

Tinymce 模板：如何在按 ENTER 后将光标保持在 div 内

Tinymce Templates: How to keep cursor inside div after press ENTER

javascript

jquery

tinymce

tinymce-4

tinymce-plugins