javaweb+移动端富文本

果仁栗子糕

已于 2022-01-28 16:46:50 修改

阅读量1.2k

点赞数

分类专栏： java 文章标签： javascript html 正则表达式

于 2021-12-15 14:55:44 首次发布

本文链接：https://blog.csdn.net/qq_21718533/article/details/121952037

版权

java 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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', //接口url
        type: '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;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(staticAccessPath).addResourceLocations("file:" +uploadFolder + captureImagePath);
    }
}

果仁栗子糕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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">
复制链接

扫一扫