layui网页html编辑器,layui使用富文本编辑器
HTML代码:
这里的原理是你输入的内容会经过处理插入到文本区域textarea中
js代码:
/**
* 文本编辑器
*/
layui.use(['form', 'layedit'], function(){
var layedit = layui.layedit;
//上传图片,必须放在 创建一个编辑器前面
layedit.set({
uploadImage: {
url: 'upload' //接口url
,type: 'post' //默认post
}
});
//建立编辑器
layedit.build('demo',{
height: 500 //设置编辑器高度
});
});
后台接口代码:
/** 上传图片方法
* @param request
* @param description
* @param file
* @return
* @throws Exception
*/
@RequestMapping(value="upload")
@ResponseBody
public String uploadFile(HttpServletRequest request,@Param("file") MultipartFile file) throws IOException {
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
String res = sdf.format(new Date());
//服务器上使用
// String rootPath =request.getServletContext().getRealPath("/resource/uploads/");//target的目录
//本地使用
String rootPath ="E:\\bolg";
//原始名称
String originalFilename = file.getOriginalFilename();
//新的文件名称
String newFileName = res+originalFilename.substring(originalFilename.lastIndexOf("."));
//新文件
File newFile = new File(rootPath+ File.separator+newFileName);
//判断目标文件所在的目录是否存在
if(!newFile.getParentFile().exists()) {
//如果目标文件所在的目录不存在,则创建父目录
newFile.getParentFile().mkdirs();
}
System.out.println(newFile);
//将内存中的数据写入磁盘
file.transferTo(newFile);
//完整的url
String fileUrl = newFileName;
Mapmap = new HashMap();
Mapmap2 = new HashMap();
map.put("code",0);//0表示成功,1失败
map.put("msg","上传成功");//提示消息
map.put("data",map2);
map2.put("src",fileUrl);//图片url
map2.put("title",newFileName);//图片名称,这个会显示在输入框里
String result = new JSONObject(map).toString();
return result;
}
注意:如果想在编辑器中显示你上传的图片,需要配置tomcat的虚拟路径
配置虚拟路径的方法参考这篇文章:https://blog.csdn.net/qq_36750461/article/details/85050946
layui网页html编辑器,layui使用富文本编辑器相关推荐
- CSDN使用富文本编辑器为所发布的文章生成右侧目录
如果我们想为我们的文章生成相应的目录,在不使用MD编辑器的情况下,我们使用富文本编辑器也是可以为我们的文章生成目录(特别提醒:最少需设置4个标题这样才能看出效果).我们可以假设需要发布的文章已经编辑好 ...
- Django 3.2.5博客开发教程:使用富文本编辑器添加数据
在Django admin后台添加数据的时候,文章内容文本框想发布一篇图文并茂的文章需就得手写Html代码,这十分吃力,也没法上传图片和文件.这显然不是我等高大上程序猿想要的. 为提升效率,我们可以使 ...
- Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
- vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
- 微信小程序-后台使用富文本编辑器返回数据,小程序编译富文本编辑器返回的数据
最近遇到一个功能,后台管理系统添加商品的时候,商品详情是使用富文本编辑器添加的.小程序获取的商品详情数据是含有<p>标签的. 后台管理系统 百度了多种方法,也试用了很多方法,最终觉得wxP ...
- Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
- 小程序使用富文本编辑器以及使用wxParse解析html结构
小程序使用富文本编辑器以及使用wxParse解析html结构 13小程序发布文章功能(富文本编辑器的使用和解析html结构数据的wxParse)
- 学习日志day46(2021-09-10)(1、使用富文本编辑器simditor)
学习内容:学习JavaWeb(Day46) 1.使用富文本编辑器simditor 1.使用富文本编辑器simditor (1)常见的富文本编辑器有simditor.CKEditor.tinymce.k ...
- 杨老师教你学会使用富文本编辑器KindEditor之添加页面设计
2018-12-06 进行整理本篇文章,主要是解决如何引入富文本编辑器的使用 2019-06-18 进行了二次完善,解决了富文本编辑器的图片上传和附件上传问题 本篇文章进行二次更新操作,完善了上传图片 ...
- 使用富文本编辑器wangEditor完成图片文件的上传
项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wang ...
最新文章
- AI 世界的硬核之战,Tengine 凭什么成为最受开发者欢迎的主流框架?
- C语言实现臭皮匠排序stooge sort 算法(附完整源码)
- OpenStack的部署T版(四)——Placement组件
- iptables命令_程序员最有用的linux命令汇总
- 【转】DICOM中几个判断图像方向的tag
- php手机电子相册,免费电子相册制作软件 手机电子相册制作软件
- 漫话:为什么你下载小电影的时候进度总是卡在99%就不动了?
- python函数主要通过接口与外界通信_PySpark源码解析,用Python调用高效Scala接口,搞定大规模数据分析...
- 计算尖峰电流的目的_干货 | 谈谈RCD的计算方法
- cvtcolor函数_5 OpenCV几个函数操作实例
- 通用24CXXX读写程序(GCC),兼容24C系列存储器(24C01到24C1024),支持跨器件跨页读写,支持连续
- C4认证Java基础Excel练习题
- C语言--指针实现字符串逆序输出
- 2021谷歌IO大会内容
- java页面置换_页面置换算法java
- 资深工程师PCB经验介绍
- window.open打开子窗口回调父窗口函数
- csp刷题总结(如此编码python版本)
- jsp写php一句话,asp,aspx,php,jsp下的一句话木马
- 软工1816 · Alpha冲刺(4/10)
热门文章
- js实现阶乘算法的三种方法
- 微软project服务器搭建,Project Professional 版本(Project Server 2010 设置)
- 计算机一级上机考试试题题库,2016年计算机一级上机考试题库
- 电视光端机应用范围及故障维护问题介绍
- 【渝粤教育】电大中专幼儿园课程论 (7)作业 题库
- 【渝粤题库】广东开放大学 会展策划 形成性考核
- emacs c语言,如何利用Emacs来调试C++程序
- 【MFC系列-第9天】MFC消息映射机制的原理
- 【自适应(盲)均衡5】分数间隔均衡器基本原理及应用(更正数字通信翻译版中公式错误)
- oracle元字符,正则表达式元字符