LayUI 一MarkDown编辑器一简单渲染-阿里云开发者社区

LayUI 一MarkDown编辑器一简单渲染

2022-11-09 363

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： LayUI 一MarkDown编辑器一简单渲染

<!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>

LayUI 一MarkDown编辑器一简单渲染

热门文章

最新文章

相关课程

相关电子书

相关实验场景