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

JSFiddle 示例 2 反映 OP 的查询

于 2012-12-13T05:41:32.863 回答
0

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

于 2012-12-12T12:12:42.893 回答