做网站的傻瓜软件,苏州科建设交通学院网站,传奇 网游,潍坊建设网站公司电话KindEditor 是什么#xff1f;
KindEditor 是一套开源的在线HTML编辑器#xff0c;主要用于让用户在网站上获得所见即所得编辑效果#xff0c;开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写
KindEditor 是一套开源的在线HTML编辑器主要用于让用户在网站上获得所见即所得编辑效果开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写可以无缝地与 Java、.NET、PHP、ASP 等程序集成比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
官网: http://kindeditor.net/about.php 其他常用的富文本编辑器: UEditor http://ueditor.baidu.com/website/ CKEditor http://ckeditor.com/ 有兴趣的小伙伴可以找时间探索一下哦!
导入KindEditor文件添加前端页面
从官网下载好文档之后将相关文件导入到我们的项目中如下图并在需要富文本编辑框的页面中引入相应的文件。
1、导入所需的脚步和CSS
!-- 富文本编辑器 --
link relstylesheet href/sell/kindeditor/themes/default/default.css/
script charsetutf-8 src/sell/kindeditor/kindeditor-all.js/script
script charsetutf-8 src/sell/kindeditor/lang/zh-CN.js/script
//初始化KindEditor编辑器
script typetext/javascriptvar editor;KindEditor.ready(function (K) {editor K.create(textarea[namecontent], {//是否允许浏览服务器已上传文件,默认是falseallowFileManager: true,uploadJson :/sell/speech/uploadFile});});
/script2、添加内容标签
div classform-grouplabel内容:/labeltextarea namecontent typetext classform-control value${(productInfo.productName)!}/textarea
/divspring boot后台
1、首先配置虚拟文件目录
#定义文件路径
file:baseUrl: http://192.168.1.143:8080/sellstaticAccessPath: /static/image/*uploadFolder: /image/2、WebMvcConfigurer处理
Data
ConfigurationProperties(prefix file)
Component
public class UploadFilePathConfig implements WebMvcConfigurer {private String staticAccessPath;private String uploadFolder;private String baseUrl;Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler(staticAccessPath).addResourceLocations(file: uploadFolder);}
....部分省略3、处理图片上传方法
RestController
RequestMapping(/speech)
Slf4j
public class SpeechController {Autowiredprivate UploadFilePathConfig filePathConfig;/*** 提供KindEditor作文件上传使用* param request* param response* throws Exception*/PostMapping(/uploadFile)public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws Exception {PrintWriter writer response.getWriter();// 文件保存目录路径String savePath filePathConfig.getUploadFolder();String saveUrl filePathConfig.getBaseUrl() File.separatorChar static/image File.separatorChar;// 定义允许上传的文件扩展名HashMapString, String extMap new HashMapString, String();extMap.put(image, gif,jpg,jpeg,png,bmp);// 最大文件大小long maxSize 1000000;response.setContentType(text/html; charsetUTF-8);if (!ServletFileUpload.isMultipartContent(request)) {writer.println(getError(请选择文件。));return;}File uploadDir new File(savePath);// 判断文件夹是否存在,如果不存在则创建文件夹if (!uploadDir.exists()) {uploadDir.mkdirs();}// 检查目录写权限if (!uploadDir.canWrite()) {writer.println(getError(上传目录没有写权限。));return;}String dirName request.getParameter(dir);if (dirName null) {dirName image;}if (!extMap.containsKey(dirName)) {writer.println(getError(目录名不正确。));return;}MultipartHttpServletRequest mRequest (MultipartHttpServletRequest) request;MapString, MultipartFile fileMap mRequest.getFileMap();String fileName null;for (IteratorMap.EntryString, MultipartFile it fileMap.entrySet().iterator(); it.hasNext();) {Map.EntryString, MultipartFile entry it.next();MultipartFile mFile entry.getValue();fileName mFile.getOriginalFilename();// 检查文件大小if (mFile.getSize() maxSize) {writer.println(getError(上传文件大小超过限制。));return;}String fileExt fileName.substring(fileName.lastIndexOf(.) 1);if (!Arrays.StringasList(extMap.get(dirName).split(,)).contains(fileExt)) {writer.println(getError(上传文件扩展名是不允许的扩展名。\n只允许 extMap.get(dirName) 格式。));return;}UUID uuid UUID.randomUUID();String path savePath uuid.toString() . fileExt;saveUrl saveUrl uuid.toString() . fileExt;BufferedOutputStream outputStream new BufferedOutputStream(new FileOutputStream(path));FileCopyUtils.copy(mFile.getInputStream(), outputStream);log.info(【提交图片】参数正确, saveUrl{},saveUrl);JSONObject obj new JSONObject();obj.put(error, 0);obj.put(url, saveUrl);writer.println(obj.toString());}}....部分代码省略开始运行测试
效果如图所示
