在Directus中修改TinyMCE自定义代码格式的换行行为

在Directus里用TinyMCE给博客加了个代码块自定义格式，当前配置是这样的：

[
    {
        "title": "Code",
        "inline": "span",
        "classes": "code_snippet"
    }
]

现在碰到俩问题：

1. 按回车的时候会生成新的span标签，导致代码块每行都有边框，我想要的是整个代码块被一个边框包住，能不能只针对这个代码块强制用<br>换行，其他的p、h1这些元素还是保留默认的换行行为？
2. 不想让这个span标签被嵌套在p标签里，之前试过把自定义格式的inline改成p但没用，才换成了span。

一、让代码块内用<br>换行，其他元素保持原样 #

要实现这个，得结合TinyMCE的几个配置项，还要把自定义格式改成块级元素：

1. 先改自定义格式配置，把行内的span换成块级的div（或者pre，看你需求），这样就不会被自动套p标签了：

[
    {
        "title": "Code Block",
        "block": "div",
        "classes": "code_snippet",
        "wrapper": false
    }
]

2. 然后在Directus的TinyMCE高级配置里加下面的规则，专门给.code_snippet的元素设置换行逻辑：

tinymce.init({
  // 其他你原来的配置...
  forced_root_block: 'p', // 其他内容默认还是用p标签
  force_br_newlines: false,
  force_p_newlines: true,
  formats: {
    code_snippet: {
      selector: 'div.code_snippet',
      forced_root_block: false, // 这个元素里不强制生成p标签
      force_br_newlines: true, // 按回车就生成<br>
      force_p_newlines: false
    }
  }
});

这样你选中内容应用「Code Block」格式后，按回车只会加<br>，不会新建div，整个代码块就是一个容器，边框自然能包住所有内容。

二、避免被p标签嵌套的正确姿势 #

之前设inline: "p"没用是因为p是块级元素，inline属性只能指定行内元素。正确的做法是用block属性指定块级容器：

• 用div的话，样式自定义起来灵活，兼容性也好；
• 如果想要保留代码里的空格、缩进，直接用pre标签更合适，配置改成这样：

[
    {
        "title": "Code Block",
        "block": "pre",
        "classes": "code_snippet",
        "wrapper": false
    }
]

这样应用格式后，内容直接放在<pre class="code_snippet">里面，不会被p标签嵌套。

内容的提问来源于stack exchange，提问作者Brenden