富文本框ckeditor配合ckfinder在SSM项目中的使用

程序员文章站 2022-03-16 22:58:48

前提说明：在我们的实际项目中，页面上不乏表单的提交，而其中出现最多的便是输入框input或者一些文本域text、textarea，而为了时用户的体验更好，我们可以考虑添加一些小功能，如将单纯只能输入内容的文本框改造成可以修改添加自定义样式的富文本框。因为ckeditor和ckfinder在官网上下载很慢，所以这里直接贴出资源，有需要的自取：ckeditor和ckfinder资源，提取码：wlyy一、ckeitor的配置解压资源后，将ckeitor包复制到webapp目录下，或者放到web....

前提说明： 在我们的实际项目中，页面上不乏表单的提交，而其中出现最多的便是输入框input或者一些文本域text、textarea，而为了时用户的体验更好，我们可以考虑添加一些小功能，如将单纯只能输入内容的文本框改造成可以修改添加自定义样式的富文本框。

因为ckeditor和ckfinder在官网上下载很慢，所以这里直接贴出资源，有需要的自取：ckeditor和ckfinder资源，提取码：wlyy

一、ckeitor的配置

解压资源后，将ckeitor包复制到webapp目录下，或者放到webapp目录下的自建的包的位置下，但注意一定要是在webapp目录下。如图：
找到ckeitor包下的config.js文件，更改其中的配置，这个文件就是ckeditor的配置文件，用来修改富文本框的一些样式。

具体各个参数的解释可见配置参数解释

这里给出配置示例：
```
CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
    config.image_previewText=' ';//清除预览，不配置默认情况下预览框下会出现很多英文
    config.language='zh-cn';//中文显示
    config.height = 400;//富文本框的高度
};
```
```
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;
```
还要在加上上面两个配置，这样配置是因为默认情况下进入文本框会为你添加 br 和 p 标签，配置后，就是从body开始编辑

注意：这里配置文件config.js可能不会生效，所以可能要更改一下这个文件的名字，我这里就改成了myConfig.js，然后还要在ckeditor.js文件下找到 CKEDITOR.config={customConfig 这行代码 (ctrl+F查找) ，将其后的配置文件更改成你的配置文件，如下图：
修改textarea标签，以富文本框形式呈现
先引入相关的js文件:
```
<script type="text/javascript" src="${path}/static/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${path}/static/js/ckfinder/ckfinder.js"></script>
```
```
<textarea class="form-control" name="remark" rows="10"></textarea>
```
其中js中设置的remark与textarea的name属性的名字对应，即意为将textarea文本域以富文本框形式显示，下面customConfig对应的是你的ckeditor配置文件

一定要注意路径：下面那个page引用路径即对应 <c:set var=“path” value="${pageContext.request.contextPath}"/> 等价于<%=request.getContextPath()%>，是取出部署的应用程序名或者是当前的项目名称,我的项目名是TYFilmWeb
```
var editor=null;
//ckeditor的配置及其配置文件路径
editor = CKEDITOR.replace('remark',
	{
	    customConfig:'${path}/static/js/ckeditor/myConfig.js'
	});
```

第一步配置好后，就可以显示我们的富文本框了：
富文本框ckeditor配合ckfinder在SSM项目中的使用

二、ckfinder的配置

说明：不是有富文本框ckeitor就够了吗？为什么还要配置ckfinder，因为CKFinder是一个强大而易于使用的Web浏览器的Ajax文件管理器。其简单的界面使得它直观,以此可以弥补CKEditor在文件上传功能的不足，更易于用户操作。

导入ckfinder包，也是放在webapp目录下，里面有个ckfinder.xml文件，将其移动到WEB-INF目录下：

富文本框ckeditor配合ckfinder在SSM项目中的使用

修改该文件中的配置：
其中物理地址是你在富文本框中要上传文件的存放路径，由你自己设置
富文本框ckeditor配合ckfinder在SSM项目中的使用
上面步骤完成后，还要配置你资源（上传的文件）存放的虚拟路径，即上述baseDir的路径，因为你的文件或者照片都是放在该虚拟路径下的，而不是在你的项目下，这样tomcat在启动时，就会加载这个配置好后的虚拟路径中的资源，详见 idea配置tomcat虚拟路径详解，讲得很清楚，这里不再说明。

将ckfinder包下的lib文件复制到WEB-INF目录下，其中都是一些需要的jar包,然后右键单击导入到库中：

web.xml中ckfinder的配置，在web-app标签内配置如下：

<!--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>
      <description>Path to configuration file can be relative path inside application,
        absolute path on local file system or UNC path.
      </description>
    </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>/static/js/ckfinder/core/connector/java/connector.java</url-pattern>
  </servlet-mapping>

注意：可能有时候都配置了但是出现 java.lang.ClassNotFoundException 异常，这个时候可以参照解决方法进行解决,多数情况是你的复制的lib并没有正确导入到库中

三、ckeditor设置以ckfinder上传文件

把此代码加入到你xxx.jsp页面的js代码中

//ckeitor与ckfinderd的整合
CKFinder.setupCKEditor( editor, '${path}/static/js/ckfinder/' );

然后在myConfig文件中在第一步ckeditor配置基础上再加入配置：

注意：路径问题，这里TYFilmWeb是你的项目名称

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
    config.image_previewText=' ';
    config.language='zh-cn';
    config.height = 400;
    config.enterMode = CKEDITOR.ENTER_BR;
    config.shiftEnterMode = CKEDITOR.ENTER_P;
    // 注意这是填写的是绝对路径  /TYFilmWeb/ckfinder/...
    config.filebrowserBrowseUrl = '/TYFilmWeb/static/js/ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = '/TYFilmWeb/static/js/ckfinder/ckfinder.html?type=Images';
    config.filebrowserFlashBrowseUrl = '/TYFilmWeb/static/js/ckfinder/ckfinder.html?type=Flash';
    config.filebrowserUploadUrl = '/TYFilmWeb/static/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = '/TYFilmWeb/static/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
    config.filebrowserFlashUploadUrl = '/TYFilmWeb/static/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
};

上面都配置好了，你就可以很愉快地在富文本框内选择自己想要插入的样式了：

富文本框ckeditor配合ckfinder在SSM项目中的使用

最后呈现的效果就是这样的：
富文本框ckeditor配合ckfinder在SSM项目中的使用

四、一点点说明

1. 那么我们如何获取以及设置富文本框中的内容呢？

//这个editor是我们之前创建好的对象
//我们直接通过此函数获取即可
var text=editor.getData();
alert(text);

结果：富文本框ckeditor配合ckfinder在SSM项目中的使用

说明：这里不一定每个版本获取其值的方法都一样，需要自己实验一下。

设置富文本框的内容：

//其中括号内的参数是我们要设置的值
editor.setData("xxx");

2.将富文本框中的内容存储到数据库中，并回显到富文本框中

存储到数据库中当然是直接获取其值然后存储即可：
富文本框ckeditor配合ckfinder在SSM项目中的使用

然后获取的时候，因为我们获取的是html标签这种形式的字符串，其中有双引号，所以在外部再加上引号进行设置的时候就会出错，会产生冲突。

这里的思路就是我们获取数据库里存储的值后，不直接进行设置，而是将得到的值直接存放到了一个隐藏的div中，然后通过jquery获取这个div中的html内容即可，这样格式也不会错，引号之间也不会有冲突：

<div class="col-sm-8">
	<textarea class="form-control" name="remark" rows="10"></textarea>
</div>
<div id="remark_hidden" style="display: none">${movie.remark}</div>

<script>
	editor.setData($("#remark_hidden").html());
</script>