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

Question

I'm using custom templates in my TinyMCE. After click in 'templates' button, the user can to choose a bootstrap column layout to insert in the editor.

All the insertions and layout works fine. After select the template, the bootstrap rows and columns are added correctly.

But, when I'm editing a text inside a column, if I press ENTER, tinymce don't creates a p inside the div. It creates a sibling div, without bootstrap classes.

What I need is: With the cursor inside the bootstrap column, after press ENTER, it creates a blank p tag below the last element in the div.

I have a fiddle to explain: 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>

To produce the issue, follow these steps:

In the toolbar, click in the last icon 'Insert template'
Choose any template
You will see the dotted columns (one on top of the other - In fiddle I can't add bootstrap class, but in my code, I can and the columns are side by side)
In any column (in this case, ROW), put the cursor after the number and press ENTER

Rather than to expand the column (row) and add a p, it creates a new sibling div. If I press SHIFT + ENTER it produces what I want, BUT... it doesn't creates a p, it just add a br. This is bad, because if I want to add a ul, will not works. Try to add a ul or change the texto format to h1.

The question is: There's a way to, after press enter it creates a blank p?

I appreciate any help.

Diego Somar Diego Somar · Accepted Answer · 2019-06-12T09:37:55

The problem is: Default text "Column X" inside the template is in root div, but the correct is to wrapp in a p element.

The template content must be:

<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>

I updated the fiddle with the working version: https://jsfiddle.net/xrh2znu0/1/

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

1 Answers