富文本编辑器的选择和使用

1.明白需求

（1）电子邮件

图片需要嵌入html，所以不需要做上传处理，因此选择summernote很轻松

（2）其他场合

还是iceEditor更好

2.iceEditor使用介绍

（1）准备容器

根据需要如果是表单用textarea，其他可以用div

（2）准备插件和定义脚本

//完整实例

ice.editor('editor',function(){

this.height = '200px';

this.uploadUrl = 'http://localhost:8080/fileUpload';

this.create();

});

效果如下：

（3）编写后台文件接受处理程序

@PostMapping("/fileUpload")

public List> fileUpload(@RequestParam("file[]") MultipartFile[] pictures) {

List> lists = new ArrayList();

String [] filenames=new String[pictures.length];

System.out.println(pictures.length);

for(int a=0;afilenames[a] = UUID.randomUUID().toString() + Tools.getExtension(pictures[a].getOriginalFilename());

System.out.println(pictures[a].getOriginalFilename());

}

String root="F:\\uploads\\";//该位置也已经被映射为虚拟目录 /uploads

//将文件通过io流写写入指定磁盘位置或者服务器中

try {

for(int a=0;apictures[a].transferTo(new File(root+filenames[a]));

//创建返回响应对象

Map map=new HashMap<>();

map.put("error",0);

map.put("url","/uploads/"+filenames[a]);

map.put("name",filenames[a]);

lists.add(map);

}

} catch (Exception e) {

Map map=new HashMap<>();

map.put("error",e.getMessage());

map.put("url","");

map.put("name","");

lists.add(map);

}

return lists;

}

富文本编辑器的选择和使用相关推荐

web富文本编辑器的选择のxheditor
最近在研究web富文本编辑器,处理知道的 1.老牌fckeditor 网址:http://ckeditor.com/ 2.百度退出的ueditor 网址:http://uedito ...
最新版富文本编辑器UEditor操作教程
最近项目中使用到了富文本编辑器,选择的是百度的UEditor.所以对其进行了研究,发现最近发布了新版本,与以往的用法有的改变.一下对UEditotr 的是用做一下详细的介绍. 首先是UEditotr的 ...
php 富文本编辑器,开发php接入富文本编辑器KindEditor笔记 | 小灰灰博客
在做开发的时候,想使用富文本编辑器,小灰灰找了好几个富文本编辑器最终选择了kindeditor编辑器,轻量级的,文件不是很大解压之后也才1M多,而且小灰灰喜欢kind带的清除格式以及一键排版功能,个人 ...
react中使用simditor富文本编辑器
react 中使用没有启用图片上传功能的simditor 富文本编辑器环境介绍功能需求步骤实现 npm安装simditor依赖 jsx页面引入 componentDidMount 获取DOM ...
使用 SpringBoot + Ckeditor 富文本编辑器、图片上传
一.前言在一些页面中,进行发表文章.评论等功能,都要涉及到富文本编辑器, 如 CSDN 的 markdown 编辑器使用传统的 textarea 标签是远远满足不了需求的, 现在流行的富文本编辑 ...
富文本编辑器Quill 介绍及在Vue中的使用方法
在Web开发中,富文本编辑器是不可或缺的一个功能组件,掌握少量基础语法就能让一篇文章实现较为不错的排版效果,即见即所得. 目前市场上已提供大量集成富文本编辑器的包,Quill 作为其中一个,以简单.易 ...
flutter 富文本编辑器选择图片模糊_Flutter 到底香不香？看完这几个开源项目再做决定...
Flutter 自 2015 年推出以来,凭借着其极高的开发交付效率,优秀的多平台能力,以及强大的 UI 表现力,受到了许多开发者们的推崇.虽然 Flutter 的确仍旧存在一些问题,但依然是不少开发 ...
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择? 先看看市面上都有哪些可用的富文本编辑器: TinyMCE(插件式的,支持 Vue,React,Angular 框架) ...
淘淘商城第三天—完成商品添加功能商品类目选择图片上传图片服务器搭建 kindEditor富文本编辑器的使用商品添加功能
1.实现商品类目选择功能 1.1需求在商品添加页面,点击"选择类目"显示商品类目列表: 请求初始化树形控件的url:/item/cat/list 1.2 EasyUI tree数 ...

富文本编辑器的选择和使用

富文本编辑器的选择和使用相关推荐

最新文章

热门文章