java ckeditor和ckfinder整合(一)

最新推荐文章于 2018-01-07 15:34:06 发布

fax5201314

最新推荐文章于 2018-01-07 15:34:06 发布

阅读量3.3k

点赞数

分类专栏：开源软件使用 JavaScript 文章标签： ckeditor

本文链接：https://blog.csdn.net/fax5201314/article/details/39179863

版权

开源软件使用同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

JavaScript

12 篇文章 0 订阅

订阅专栏

一、下载

1、下载ckeditor_4.4.4_full，有basic ，standard，full Version 4.4.4

http://ckeditor.com/download

2、文档地址http://docs.ckeditor.com/

二、解压

解压缩下载的zip存档的CKEditor到你的网站的根目录webapp下面（不用maven的话就是WebContent，WebRoot）。

三、测试

CKEditor附带一组样本,您可以尝试验证如果安装成功以及看到一些CKEditor使用场景,基本和更高级的。

在浏览器中打开以下页面:网站http://localhost:8080/website/ckeditor/sample/index.html

可以使用浏览sample,看看CKEditor和定制。

四、向页面添加CKEditor

如果sample正确工作,您已经准备好构建您自己的网站与CKEditor包括在内。

首先,创建一个包含<textarea>元素的简单的HTML页面。然后,您将需要做两件事:

在<script>页面元素中添加一个调用CKEditor的js脚本<script src="/ckeditor/ckeditor.js"></script>

使用 CKEDITOR.replace() 方法来取代现有的 <textarea> 元素。

看下面的例子:

<!DOCTYPE html>
<html>
    <head>
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="../ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </body>
</html>

当你做完这些，使用浏览器打开刚做的sample页面，恭喜你! 你一会儿就安装和使用CKEditor在自己的页面!

五、设置CKEditor配置

1、CKEditor附带了一组丰富的配置选项,可以自定义它的外观,功能,和行为。主要的配置文件是config.js。这个文件可以在CKEditor安装的根文件夹中找到。所有可用的配置选项可以在API文档中找到。请参考api CKEDITOR.config的定义。

2、最好的配置CKEditor的方法是在页面page里面配置,当创建编辑器实例的时候。这种方法可以让你避免修改原始分布CKEditor安装文件夹中的文件,简化升级任务。

具体page页面里面配置可以传递给任何编辑器的实例创建功能,使用 CKEDITOR.replace 和CKEDITOR.appendTo.例如:

CKEDITOR.replace( 'editor1', {
    language: 'fr',
    uiColor: '#9AB8F3'
});

注意,配置选项,通过文字对象定义(从“{”符号开始,最后一个“}”符号结束)。因为这个正确的语法使用name:value 键值对为每个选项配置，一定不要使用“equal”字符(=)代替冒号(:)。

六、使用全局配置文件config.js配置

CKEditor设置也可以通过配置config.js完成。默认情况下,这个文件是空的。改变CKEditor配置,添加您想要的设置修改config.js文件。例如:

CKEDITOR.editorConfig = function( config ) {
    config.language = 'fr';
    config.uiColor = '#AADC6E';
};

为了使用配置文件的配置信息,CKEDITOR.editorConfig函数必须被定义。config.js文件将被执行在您的页面的范围,所以你也可以定义引用变量页内,甚至在其他JavaScript文件。

七、使用自定义配置文件

使用一个自定义配置文件是另一个设置CKEditor配置的推荐方法。而不是使用默认config.js文件,您可以创建该文件的副本在你的网站和简单编辑器实例加载它。这种方法的优点是,这样你就可以避免改变原始文件,这使得它更容易升级CKEditor后只需覆盖所有文件。

假设你复制config.js文件到你网站的webapp根目录下的一个custom文件夹。你也重命名为ckeditor_config.js配置文件。此时只是足以使用 customConfig配置选项来创建编辑器实例时使用该文件中定义的自定义设置。例如

CKEDITOR.replace( 'editor1', {
    customConfig: '/custom/ckeditor_config.js'
});

自定义配置文件必须看起来就像config.js文件。

八、配置加载顺序

你不需要只使用一个以上的配置选项。上述方法可以混合和配置将正确加载。下面的列表给出了配置加载命令创建一个编辑器实例时使用:

1、创建一个编辑器实例。在这一点上所有的都使用默认configuration配置选项。

2、如果customConfig设置已设置在页面上,加载该文件,否则默认config.js文件加载。所有设置覆盖当前实例设置自定义配置文件。

3、如果设置加载在步骤2中定义一个新的customConfig值,另一个自定义配置文件加载及其设置覆盖当前实例设置。这一切发生的时候递归地定义了所有文件,直到没有customConfig。

4、最后,设置在页面上的覆盖当前实例定义设置(除了customConfig,用于步骤1)。

九、避免加载外部设置文件

也可以完全避免加载外部配置文件,减少文件加载。要做到这一点,你需要设置CKEDITOR.config.customConfig设置为一个空字符串。

CKEDITOR.replace( 'editor1', {
    customConfig: ''
});

十、插件使用 jquery

CKEditor提供本地jQuery集成通过jQuery适配器(基本上一个jQuery插件)。它提供深度集成CKEditor和jQuery,让你使用CKEditor时使用jQuery的本机功能。jQuery适配器兼容jQuery版本1.7 + 2.0 +。由于jQuery适配器textarea经典元素可以被转换成一个编辑器,而其他任何可编辑元素可以改变成一个行内编辑器。

1、创建编辑器实例

为了创建编辑器实例,加载jQuery脚本文件,CKEditor核心jQuery脚本文件以及适配器文件,按照以下顺序:

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

此时,您可以将元素转换为一个富文本编辑器通过使用ckeditor()方法。

$( 'textarea.editor' ).ckeditor();

请注意,您也可以使用jQuery的链接

$( '.section-x' )
    .find( 'textarea.editor' )
        .ckeditor()
    .end()
    .find( 'a' )
        .addClass( 'mylink' )
    .end();

ckeditor()方法的主要方法是jQuery适配器。它接受两个可选参数:

一个回调函数执行编辑时准备好了

$( 'textarea' ).ckeditor( function( textarea ) {
   // Callback function code.
 } );

配置选项创建特定于编辑器实例

$( 'textarea' ).ckeditor( {
     uiColor: '#9AB8F3'
 } );

混合参数顺序是被允许的。配置选项是通过一个简单的对象,其中包含属性,每一个有关一个特定的编辑器设置。

$('#jquery_ckeditor')
    .ckeditor( function() { /* Callback function code. */ }, { uiColor : '#9AB8F3' } )
    .ckeditor( callback2 );

请注意,本文提供的代码上面不会创建两个编辑器。发现一个编辑器已经被创建,它将会等待第二个回调。每个回调函数将CKEDITOR的上下文中执行。编辑对象(这将编辑器)和DOM元素对象将作为参数传递

回调参数出现的问题：当你应用ckeditor()方法在一组编辑器被重复调用

$('.editors')
    .ckeditor( function() {
        // This function will be called repeatedly (as many times as many elements have the 'editors' class).
    } );

如果你想申请一些代码最后编辑器创建一个回调之后,您需要创建一个计数器计数的数量已经调用回调函数。为了避免这种情况,jQuery适配器返回 jQuery Promise object后,将调用回调。这一承诺对象可以使用jQuery的助手等异步操作$.when

$.when( $( '.editors' ).ckeditor().promise ).then( function() {
    // Now all editors have already been created.
} );

2、编辑器实例

如果你需要访问CKEDITOR。编辑对象,您可以使用编辑器属性:

var editor = $('.jquery_ckeditor').ckeditor().editor;
alert( editor.checkDirty() );

为了保持向后兼容CKEditor 3。x适配器版本,还可以使用ckeditorGet()方法,但不建议使用这种方式。

3、.val()方法

因为编辑器设置和获取数据是一种常见的操作,jQuery适配器还提供了一个专用的val()方法,是最初的jQuery val的扩展()方法。它的工作原理相似到jQuery版本,第一个元素的值匹配的元素集合或设置每一个匹配元素的值。另外它允许您获取或设置经典的内容编辑器。因为是富文本编辑器所以从后台取数据的时候默认是显示的数据没有被textarea解析所以使用$('#jquery_ckeditor').html(data.editorValue).text()赋值或者在jsp页面使用${data.editorValue}会自动解析html;

因为CKEditor设置数据是一个异步操作, val( 'some data' ) 将返回一个jQuery承诺对象如果任何元素是一个编辑器。您可以使用它与jQuery助手:

$.when( $( '#editor' ).val( 'foo' ) ).then( function() {
    // Now you are sure that the data is set.
} );

这一承诺将解决当所有setData方法完成

$.when( $( '.editors' ).val( 'foo' ) ).then( function() {
    // All of editors have set data.
} );

4、提交数据和jQuery插件形式 jQuery Form Plugin

$( 'textarea' ).ckeditor();

//...

$( 'form' ).ajaxSubmit( {
    beforeSubmit: function() {
        // The textarea is already updated now and has the same value as the editor, so you can validate it.
    }
} );