Tinymce Enter 键按下创建断线(<br>)

Question

在我的应用程序中，我使用 Tinymce 插件。

我有一个像这样的

<h1>

标签：

<h1 class="element">Lorem ipsum dolor sit amet.</h1>
<h2 class="element">Lorem ipsum dolor.</h2>

当我将光标放在 h1 标记的末尾并按 Enter 键时，我得到这样的结果：

<h1 class="element">Lorem ipsum dolor sit amet.</h1>
<br>
<h2 class="element">Lorem ipsum dolor.</h2>

但我希望它像这样（创建新的 h1 标签）：

<h1 class="element">Lorem ipsum dolor sit amet.</h1>
<h1 class="element"></h1>
<h2 class="element">Lorem ipsum dolor.</h2>

我该怎么办？

这是我的tinymce初始化脚本

tinymce.init({
  selector: '#editor',
  inline: true,
  force_br_newlines: true,
  force_p_newlines: false,
  forced_root_block: '',
  fixed_toolbar_container: "#toolbarEditor",
  plugins: [
    "",
    "",
    "textcolor"
  ],
  menubar: false,
  toolbar_items_size: 'small',
  toolbar: "bold italic | styleselect fontsizeselect forecolor",
  textcolor_map: ["000000", "Noir", "DA291C", "Rouge Pantone", "ffffff", "Blanc"],
  fontsize_formats: "8px 10px 12px 14px 18px 24px 32px 36px",
  style_formats: [
    {title: 'T1', block: 'h1', class: 'HelveticaNeueLTCom-UltLtCn-100', styles: {'font-size': '36px'}},
    {title: 'T2', block: 'h3', class: 'HelveticaNeueLTCom-UltLtCn-45', styles: {'font-size': '32px'}},
    {title: 'T3', block: 'h4', class: 'HelveticaNeueLTCom-UltLtCn-18', styles: {'font-size': '18px'}},
  ],
  setup: function (editor) {
    editor.on('blur', function (e) {
      if (parseInt(ed.find('#editor_content').css('height')) > parseInt(json.text.h)) {
        alert('Attention ! Vous avez dépassé la hauteur limite! Un retour en arrière sera effectué');
        editor.undoManager.undo();
      }
    });
  }
});

Answer 1

添加此代码

force_br_newlines : true,
force_p_newlines : false,
setup: function (editor) {
            editor.on('keydown', function(e) {
                if (e.keyCode === 13) { 
                    e.preventDefault(); // Prevent default behavior (inserting <p> tag)
                    editor.execCommand('InsertLineBreak'); // Insert <br> tag instead
                }
            });