所见即所得 - execCommand 使用 HTML5 正确更改字体和字体大小

Posted 2023-04-14

【中文标题】所见即所得 - execCommand 使用 HTML5 正确更改字体和字体大小

【英文标题】：wysiwyg - execCommand changing font and font size properly with HTML5

【发布时间】：2016-05-11 18:11:43

【问题描述】：

我正在制作自己的所见即所得。我使用 execCommand，但我遇到了问题。

有很多关于如何制作所见即所得的教程。

当我更改字体大小或字体类型时，我的脚本会生成带有标签的代码。已经过时了。

这是一个非常简单的所见即所得，就像您可以在教程中找到的许多一样。有一个带onload功能的iframe：

function loadIframe()

    document.getElementById('text-iframe').contentWindow.document.designMode = 'on';

还有一些带有 onclick 功能的按钮用于格式化文本。

这是我用来改变字体大小的函数：

function changeFontsize()

    var size = document.getElementById('fontsizeSelect').value;
    document.getElementById('text-iframe').contentWindow.document.execCommand('FontSize', false, size);

其他函数很相似，使用相同的 execCommand 方法，所以我想我不必向您展示它们。

我所见即所得生成的代码如下所示：

<font color="red" face="Verdana" size="5">test</font>

我的问题是：如何让我的 WYSIWYG 生成适合 html5 的现代代码？因为它现在应该被编码，而不是使用过时的标签。

【问题讨论】：

您必须编写自己的 javascript 代码来更改它们，***.com/questions/5868295/…

我将保持原样并编写一个函数，将每个 更改为 就可以了。按原样生成 html 然后编辑字符串对我来说看起来最合适。

【参考方案1】：

如果您发出此声明一次：

   document.execCommand( 'styleWithCSS', true )

然后代码将生成如下内容：

<span style="font-family: Verdana; font-size: x-large;">test</span>