Question

我在TinyMCE中使用自定义模板。单击“模板”按钮后，用户可以选择引导程序列布局以插入到编辑器中。

所有插入和布局均正常。选择模板后，引导行和列将正确添加。

但是，当我在列内编辑文本时，如果按ENTER，tinycece不会在p内创建div。它创建了一个没有引导类的同级div。

我需要的是：将光标放在bootstrap column内，按ENTER后，它将在p的最后一个元素下方创建一个空白的div标签。 / p>

我有个小提琴来解释：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>

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

在工具栏中，单击最后一个图标“插入模板”
选择任何模板
您将看到虚线的列（一个在另一个的上方-在小提琴中，我无法添加bootstrap类，但在我的代码中，我可以并且这些列并排放置）
< / li>
在任何列（在本例中为ROW）中，将光标置于数字之后，然后按ENTER

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

问题是：有一种方法可以在按Enter键后创建空白p？

感谢您的帮助。

Answer 1

问题是：模板内的默认文本“列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/

更新了小提琴。

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

1 个答案: