Javascript 所见即所得文本编辑器的制作_Javascript_Jquery_Iframe_Wysiwyg_Text Editor

Javascript 所见即所得文本编辑器的制作

javascript jquery iframe

Javascript 所见即所得文本编辑器的制作,javascript,jquery,iframe,wysiwyg,text-editor,Javascript,Jquery,Iframe,Wysiwyg,Text Editor,我想做我自己的文本编辑器。我正试图仿效其他几个成熟编辑器的例子，使用隐藏的和可见的组合我在键入的第一步遇到了麻烦。我可以让execCommand处理可编辑的内容，例如，将文本设置为粗体，但在上执行时遇到问题这是我的HTML： <html> <button type="button" class="btn btn-bold">bold</button> <textarea id="input" name="input" style="display:

我想做我自己的文本编辑器。我正试图仿效其他几个成熟编辑器的例子，使用隐藏的

和可见的

组合

我在键入

的第一步遇到了麻烦。我可以让execCommand处理可编辑的内容，例如，将文本设置为粗体，但在

上执行时遇到问题

这是我的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>

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

任何想法都将不胜感激

使用

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

演示：

编辑如何使iframe可编辑：

window.frames[0].document.getElementsByTagName("body")[0].contentEditable = true;

-带粗体按钮

<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>








richTextField.document.designMode='On'；
函数bo（）{
richTextField.document.execCommand（'bold'，false，null）；
}
在（）下的函数{
richTextField.document.execCommand（'underline'，false，null）；
}
函数f_size（）{
变量大小=提示（'输入大小1-7'，''）；
richTextField.document.execCommand（'FontSize'，false，size）；
}
函数asd（）{
var text=document.getElementById（'richTextField'）.contentWindow.document.body.innerHTML；
document.getElementById（'myTextArea'）。值=文本；
}

IFRAME

iframe

iframe

iframe

keyup

内容可编辑的

内容可编辑的

contenteditable

textarea

iframe

<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>