CLeditor 使用 HTML 'align' 属性。如何将其更改为 CSS 'text-align'？

Question

我已经在我正在开发的网站上设置了 CLeditor。目前我正在设置它，以便当您在编辑器中输入和编辑时，您可以在其上方看到结果的实时预览，这很像您在输入 StackOverflow 问题时得到的结果，尽管更基本。

它通过简单地将 iframe 内容的内部 HTML 复制到页面上的另一个位置来工作。但是我遇到了一个烦人的问题。例如，当我使用对齐按钮（左、中、右）时，它会将属性align="right" 添加到所选文本中。虽然它可以在编辑器中工作，但它不能在页面本身上工作，可能是因为该属性已经过时了。

...

我实际上在输入这个问题时想出了如何解决这个问题。不过，我会用我的解决方案发布这个问题。另外，我还有一个相关问题要补充。

最初我尝试将以下 CSS 应用于页面：

div[align="right"] {
    text-align:right!important;
    }

这适用于最初将数据加载到页面上，但在编辑器中动态更改对齐时，实时预览并未反映更改。起初我以为这是因为样式仅在加载时应用。

嗯，那是个脑残，因为我比那更清楚。真正的问题是我选择了一个 DIV 元素，而 align 属性不一定适用于 DIV。将div[align="right"] 更改为*[align="right"] 效果很好。

然而，即使我找到了解决这个特定问题的方法，我仍然无法弄清楚 cleditor 如何为 iframe 构建 HTML 输出。 align 属性在代码中来自哪里，它如何知道将其（以及所有其他元素/属性）放入 HTML 中？如果我有办法处理它，我可以简单地告诉它使用内联 CSS 进行对齐，而不是弃用的 align HTML 属性。请注意，我不希望启用 cleditor 的内置“useCSS”功能。

感谢您分享的任何信息，请不要仅仅因为我已经解决了最初的问题就对这个问题投反对票。如果他们遇到同样的问题，我希望这能够帮助其他人。 （我也会发布我的答案作为答案）。

Answer 1

将以下 CSS 应用于页面的实时预览效果很好：

*[align="right"] {
  text-align:right!important;
}

不要忘记对左和中做同样的事情。