javaweb+移动端富文本

1. 页面 layui

<form id="editForm" class="layui-form layui-form-pane" lay-filter="editForm"><div class="layui-form-item"><label class="layui-form-label">内容</label><div class="layui-input-block"><textarea id="content" name="content" th:attr="disabled=${type} == 1" lay-verify="content"></textarea></div></div>
</form>

2. 页面 js

var layedit = layui.layedit;
//设置图片接口
layedit.set({uploadImage: {url: '/sys/fileUploadLayedit', //接口urltype: 'post'},
});
//加载数据
if (data.id) {//执行重载CoreUtil.sendAjax("/api/busRichText/get", {id: data.id}, function (res) {if (res.data) {data = res.data;form.val('editForm', res.data);layedit.setContent(index, data.content);//创建一个编辑器，lay_edit为textarea标签的id值var index = layedit.build('content', {height: 350    //设置编辑器的高度});//提交时把值同步到文本域中form.verify({//content富文本域中的lay-verify值content: function (value) {return layedit.sync(index);}});if (isView == '1') {//详情/*内容不可编辑。此行必须在setContent函数前修改属性，否则属性设置不成功*/$("#LAY_layedit_1").contents().find("body[contenteditable]").prop("contenteditable", false);//jquery获取iframe里的内容}}});
} else {//创建一个编辑器，lay_edit为textarea标签的id值var index = layedit.build('content', {height: 350    //设置编辑器的高度});//提交时把值同步到文本域中form.verify({//content富文本域中的lay-verify值content: function (value) {return layedit.sync(index);}});
}

3. 给移动端的页面图片自适应

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><style>.con {padding: 10px;}.title {font-size: 18px;font-weight: 800;text-align: center;}.time {text-align: right;margin-top: 10px;font-size: 12px;color: #999999;}.content {font-size: 14px;margin-top: 10px;line-height: 20px;color: #333333;}</style>
</head>
<body>
<div class="con"><div class="title"></div><div class="content1" hidden></div><div class="content"></div>
</div>
</body><script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>var $ = jQuery = layui.jquery;var id = '[[${id}]]';if (id) {//执行重载CoreUtil.sendAjax("/api/busRichText/get-d", {id: id}, function (res) {if (res.data) {var data = res.data;$('.title').html(data.title);var html = data.content.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1').replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1').replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1').replace(/<img([\s\w"-=\/\.:;]+)\/upload/ig, '<img style="width: 100%;" $1/upload');$('.content1').text(html);$('.content').html($('.content1').text());}});}
</script>
</html>另一种
var str = '桃之夭夭，灼灼其华。之子于归，宜其室家。' +'桃之夭夭，有蕡其实。之子于归，宜其家室。' +'桃之夭夭，其叶蓁蓁。之子于归，宜其家人。' +'<img src="http://222.223.251.109:8031/xsdwm//upfile/2022-01-25/2a03ban8.jpeg" alt="22" title="33"></span></p>';var reg = /(<img[^>]*)(\/?>)/gi;
var html = str.replace(reg, '$1 width="100%" $2');
console.log(html);

接口 Controller 出参格式需要注意按layui要求走

@RestController
@RequestMapping("/sys")
@Api(tags = "首页数据")
public class HomeController {@Value("${file.uploadFolder}")private String uploadFolder;@Value("${file.staticAccessPath}")private String staticAccessPath;@Value("${zhwg.captrue.image.path}")private String captureImagePath;/**** @param file 要上传的文件* @return*/@RequestMapping("/fileUploadLayedit")public DataResult fileUploadLayedit(@RequestParam("file") MultipartFile file, HttpServletRequest request, HttpServletResponse response) {DataResult result = new DataResult();// 保存图片String filename = file.getOriginalFilename();// 文件后缀名String prefix = filename.substring(filename.lastIndexOf(".") + 1);String destFilename = UUID.randomUUID().toString().replace("-", "") + "." + prefix;Date d = new Date();SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");String dateMonth = sdf.format(d);File fileUrl = new File(uploadFolder + captureImagePath + "/" + dateMonth);String imgUrl = "/upload/" + dateMonth + "/" + destFilename;if (!fileUrl.exists()) {fileUrl.mkdirs();}File destImage = new File(fileUrl, destFilename);try {file.transferTo(destImage);Map<String,Object> map = new HashMap<String,Object>();map.put("src", imgUrl);map.put("title", filename);result.setMsg("上传成功！");result.setCode(0);result.setData(map);return result;} catch (IOException e) {return DataResult.fail("上传失败！");}}
}

常量在application.properties 中

file.uploadFolder=c://
zhwg.captrue.image.path=home/capture/
file.staticAccessPath=/upload/**

启动类 Application

//@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class})
@SpringBootApplication
//@MapperScan("com.sm.qh./**/.mapper")
@MapperScan({"com.sm.qh.**.mapper"})
@Configuration
public class CompanyFrameApplication implements WebMvcConfigurer {@Value("${file.uploadFolder}")private String uploadFolder;@Value("${file.staticAccessPath}")private String staticAccessPath;@Value("${zhwg.captrue.image.path}")private String captureImagePath;@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler(staticAccessPath).addResourceLocations("file:" +uploadFolder + captureImagePath);}
}

javaweb+移动端富文本相关推荐

android端富文本编辑器HRichEditor
HRichEditor android端富文本编辑器项目地址:https://github.com/huangdali/HRichEditor 使用方法见DEMO 所有功能已经实现,期待你的star ...
如何实现移动端富文本编辑器功能
移动端富文本编辑器市面非常之少,因客户需求找了不少,不是标题党就是pc端自适应那种无法满足需求,找了好久终于找到了这个artEditor,下载地址:https://gitee.com/lyzmzcom ...
基于 Vue 的移动端富文本编辑器 vue-quill-editor 实战
优秀的富文本编辑器有很多,比如:UEditor,wangEditor 等,但并不是每个都能在移动端有很好的表现. 我们暂且不讨论移动端是否真的需要富文本,既然有这需求,就把它实现出来. 失败的尝试正 ...
【JavaWeb】之富文本编辑器
[JavaWeb]富文本编辑器前言一.富文本编辑器介绍二.富文本编辑器使用 1.引入编辑器(多种引入方式) 2.使用编辑器三.主流富文本编辑器推荐 1.TinyMCE 2.CKEditor 3 ...
微信小程序端富文本输入
有个需求是用户端也就是小程序端,需要可以富文本发布文章. 示例: 1. 下载组件-微信小程序editor富文本编辑器组件 2.放在小程序自定义组件文件夹下 3.需要用到的页面引入该组件 "u ...
uni-app 富文本小程序富文本（微信小程序、支付宝小程序、百度小程序）直接套用pc端富文本问题解析
微信跟百度直接使用 u-parse组件,效果还是不错的,注意一点是a标签的复制提示语,自己需要uni.hideLoading()一下,再重置. 支付宝相对复杂一点,采用原生rich-text 标签, ...
vue移动端富文本编辑器vue-html5-editor
简介 Intro Vue-html5-editor是一个Vue的富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11. Vue-html5-editor is an html5 ...
H5 移动端富文本编辑器
本文使用的是:summernote编辑器官网地址:https://summernote.org 文档地址:https://summernote.org/deep-dive/#initializati ...
移动端富文本编辑器iOS、Android
编辑器 github 简介 RichEditor github RichEditor for Android is a beautiful Rich Text WYSIWYG Editor for A ...

javaweb+移动端富文本

javaweb+移动端富文本相关推荐

最新文章

热门文章

javaweb+移动端 富文本

javaweb+移动端 富文本相关推荐

最新文章

热门文章

javaweb+移动端富文本

javaweb+移动端富文本相关推荐