ckeditor富文本编辑器的具体使用步骤如下:
1.页面中引入js
<script src="ckeditor/ckeditor.js"></script>2.写存放ckeditor的富文本框
<div class="layui-form-item"> <label class="layui-form-label">内容：</label> <div class="layui-input-block" style="width: 826px;"> <textarea id="content" rows="10" cols="30" class="ckeditor" name="content" ></textarea> </div> </div>3.获取富文本框值的方式
$("#content").val(CKEDITOR.instances.content.getData());4.修改页面中给富文本框赋值的方式 定义一个接口：根据id去查询富文本框中的内容，然后把查询到的内容赋值给富文本框即可。
$(function(){ $("#content").val(getKnDetail()); }) function getKnDetail(){ var content; $.ajax({ type:'post', url:'getKnowLedgeDe', data:{knId:getUrlParam("knId")}, dataType:'json', async:false, success:function (data) { console.log(data) content=data[0].content; } }) return content; }5.富文本编辑器图片上传功能 (1)在ckeditor文件下的config.js中配置需要调用的图片上传接口。
CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; config.filebrowserImageUploadUrl = "../hnxf-video/ckeditorUpload1"; };(2)开发图片上传工具类以及接口。
工具类FileUtil
package com.hnxf.video.hunanxfv.util; import com.hnxf.video.hunanxfv.Service.FireMiniService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest; import org.springframework.web.multipart.commons.CommonsMultipartResolver; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.UUID; import java.util.regex.Pattern; public class FireUtil { @Autowired private FireMiniService fireMiniService; public static String getFileType(String filename){ if(filename.endsWith(".jpg") || filename.endsWith(".jepg")){ return ".jpg"; }else if(filename.endsWith(".png") || filename.endsWith(".PNG")){ return ".png"; }else if(filename.endsWith(".mp4") ) { return ".mp4"; }else if(filename.endsWith(".mp3") ) { return ".mp3"; }else{ return "application/octet-stream"; } } /* * 判断是否为整数 * @param str 传入的字符串 * @return 是整数返回true,否则返回false */ public static boolean isInteger(String str) { Pattern pattern = Pattern.compile("^[-\\+]?[\\d]*$"); return pattern.matcher(str).matches(); } private static List<String> fileTypes = new ArrayList<String>(); static { fileTypes.add(".jpg"); fileTypes.add(".jpeg"); fileTypes.add(".bmp"); fileTypes.add(".gif"); fileTypes.add(".png"); } /** * 图片上传 * */ public static String upload(HttpServletRequest request, String DirectoryName) throws IllegalStateException, IOException { // 创建一个通用的多部分解析器 CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext()); // 图片名称 String fileName = null; // 判断 request 是否有文件上传,即多部分请求 if (multipartResolver.isMultipart(request)) { // 转换成多部分request MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request; // 取得request中的所有文件名 Iterator<String> iter = multiRequest.getFileNames(); while (iter.hasNext()) { // 取得上传文件 MultipartFile file = multiRequest.getFile(iter.next()); if (file != null) { // 取得当前上传文件的文件名称 String myFileName = file.getOriginalFilename(); // 如果名称不为“”,说明该文件存在，否则说明该文件不存在 if (myFileName.trim() != "") { // 获得图片的原始名称 String originalFilename = file.getOriginalFilename(); // 获得图片后缀名称,如果后缀不为图片格式，则不上传 String suffix = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase(); if (!fileTypes.contains(suffix)) { continue; } // 如果路径不存在，则创建该路径 // File realPathDirectory = new File(realPath); // if (realPathDirectory == null || !realPathDirectory.exists()) { // realPathDirectory.mkdirs(); // } // 重命名上传后的文件名 111112323.jpg fileName = UUID.randomUUID().toString() + suffix; // 获得上传路径的绝对路径地址(/upload)--> String realPath="/home/picture/images/firemini/" + fileName; System.out.println(realPath); // 定义上传路径 .../upload/111112323.jpg File uploadFile = new File(realPath); System.out.println(uploadFile); file.transferTo(uploadFile); } } } } return fileName; } // ckeditor文件上传功能，回调，传回图片路径，实现预览效果。 public static void ckeditor(HttpServletRequest request, HttpServletResponse response, String DirectoryName) throws IOException { String fileName = upload(request, DirectoryName); // 结合ckeditor功能 // imageContextPath为图片在服务器地址，如upload/123.jpg,非绝对路径 String imageContextPath = "https://119hunan.top/images/firemini/" + fileName; response.setContentType("text/html;charset=UTF-8"); String callback = request.getParameter("CKEditorFuncNum"); PrintWriter out = response.getWriter(); out.println("<script type=\"text/javascript\">"); out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + imageContextPath + "',''" + ")"); out.println("</script>"); out.flush(); out.close(); } }接口
//上传图片 @RequestMapping("/ckeditorUpload1") public void ckeditorUpload(HttpServletRequest request, HttpServletResponse response) throws Exception { FileUtil.ckeditor(request, response, ""); }