1

我想制作自己的文本编辑器。我正在尝试效仿其他几个成熟的编辑器，并使用隐藏<textarea>和可见的<iframe>组合。

我在键入<iframe>. 我可以让 execCommand 在contenteditable <div>上工作，例如，使文本BOLD但在<iframe>.

这是我的 HTML：

<html>
<button type="button" class="btn btn-bold">bold</button>
<textarea id="input" name="input" style="display: none;">Start typing..</textarea>
<iframe frameborder="0" src="javascript:true;" style="">  </iframe>
</html>

这是我的 JavaScript：

    $(function() {
        var currentBtn;
        $("#input").focus(function() {
            currentBtn = this;
        });
        $(".btn").on( 'click', '.btn-bold', function(){
            var $this=$(this);
            if($this.hasClass("btn-bold")){ document.execCommand('bold', false, null);}
            $(currentBtn).contents().focus();
        });
    });

我知道我需要对 iframe 文档而不是父文档执行 execCommand，但只是不确定如何执行此操作。目前，此代码不允许我键入 iframe，因此无法测试粗体按钮的效果。

任何想法将不胜感激！

4

2 回答 2

2

使用Rangy并将<b>所选内容环绕为粗体。您也可以使用此方法执行其他任务。

演示：http ://rangy.googlecode.com/svn-history/r511/trunk/demos/core.html

编辑

如何使iframe可编辑：

window.frames[0].document.getElementsByTagName("body")[0].contentEditable = true;​
于 2012-04-14T17:59:59.733 回答
0

这可能会有所帮助。但它在 javascript 中，我在 google chrome 中运行它。这是代码：

<div>
  <input type="button" onClick="bo()" value="B"> 
  <input type="button" onClick="under()" value="U">
  <input type='button' onClick="f_size()" value="f_size">

<br>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe><br> 
<input type="button" onClick="asd()" value="get_innerhtml"><br> 
<textarea name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea>
</div>
<script>
richTextField.document.designMode = 'On';


function bo(){
    richTextField.document.execCommand('bold',false,null); 
}
function under(){
    richTextField.document.execCommand('underline',false,null);
}
function f_size(){
    var size = prompt('Enter a size 1 - 7', '');
    richTextField.document.execCommand('FontSize',false,size);
}
function asd(){

var text=document.getElementById('richTextField').contentWindow.document.body.innerHTML;
document.getElementById('myTextArea').value=text;
}
</script>
于 2017-03-17T08:36:25.193 回答