javascript CKEditor 只读

CKEditor ReadOnly

提问by Vegard Skui

I got a problem since I use the CKEditor (http://ckeditor.com/). The problem is that I can't find a way to make the editor ReadOnly and I can't just use a textarea since I want to keep consistency. I've already seen lots og questions like this at StackOwerflow, but none of them work or are too old.

自从我使用 CKEditor ( http://ckeditor.com/)以来，我遇到了问题。问题是我找不到使编辑器只读的方法，而且我不能只使用 textarea，因为我想保持一致性。我已经在 StackOwerflow 上看到了很多这样的问题，但它们都不起作用或太旧了。

My code so far is only to display/initialize the editor:

到目前为止，我的代码只是显示/初始化编辑器：

$(document).ready(function(){
    CKEDITOR.replace( 'ckeditor', {
        on: {
            // Check for availability of corresponding plugins.
            pluginsLoaded: function( evt ) {
                var doc = CKEDITOR.document, ed = evt.editor;
                if ( !ed.getCommand( 'bold' ) )
                    doc.getById( 'exec-bold' ).hide();
                if ( !ed.getCommand( 'link' ) )
                    doc.getById( 'exec-link' ).hide();
            }
        }
    });
});

I use the newest CKEditor version(v.4.1.1 Full package)

我使用最新的 CKEditor 版本（v.4.1.1 完整包）

Thanks in advance! :)

提前致谢！:)

回答by epascarello

In the docs readOnlyyou can set the config to readOnly

在文档readOnly 中，您可以将配置设置为 readOnly

config.readOnly = true;

There is also an examplethat shows setting it via a method

还有一个示例显示通过方法设置它

editor.setReadOnly( true);

回答by user3020010

try with following lines,

尝试使用以下几行，

<textarea id="editor1" name="editor1" ></textarea>
<textarea id="editor2" name="editor2" ></textarea>

<input type="button" onclick="EnableEditor2()" value="EnableEditor2" />

<script>
      $(document).ready(function () {

         //set editor1 readonly
         CKEDITOR.replace('editor1', {readOnly:true});
         CKEDITOR.replace('editor2');

         //set editor2 readonly
         CKEDITOR.instances.editor2.config.readOnly = true;

      });

      function EnableEditor2() {
         CKEDITOR.instances.editor2.setReadOnly(false);
      }
</script>

回答by picios

have you tried this?

你试过 这个吗？

they say, that this should work

他们说，这应该有效

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.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setReadOnly
    editor.setReadOnly( isReadOnly );
}

and html

和 html

<form action="sample_posteddata.php" method="post">
    <p>
        <textarea class="ckeditor" id="editor1" name="editor1" cols="100" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</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>
</form>

回答by Memonic

Sources :

来源：

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.readOnlyhttp://rev.ckeditor.com/ckeditor/trunk/7657/_samples/readonly.html

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.readOnly http://rev.ckeditor.com/ckeditor/trunk/7657/_samples/readonly.html

CKEDITOR.config.readOnly = true;

CKEDITOR.config.readOnly = true;

回答by Jeremy Byron

Check this one out. The idea is if a user logs in a system with a classification other than 'BPPA', the CK editor shall be disabled and read-only. If the classification of a user is BPPA, thus the CK editor is editable. Note that these code fractions are actually in PHP. They need a working database to work but I figured you might get the idea and be able to work your own magic.

看看这个。这个想法是，如果用户登录的系统的分类不是“BPPA”，则 CK 编辑器将被禁用和只读。如果用户的分类是BPPA，则CK编辑器是可编辑的。请注意，这些代码片段实际上是用 PHP 编写的。他们需要一个有效的数据库才能工作，但我想你可能会明白这个想法并能够发挥你自己的魔力。

<?php
                //This line is to disable PART A if classification != 'BPPA'
                $bppa = mysql_query("SELECT * from roles WHERE username = '$_SESSION[username]'");
                $bppa_row = mysql_fetch_array($bppa);
                if($bppa_row['classification'] != 'BPPA'){
                    $disabled = 'disabled = "disabled"';
                }else{
                    $disabled = "";
                }               
                //ends here
?>

Then, apply $disable to your text area:

然后，将 $disable 应用于您的文本区域：

<?php
echo '<textarea class="ckeditor" '.$disabled.' name="content' . $n . '" id="content' . $n . '">' . $saved . '</textarea>';
?>

回答by xmatzx

with version 4.5.4 you can do it with:

使用 4.5.4 版，您可以使用：

$('#idElement).ckeditorGet().setReadOnly(true);