0

私はアプリケーション用の単純な RTE を作成しています。あまり複雑にする必要はないので、execCommands を使用するのが最善の解決策であると考えました。ただし、無効な HTML を作成するコマンドで問題が発生しました。これが私が使用しているjavascriptです。これを引き起こしている原因についての洞察は大歓迎です。

    $('.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();   });
4

1 に答える 1

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/

MDN でのリッチテキスト編集について読む

于 2012-05-04T06:19:29.777 に答える