使用 tinyMCE 在 <p> 标签内包装列表 <li> 内容

Question

我希望 <ul> 项目的内容包装在 <p> 标签中。所以现在 TinyMCE 正在创建这样的列表：

<ul>
   <li>Demo</li>
</ul>

我正在寻找：

<ul>
   <li><p>Demo</p></li>
</ul>

这在 TinyMCE 中可行吗？

Answer 1

有几种方法可以解决这个问题，例如扩展列表插件以执行您想要的操作或在使用它之前修改生成的标记（发送到服务器或其他）。

第一个选项的主要问题是您将无法再轻松更新插件，因为您的版本将不再是“官方”版本。这对您来说可能是问题，也可能不是问题。

第二个选项可以像这样简单：

const temp = document.createElement('div');
temp.innerHTML = /* your tinymce output */;

const listItems = temp.querySelectorAll('li');

listItems.forEach(li => {
    const p = document.createElement('p');
    p.textContent = li.textContent;
    li.textContent = '';
    li.appendChild(p);
});

return temp.innerHTML; // your modified output

代码未经测试，但应该能为您提供大致思路。我会把它放在一个 wrapLiContents 函数中，然后运行它作为你提交表单的一部分（或者你对输出所做的任何事情）。

使用 tinyMCE 在 <p> 标签内包装列表 <li> 内容

Wrap list <li> content inside <p> tag using tinyMCE

javascript

tinymce

tinymce-5