LayUI 一MarkDown编辑器一简单渲染

最新推荐文章于 2024-08-22 09:09:24 发布

Coding路人王

最新推荐文章于 2024-08-22 09:09:24 发布

阅读量1.9k

点赞数 1

文章标签： html vue css markdown html5

本文链接：https://blog.csdn.net/wyn_365/article/details/107315742

版权

精选30+云产品，助力企业轻松上云！>>>

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>简易Markdown编辑器</title>
</head>
<!-- layui样式 -->
<link rel="icon" href="/resources/favicon.ico">
<link rel="stylesheet"  th:href="@{/resources/layui/css/layui.css}"
      media="all"/>
<!-- 部分自定义样式  -->
<link rel="stylesheet" th:href="@{/resources/easyeditor/css/easyeditor.css}">
<!-- 图标  -->
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1531710_xb357ub1wmg.css" />
<body>
<!--表单开始-->
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div>
            <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
    <!-- Markdown编辑器元素 -->
    <textarea id="L_content" name="content" style="" required lay-verify="required" placeholder="请输入发表内容" class="layui-textarea editor">

    </textarea>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="doSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!--表单结束-->
<br>

<!--markdown文本展示渲染-->
<h2>markdown文本展示渲染</h2>
<div class="easyeditor-content">
    ### 二级标题
    ### 三级标题
    #### 四级标题
</div>



<script th:src="@{/resources/easyeditor/js/marked.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/resources/easyeditor/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/resources/easyeditor/mods/' //存放layui拓展模块的目录位置
    }).extend({
        easyeditor: 'easyeditor'
    }).use(['easyeditor','form','jquery', 'layer'], function() {
        var easyeditor = layui.easyeditor;
        var form = layui.form;
        var $ = layui.jquery;
        //初始化Markdown编辑器
        easyeditor.init({
            elem: '.editor' //textarea 元素class
            ,uploadUrl: '/upload' //图片上传地址
            ,videoUploadUrl : '/upload' //视频上传地址
            ,videoUploadSize:'102400' //限制的上传大小 单位kb 默认 10240 kb
            ,uploadSize: '' //限制的上传大小 单位kb 默认 1024k
        });

        //渲染markdown的语法
        easyeditor.render({
            elem:".easyeditor-content"
        });

        //监听提交
        form.on("submit(doSubmit)", function (data) {
            //layer.msg(JSON.stringify(data.field));
            //发送数据
            $.post("/news/addNews", data.field, function (res) {

                if (res.code == 200) {
                    layer.msg(res.msg); //弹出来看看结果
                }
            });
        });
    });

</script>
</body>
</html>