Javascript将粗体文本添加到框架

Question

我想在上添加粗体（参见插图）。 如果我这样做：

        p:function{
        sel = this.getSelection().getRangeAt(0);
        var caretPosition = sel.endOffset;
        var existingText = this.iframe[0].contentWindow.document.body.innerText;

        var before = existingText.substring(0, caretPosition);
        var after = existingText.substring(caretPosition);

        this.iframe[0].contentWindow.document.body.innerHTML= before 
        +'**<b>**(see illustration)**</b>** ' + after;
        },

然后，我写的所有文字（请参见插图变为粗体）。

在此处输入图片说明

Answer 1

如果您想使用粗体，斜体或其他命令创建可编辑的iframe ，则可以使用基础浏览器命令，这些命令可以通过execCommand方法触发。

您可以在此处看到更多信息的资源：
https://developer.mozilla.org/zh-CN/docs/Web/API/document.execCommand
https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla

所有现代浏览器均支持这些方法。

Answer 2

我提供了一个简单的示例，向您展示execCommand工作方式

<iframe id = "my-editable">
    <html>
        <body contenteditable = "true">
        </body>
    </html>
</iframe>

JavaScript代码：

var iframe = document.getElementById('my-editable');
var iframeDoc = iframe.contentWindow.document;

// type and select some text into iframe
// For making selected text to be bold, just execute the following command
iframeDoc.execCommand('bold');

更新

var body = iframeDoc.body;
body.innerHTML = body.innerHTML + '<b>' + 'your bold text' + '</b>' + 'your boldless text'

Javascript将粗体文本添加到框架

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-06-16 09:03:34

解决方案2
1 2014-06-16 09:33:00

Javascript将粗体文本添加到框架

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-06-16 09:03:34

解决方案2 1 2014-06-16 09:33:00

解决方案1
3 已采纳 2014-06-16 09:03:34

解决方案2
1 2014-06-16 09:33:00