Question

我的页面中有一个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。

你们有什么线索吗？

提前致谢。

Answer 1

在这里， Just Copy＆amp;粘贴： 版本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>

Answer 2

假设您已经包含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 Example

JSFiddle Example 2 to reflect OP's query

Answer 3

前几天我想在CKEDITOR实例上使用.setReadOnly (true)，然后使用.setReadOnly (false)重新启用它。

使用javascript禁用Ckeditor

3 个答案: