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

【问题标题】：wysiwyg - execCommand changing font and font size properly with HTML5所见即所得 - execCommand 使用 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 代码来更改它们，stackoverflow.com/questions/5868295/…
我将保持原样并编写一个函数，将每个更改为就可以了。按原样生成 html 然后编辑字符串对我来说看起来最合适。

标签： javascript html wysiwyg text-formatting

【解决方案1】：

如果您发出此声明一次：

   document.execCommand( 'styleWithCSS', true )

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

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

【讨论】：