配置 TinyMCE 4 以允许内联元素或锚标记 (a) 成为顶级元素

Question

基本上，我想放置一个锚元素作为顶级元素，但是每次关闭源代码面板时 TinyMCE 都会强制执行它自己的想法。

免责声明：TinyMCE 是一个了不起的免费所见即所得编辑器工具。我只是度过了非常糟糕的一天。

TinyMCE，据称 "the most advanced wysiwyg html editor"，经常甚至不能让你输入你想要的 html，而不是在你保存或关闭源代码的那一刻为你搞砸了，这让我很痛苦查看。

我想要做的就是能够关闭编辑器，让我的代码（甚至只是锚元素）完好无损。但无论我向 TinyMCE 传递什么选项或配置，它都会反复撕裂我的代码；不小心将文档中的元素分散成破碎的梦的碎片。

<!-- Casually transforming this -->

<a class="box" href="#">
 <div class="title">Box Title</div>
 <p>This is the box content!</p>
</a>

<!-- into this -->

<p><a class="box" href="#"></a></p>
<div class="title"><a class="box" href="#">Box Title</a></div>
<p><a class="box" href="#">This is the box content!</a></p>
<p></p>

由于某些他们自己熟知的原因，他们删除了拯救生命的清理选项，使您可以完全禁用这种可憎的行为，而且我无法使任何 valid_elements/children 选项正常工作。 (a[*], 等等)

我花了最后 3 个小时搜索他们的文档、论坛和堆栈溢出，但毫无用处。我唯一的安慰终于是able to put block-level elements within anchor tags，但这只解决了我的部分问题。

我面临的主要问题是 TinyMCE 不允许我在顶层放置包含块级元素的锚标记。 任何人都知道如何配置TinyMCE 允许这样做吗？

TinyMCE 代码（精简到相关）：

tinymce.init({
    selector: 'textarea.wysiwyg',
    schema: "html5",        
    element_format : 'html',
    plugins: ['codemirror'],
    convert_urls: false,
    valid_elements: "*[*]",
    valid_children: "+body[a],+a[div|h1|h2|h3|h4|h5|h6|p|#text]",
    //apply_source_formatting: false,                // removed I think
    //verify_html: false,                            // removed :'(
    codemirror: { indentOnInit: true },
    content_css: '/Content/Styles/Sass/main.css'
});

Answer 1

解决方法是禁用forced_root_block。

tinymce.init({
    ...
    forced_root_block : false, // default = 'p' >= 3.0a1
});

此功能自动确保任何非块元素或文本节点都包含在块元素中。

例如 something 将导致输出如 something.

Documentation Reference

配置 TinyMCE 4 以允许内联元素或锚标记 (a) 成为顶级元素

Configure TinyMCE 4 to allow inline element or anchor tag (a) to be the top level element

html

javascript

wysiwyg

tinymce

tinymce-4