html CKEditor只读

w7t8yxp5  于 2022-12-16  发布在  其他
关注(0)|答案(8)|浏览(273)

我在使用CKEditor(http://ckeditor.com/)时遇到了一个问题。问题是我找不到一种方法使编辑器为只读,而且我不能只使用文本区,因为我想保持一致性。我已经在StackOwerflow看到了很多类似的问题,但没有一个有效,或者太旧了。
到目前为止,我的代码仅用于显示/初始化编辑器:

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

我使用最新的CKEditor版本(v.4.1.1完整包)
提前感谢!:)

btxsgosb

btxsgosb1#

在docs readOnly中,您可以将配置设置为readOnly

config.readOnly = true;

还有一个example,它显示了如何通过方法设置它

editor.setReadOnly( true);
gt0wga4j

gt0wga4j2#

尝试以下行,

<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>
envsm3lx

envsm3lx3#

您试过this吗?
他们说这应该行得通

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 );
}

和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>
s8vozzvw

s8vozzvw4#

在版本5中,我这样做:

ClassicEditor
    .create( document.querySelector( '.editor' ), {
        removePlugins: ['Title'],
        licenseKey: '',

    } )
    .then( editor => {
        window.editor = editor;
        editor.isReadOnly = true;

    } )
    .catch( error => {
        console.error( 'Oops, something went wrong!' );
        console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
        console.warn( 'Build id: efxy8wt6qchd-qhxgzg9ulnyo' );
        console.error( error );
    } );
zlwx9yxi

zlwx9yxi6#

看看这个。这个想法是如果一个用户登录到一个分类不是'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
?>

然后,将$disable应用到文本区域:

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

093gszye7#

在4.5.4版中,您可以使用以下命令执行此操作:

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

jhkqcmku8#

如果您在同一页面上有多个编辑器,并且您希望在页面显示上禁用所有编辑器:

CKEDITOR.on('instanceReady', function (ev) {
    ev.editor.setReadOnly(true);
});

Documentation

相关问题