2012-05-04 4 views
0

私はアプリケーション用の単純なRTEを作成していますが、複雑すぎる必要はありませんので、execCommandsを使用することが最適な解決策であると考えました。私は、無効なHTMLを作成するコマンドで問題に遭遇しました。ここに私が使用しているjavascriptがあります。これを引き起こしていることについての洞察は非常に高く評価されます。execCommandが無効なhtmlを作成しています

$('.turnEditOn').live('click',function(){ 
     richTextEditor.document.designMode = 'ON'; 
     $('#richTextEditor').focus(); }); 
    $('#bold').live('click',function(){ 
     richTextEditor.document.execCommand('bold',false,null); 
     $('#richTextEditor').focus(); }); 
    $('#underline').live('click',function(){ 
     richTextEditor.document.execCommand('underline',false,null); 
     $('#richTextEditor').focus(); }); 
    $('#italic').live('click',function(){ 
     richTextEditor.document.execCommand('italic',false,null); 
     $('#richTextEditor').focus(); }); 
+0

何ですかRich Text Editing in MDNを読む 'richTextEditor' variabl e。 iframeウィンドウオブジェクトへのポインタですか? '$( '#richTextEdito')'と '$( '#richTextEditor')とは何ですか?同じオブジェクト(typo)ですか? jQueryオブジェクト '$( '#richTextEditor')'は 'richTextEditor'変数と同じオブジェクトを指していますか? –

+0

はい、それは$( '#richTextEditor')であったはずです。同じオブジェクトです。 idがrichTextEditorのiframeです。 – BigLig

+0

HTMLの何が問題ですか? –

答えて

0

HTML:

<div id="turnEditOn" class="command">on</div> 
<div id="bold" class="command"><b>B</b></div> 
<div id="italic" class="command"><i>I</i></div> 
<div id="underline" class="command"><u>U</u></div> 
<div class="command" onclick="alert(document.getElementById('richTextEditor').contentDocument.body.innerHTML);">Show HTML</div> 
<br/> 
<iframe id="richTextEditor" style="width:500px;height:300px;"></iframe> 

JAVASCRIPT + jQueryの(onDomReady):

var richTextEditor=document.getElementById("richTextEditor"); 
$('#turnEditOn').live('click',function(){ 
    richTextEditor.contentDocument.designMode = 'ON'; 
    richTextEditor.contentDocument.body.contentEditable=true; 
    // Switch FireFox RTE execCommand engine to work in same manner as IE 
    try{richTextEditor.contentDocument.execCommand('styleWithCSS',false,false);} 
    catch(e){} 
    richTextEditor.focus(); 
}); 
$('#bold').live('click',function(){ 
    richTextEditor.contentDocument.execCommand('bold',false,null); 
    richTextEditor.focus(); 
}); 
$('#underline').live('click',function(){ 
    richTextEditor.contentDocument.execCommand('underline',false,null); 
    richTextEditor.focus(); 
}); 
$('#italic').live('click',function(){ 
    richTextEditor.contentDocument.execCommand('italic',false,null); 
    richTextEditor.focus(); 
}); 

例:http://jsfiddle.net/d2L2A/

関連する問題