首页 > 解决方案 > 包装清单

  • 里面的内容

    使用 tinyMCE 标记

  • 问题描述

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

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

    当我在寻找:

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

    这在 TinyMCE 中可行吗?

    标签: javascripttinymcetinymce-5

    解决方案


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

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

    第二个选项可能很简单:

    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函数中,并将它作为表单提交的一部分运行(或者你对输出所做的任何事情)。


    推荐阅读