ckeditor富文本编辑器的使用和图片上传

     项目开发需要用到在线编辑和图片上传，最终讨论使用ckeditor，原因就是其丰富的API。考虑到最新版本ckeditor5可能不够稳定，我们选择使用ckedtior4.9.2版本。官网链接：ckeditor官网

特别注意：下面截图中url中的/editor/upload/1?其中的 /1 是根据自己需求添加不同类型数据上传时候的区分，可以去掉，写成/editor/upload?

初始化ckeditor

 第一步：下载ckeditor并引入js；

   
   

     
     

      
      

     
     
     
     

      
      

       
       <script src=
       
       "/plugins/ckeditor/ckeditor.js" type=
       
       "text/javascript"></script>   
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script src="/plugins/ckeditor/config.js" type="text/javascript"></script>   
      
      
     
     
   
   

第二步：在html页面引入textarea标签；

   
   

     
     

      
      

     
     
     
     

      
      

       
       <!-- 富文本编辑器 -->
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <textarea name="content" id="editor">
       
       </textarea>
      
      
     
     
   
   

第三步：在js中初始化富文本编辑器；

   
   

     
     

      
      

     
     
     
     

      
      
	
       
       //初始换编辑器
      
      
     
     

     
     

      
      

     
     
     
     

      
      
	
       
       var editor = CKEDITOR.replace(
       
       'editor', { 
      
      
     
     

     
     

      
      

     
     
     
     

      
      
		
       
       filebrowserImageUploadUrl :
       
       "/picture/editor/upload/1",
      
      
     
     

     
     

      
      

     
     
     
     

      
      
		
       
       removePlugins:
       
       'elementspath,resize',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
		
       
       codeSnippet_theme: 
       
       'zenburn',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
		
       
       height:
       
       '600'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       	}); 
      
      
     
     
   
   

注意：其中‘editor’必须跟第二步引入的textarea便签的id一致。filebrowserImageUploadUrl 是用来配置图片上传的；

做完这三步，富文本编辑器就可以基本使用。

      但是，如果 进行图片上传，我们需要将图片单独上传到我们制定的服务器，然后返回url存储到数据库，这样处理图片才是最合理的。下面我们来说说图片上传：

图片上传：

第一步：在初始化ckeditor是配置filebrowserImageUploadUrl 属性，属性对应的值就是图片上传的后台连接;

   
   

     
     

      
      

     
     
     
     

      
      
	
       
       //初始换编辑器
      
      
     
     

     
     

      
      

     
     
     
     

      
      
	
       
       var editor = CKEDITOR.replace(
       
       'editor', { 
      
      
     
     

     
     

      
      

     
     
     
     

      
      
		
       
       filebrowserImageUploadUrl :
       
       "/picture/editor/upload/1",
      
      
     
     

     
     

      
      

     
     
     
     

      
      
		
       
       removePlugins:
       
       'elementspath,resize',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
		
       
       codeSnippet_theme: 
       
       'zenburn',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
		
       
       height:
       
       '600'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       	}); 
      
      
     
     
   
   

第二步：配置config参数，在config.js中加入以下配置

   
   

     
     

      
      

     
     
     
     

      
      

       
       /*将编辑器的语言设置为中文*/
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       config.language = 
       
       'zh-cn';
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       /*去掉图片预览框的文字*/
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       config.image_previewText = 
       
       ' ';
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       /*开启工具栏“图像”中文件上传功能，后面的url为图片上传要指向的的action或servlet*/
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       config.filebrowserImageUploadUrl= 
       
       "/blog/uploadEditorImage";
      
      
     
     
   
   

第三步：写后台上传图片代码：

注意：后台上传图片处理完，必须返回固定格式的json数据：

 上传成功时，返回：

        { "uploaded":1, "url":"图片访问路径"}

    上传失败时，返回

          {"uploaded":0,"error":{"message":"失败原因"  }}

   
   

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       @RequestMapping(value = "/editor/upload", method = RequestMethod.POST)
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       @ResponseBody
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       public String uploadPicture( @RequestParam("upload") MultipartFile file, Model model, HttpServletRequest request, HttpSession session, HttpServletResponse response) {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      
		
       
       try {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
			
      
      
     
     

     
     

      
      

     
     
     
     

      
      
		    
       
       //具体伤处图片操作都不易呀，省略
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                  ...... ......
      
      
     
     

     
     

      
      

     
     
     
     

      
      
			
      
      
     
     

     
     

      
      

     
     
     
     

      
      
			
       
       //设置返回的图片url
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       			String url = targetPath + 
       
       "/" +fileName;
      
      
     
     

     
     

      
      

     
     
     
     

      
      
			
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       			Map<String, String> reMap = 
       
       new HashMap<String, String>();
      
      
     
     

     
     

      
      

     
     
     
     

      
      
			
      
      
     
     

     
     

      
      

     
     
     
     

      
      
			
       
       //必须返回这样格式的json字符串
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       			reMap.put(
       
       "uploaded", 
       
       "1");
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       			reMap.put(
       
       "url", url);
      
      
     
     

     
     

      
      

     
     
     
     

      
      
            
       
       return JSON.toJSONString(reMap);
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       		} 
       
       catch (Exception e) {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       			logger.error(
       
       "上传图片失败", e);
      
      
     
     

     
     

      
      

     
     
     
     

      
      
			
       
       return 
       
       "false";
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       		}
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       	}
      
      
     
     
   
   

第四步：进行上传图片操作：

跳转图像信息页面，点击确定即可

 

第五步：获取editor内容，提交富文本编辑器数据：

   
   

     
     

      
      

     
     
     
     

      
      

       
       /* 获取editor中的内容 */
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       var content = editor.getData();
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       /* 设置editor中的内容 */
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       editor.setData(content);
      
      
     
     
   
   

将获取的数据放入表单标签，就可以提交数据了。数据格式是一堆html标签的字符串：

复制图片上传：

 ckeditor是支持复制上传的，只需要在之前的js的filebrowserImageUploadUrl配置的上传路径最后加一个?就可以了，如下：

   
   

     
     

      
      

     
     
     
     

      
      
	
       
       //初始换编辑器
      
      
     
     

     
     

      
      

     
     
     
     

      
      
	
       
       var editor = CKEDITOR.replace(
       
       'editor', { 
      
      
     
     

     
     

      
      

     
     
     
     

      
      
		
       
       filebrowserImageUploadUrl :
       
       "/picture/editor/upload/1?",
      
      
     
     

     
     

      
      

     
     
     
     

      
      
		
       
       removePlugins:
       
       'elementspath,resize',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
		
       
       codeSnippet_theme: 
       
       'zenburn',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
		
       
       height:
       
       '600'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       	});