javascript - 在 TinyMCE 编辑器中使用自定义 Angular 属性

Question

我正在使用 TinyMCE 编辑器来管理我用 Angular 4 构建的网站。

一切工作正常，除了当我添加 routerLink 时属性为<a> tinyMCE 编辑器内的标签 routerLink变成routerlink (不是驼峰式)。

这是我的tinyMCE初始化代码:

var editor_config = {
   path_absolute : real_url,
   selector: "#postTextArea",
   valid_elements: '*[*]'
}

tinymce.init(editor_config);

我允许所有属性，但无法使 routerLink 工作。 TinyMCE 总是将其更改为小写。

Answer 1

问题在于 routerLink 不是有效的 HTML5 - HTML5 中的属性均为小写。

要明白我的意思，请在任何现代浏览器控制台中尝试以下操作:

document.body.innerHTML = '<span ID="x" myCustomAttr="x"></span>';
console.log(document.body.innerHTML);

...这会产生...

<span id="x" mycustomattr="x"></span>

TinyMCE 只是对属性执行浏览器在运行时执行的操作。 它希望始终创建有效的 HTML。

Angular 使用称为规范化的东西来处理浏览器和属性。您可以在这里阅读:

https://docs.angularjs.org/guide/directive/#normalization

您应该能够使用 TinyMCE 应该可以使用的 data-router-link 作为其有效的 HTML5。