编辑组件CKEditor与文件管理组件CKFinder

Posted 2022-01-10 小智RE0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了编辑组件CKEditor与文件管理组件CKFinder相关的知识，希望对你有一定的参考价值。

ckeditor
ckfinder

ckeditor:html文本编辑插件，源码为javascript编写,实现对文本域的托管
下载时选择Full Package版本

解压后,去除一些不必要的文档;放置到js目录下即可

当然,也可以看看搭建案例samples

在这里可以设置需要的组件功能按钮

勾选完成后;得到配置代码

放置到config.js即可

下载ckfinder
注意解压后,将war包再次解压

取出一些不需要的文档后,同样放置到js目录下

注意需要在web.xml中进行配置

<!-- ckfinder -->
    <servlet>
        <servlet-name>ConnectorServlet</servlet-name>
        <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
        <init-param>
            <param-name>XMLConfig</param-name>
            <param-value>/WEB-INF/ckfinder.xml</param-value>
        </init-param>
        <init-param>
            <param-name>debug</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>ConnectorServlet</servlet-name>
        <url-pattern>/js/ckfinder/core/connector/java/connector.java</url-pattern>
    </servlet-mapping>

且在WEB-INF目录下创建ckfinder.xml目录;配置图片存储地址以及访问地址

当然也需要这几个jar包的支持

就这样;在需要文本编辑的页面,为文本域标签赋予Id

然后在JS中,让CKEditor接手文本域

var editor;
        $(function () 
            //加载ckeditor,且包括ckfinder
            editor = CKEDITOR.replace("contentId");
            CKFinder.setupCKEditor(editor, '../../js/ckfinder/');

搭建效果如下