移动端自适应显示富文本编辑器发布内容

最新推荐文章于 2024-05-17 07:06:21 发布

pursue.dreams

最新推荐文章于 2024-05-17 07:06:21 发布

阅读量569

点赞数 7

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_41687670/article/details/136257556

版权

继上篇，在TinyMCE 发步完文章后，如何可以在移动端更好的自适应显示，代码如下

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('详情')" />
    <!-- 引入TinyMCE CSS -->
    <link th:href="@{/ajax/libs/tinymce/js/tinymce/skins/ui/oxide/skin.min.css}" rel="stylesheet"/>
    <style>
        /* 添加百分比布局 */
        .container {
            width: 100%;
            max-width: 750px;
            margin: 0 auto;
        }

        /* 添加Flexbox布局 */
        .flex-container {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
        }

        .flex-item {
            flex: 1;
        }

        /* 添加图片自适应样式 */
        img {
            max-width: 100%;
            height: auto;
        }

        /* 添加两侧缩进样式 */
        .content-with-indent {
            padding-left: 2em;
            padding-right: 2em;
        }
    </style>
</head>
<body class="white-bg">
<div id="content" class="content-with-indent"></div>
<th:block th:include="include :: footer" />
<!-- 引入TinyMCE JavaScript -->
<script th:src="@{/ajax/libs/tinymce/js/tinymce/tinymce.min.js}"></script>
<script th:src="@{/ajax/libs/tinymce/langs/zh-Hans.js}"></script>

<script th:inline="javascript">
    $(function() {
        const content = document.getElementById('content');
        content.innerHTML = [[${detailContent}]];
    })
</script>
</body>
</html>

返回页面代码：

   @Log(title = "展示信息详情页面", businessType = BusinessType.OTHER)
    @GetMapping("/xxInfodetail/{id}")
    public String detail(@PathVariable("id") Long id, ModelMap mmap)
    {
        xxInfo xxInfo = XXInfoService.selectXXInfoById(id);
        mmap.put("detailContent", xxInfo .getDetailContent());
        return  "xxx/xxxx/detail";
    }