首页> 实战笔录 >前端开发 >JQuery JQuery

怎么设置ckeditor为只读模式和取消只读

作者:小萝卜 2019-10-29 浏览 1904

简介一个页面有多个编辑器,分别设置每个编辑器是只读模式或者是可读模式。以下是萝卜分享给大家的代码。

怎么设置ckeditor为只读模式和取消只读

需求,一个表单页面同时含有三个ck编辑器,这时我们需要其中两个是只读,一个回复的是可读模式,怎么设置呢?请往下看

页面代码:

<div class="row">
        <div class="col col-title">
            维权请求:
        </div>
        <div class="col-xs-9" >
            <textarea class="form-control ckeditor"  name="content" id="container">
                {?$content?}
            </textarea>
            <!-- 加载编辑器的容器 -->
        </div>
    </div>

    <div class="row">
        <div class="col col-title">
            相关材料:
        </div>
        <div class="col-xs-9" >
            <textarea class="form-control ckeditor"  name="bodys" id="container1">
                {?$bodys?} 
            </textarea>
            <!-- 加载编辑器的容器 -->
        </div>
    </div>

    <div class="row">
        <div class="col col-title">
            回复:
        </div>
        <div class="col-xs-9" >
            <textarea class="form-control ckeditor"  name="comment" id="container2">
                {?$comment?} 
            </textarea>
            <!-- 加载编辑器的容器 -->
        </div>
    </div>

设置后的代码:
 

<div class="row">
        <div class="col col-title">
            维权请求:
        </div>
        <div class="col-xs-9" >
            <textarea class="form-control ckeditor"  name="content" id="container">
               {?$content?}
            </textarea>
            <!-- 加载编辑器的容器 -->
            <script type="text/javascript">
                $(document).ready(function() {

                    var editor = CKEDITOR.replace("container"); 
                    //其中container为textarea的id

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

                });
            </script>
        </div>
    </div>

    <div class="row">
        <div class="col col-title">
            相关材料:
        </div>
        <div class="col-xs-9" >
            <textarea class="form-control ckeditor"  name="bodys" id="container1">
               {?$bodys?}
            </textarea>
            <!-- 加载编辑器的容器 -->
            <script type="text/javascript">
                $(document).ready(function() {

                    var editor1 = CKEDITOR.replace("container1"); 

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

                });
            </script>
        </div>
    </div>

    <div class="row">
        <div class="col col-title">
            回复:
        </div>
        <div class="col-xs-9" >
            <textarea class="form-control ckeditor"  name="comment" id="container2">
               {?$comment?}
            </textarea>
            <!-- 加载编辑器的容器 -->
            <script type="text/javascript">
                $(document).ready(function() {

                    var editor2 = CKEDITOR.replace("container2"); 

                    CKEDITOR.on('instanceReady', function (ev) {
                        editor = ev.editor;
                        editor2.setReadOnly(false); 
                    });

                });
            </script>
        </div>
    </div>

很赞哦! (0)

文章评论

    高端网站建设