1

私のページには、以下のコードで作成された ckeditor があります。

$ckeditor = new CKEditor();
$ckeditor->basePath  = 'ckeditor/' ;
CKFinder::SetupCKEditor( $ckeditor, 'ckfinder/' ) ;
$config['height'] = '300';
$config['width'] = '700';
$initialValue = $initial['content'];
$ckeditor->editor('content', $initialValue, $config);

同じページの選択ボックスの選択に基づいて、この ckeditor を無効にしたいと考えています。

皆さんはこれについて手がかりを持っていますか。

前もって感謝します。

4

3 に答える 3

2

ここにあります、ただコピーして貼り付けてください: バージョン 3.6 以降

<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
var editor;
// The instanceReady event is fired, when an instance of CKEditor has finished
// its initialization.
CKEDITOR.on( 'instanceReady', function( ev ) {
    editor = ev.editor;

    // Show this "on" button.
    document.getElementById( 'readOnlyOn' ).style.display = '';

    // Event fired when the readOnly property changes.
    editor.on( 'readOnly', function() {
        document.getElementById( 'readOnlyOn' ).style.display = this.readOnly ? 'none' : '';
        document.getElementById( 'readOnlyOff' ).style.display = this.readOnly ? '' : 'none';
    });
});

function toggleReadOnly( isReadOnly ) {
    // Change the read-only state of the editor.
    // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setReadOnly
    editor.setReadOnly( isReadOnly );
}
</script>
</head>
<body>
<p>
    <textarea class="ckeditor" id="editor1" name="editor1"></textarea>
</p>
<p>
    <input id="readOnlyOn" onclick="toggleReadOnly();" type="button" value="Make it read-only" style="display:none">
    <input id="readOnlyOff" onclick="toggleReadOnly( false );" type="button" value="Make it editable again" style="display:none">
</p>
</body>
</html>
于 2012-12-12T18:23:13.310 に答える
1

次のコードの jQuery アダプターが含まれていると仮定すると、読み取り専用にする必要があります。まだ含まれていない場合は、例から jQuery アダプターを取得できます。

<div class="wrapper">
    <form id="myfrm" name="myfrm" class="myfrm" action="" method="post">
        <textarea id="myeditor" name="myeditor"></textarea>
        <input type="submit" id="submit" name="submit" value="Submit" />
    </form>
</div>​

そしてjs

$(document).ready(function(e) {
    var myeditor = $('#myeditor');
    myeditor.ckeditor();
    myeditor.ckeditorGet().config.resize_enabled = false;
    myeditor.ckeditorGet().config.height = 200;
    myeditor.ckeditorGet().config.readOnly = true;
});

選択ボックスの選択に基づいて ckeditor を有効または無効にするには、次のような変更イベントを作成する必要があります

$(document).ready(function(){
    //put ckeditor initialization (the above) here.
    $('#myselect').change(function(){
         var x = $(this);
         if(x.val()=='enable'){
             myeditor.removeAttr('disabled');           
         }else if(x.val()=='disable'){
             myeditor.attr('disabled','disabled');            
         }
         myeditor.ckeditorGet().destroy();
         myeditor.ckeditor();
    });
});

上記で行っているのは、元の要素に属性を設定しdisabled="disabled"、現在のインスタンスを破棄した後に ckeditor をリロードすることです。JSFiddle の例 2 を確認してください。

JSFiddle の例

OPのクエリを反映するJSFiddle例2

于 2012-12-13T05:41:32.863 に答える
0

私は.setReadOnly (true)先日、CKEDITOR インスタンスで使用し、それ.setReadOnly (false)を再度有効にするためにこれを行いました。

于 2012-12-12T12:12:42.893 に答える