CKEditor与jQuery整合

2019独角兽企业重金招聘Python工程师标准>>>

<script src="jquery.js"></script>
<script src="ckeditor.js"></script>
<script src="adapters/jquery.js"></script>

//初始化
$( 'textarea.editor' ).ckeditor();

//使用jquery chain
$( '.section-x' )
    .find( 'textarea.editor' )
        .ckeditor()
    .end()
    .find( 'a' )
        .addClass( 'mylink' )
    .end();

//ready的回调
 $( 'textarea' ).ckeditor( function( textarea ) {
   // Callback function code.
 } );

#配置属性
$( 'textarea' ).ckeditor( {
     uiColor: '#9AB8F3'
 } );

// 获取编辑器的内容
var data = $( 'textarea.editor' ).val();
// 设置编辑器的内容
$( 'textarea.editor' ).val( 'My new content' );

https://docs.ckeditor.com/#!/guide/dev_jquery

CKEditor 普通初始化方法

//初始化
var editor;
if ( typeof CKEDITOR !== 'undefined' ) {
            editor = CKEDITOR.replace('brief');
            CKFinder.setupCKEditor(editor, '/Public/Admin/vendors/ckfinder/');
        }else{
            layer.msg('需要CKEditor');
        }

//得到editor的值
data['brief'] = encodeURI($('#brief').val());
或
data['brief'] = encodeURI(editor.getData());

//用js设值（会附加在旧数据后面）
editor.insertHtml(decodeURI(data.brief));
//全部更新
editor.setData(decodeURIComponent(data.brief));

 

CKFinder（官方的CKFinder因要购买，推荐使用KCFinder代替，功能类似，没有限制）

https://docs-old.ckeditor.com/ckfinder3-php/configuration.html

与PHP的整合

找到ckfindier目录下的config.php文件

要修改这个方法返回true或false，则上不了文件。简单的讲就是要校验一下用户是否有登录（不过也容易被人xss）

$config['authentication'] = function () {
    return false;
};

 

CKEditor问题收集：

CKEditor与Bootstrap整合时，因Modal层内嵌CKEditor导致图片属性不能修改的问题，是因为与Modal的tabindex="-1"属性产生了冲突，去掉就OK.

<div class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog" aria-hidden="false">

转载于:https://my.oschina.net/swingcoder/blog/1524228