LayUI 一MarkDown编辑器一简单渲染

简介: 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>
目录
相关文章
|
2月前
|
程序员 Linux iOS开发
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
119 1
|
2月前
|
前端开发
914.【前端】Taro集成towxml渲染markdown文档
914.【前端】Taro集成towxml渲染markdown文档
198 2
|
2月前
《使用「Markdown」编辑器的那些天 |CSDN编辑器测评》
《使用「Markdown」编辑器的那些天 |CSDN编辑器测评》
37 0
|
1月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
69 4
|
2月前
|
前端开发 C++ iOS开发
几款主流好用的markdown编辑器介绍
几款主流好用的markdown编辑器介绍
168 1
|
2月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
41 1
基于HTML5开发的Markdown在线编辑器
|
15天前
|
Linux C++ 开发者
几款主流好用的markdown编辑器介绍
几款主流好用的markdown编辑器介绍
20 0
|
2月前
|
Web App开发 移动开发 搜索推荐
常见的Markdown在线编辑器
在线Markdown编辑器提供了更加稳定和流畅的用户体验。用户无需下载安装任何软件,只需打开浏览器,即可在任何设备上轻松使用这款编辑器,实现随时随地的写作。基于HTML5的在线Markdown编辑器可实现即时的编辑和预览功能
44 2
|
1月前
Markdown编辑器--冷门实用知识总结
Markdown编辑器--冷门实用知识总结
|
2月前
|
Web App开发 存储 机器学习/深度学习
欢迎使用CSDN-markdown编辑器
欢迎使用CSDN-markdown编辑器
29 0