Editor.md 简单使用(二)——显示编辑的内容

楔子

md编写提交后,需要在另一个页面显示已编辑提交的数据。

页面

需要的js

为何需要以下js。我是在官网给的例子的页面找的,官网给的例子中列出了下面js,为了能正常显示,还是按照官网。

<script src="${proPath }/js/md/lib/marked.min.js"></script>
<script src="${proPath }/js/md/lib/prettify.min.js"></script>
<script src="${proPath }/js/md/lib/raphael.min.js"></script>
<script src="${proPath }/js/md/lib/underscore.min.js"></script>
<script src="${proPath }/js/md/lib/sequence-diagram.min.js"></script>
<script src="${proPath }/js/md/lib/flowchart.min.js"></script>
<script src="${proPath }/js/md/lib/jquery.flowchart.min.js"></script>
<script src="${proPath }/js/md/editormd.min.js" type="text/javascript" charset="utf-8"></script>

html页面

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">
            <h3 class="">${b.title }</h3>
        </div>
    </div>
    <div class="panel-body">
        <!-- 用于显示md编辑器的md格式 -->
        <div id="doc-content">
            <textarea style="display: none;">${b.html}</textarea>
        </div>
    </div>
</div>

我是使用java作为后台,查询到数据传递到前台用${b.html} 接受显示

页面js

<script type="text/javascript">
    var testEditor;
    $(function() {
        testEditor = editormd.markdownToHTML("doc-content", {//注意:这里是上面DIV的id
            htmlDecode : "style,script,iframe",
            emoji : true,
            taskList : true,
            tex : true, // 默认不解析
            flowChart : true, // 默认不解析
            sequenceDiagram : true, // 默认不解析
            codeFold : true
        });
    });
</script>
Editor.md 是一个基于 Markdown 编辑器的开源项目,可以方便地在 Web 应用中使用。而 Flask 是一个轻量级的 Python Web 框架,非常适合用于构建小型的 Web 应用程序。下面是 Editor.md 在 Flask 中的使用方法。 首先,我们需要使用以下命令安装 editor.md: ``` npm install editor.md ``` 安装完成后,我们可以在 Flask 项目中创建一个静态文件夹(例如 static),将编辑器的 JS 和 CSS 文件放入其中。 在 Flask 的路由文件中,我们可以添加以下代码来渲染编辑器页面: ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/editor') def editor(): return render_template('editor.html') if __name__ == '__main__': app.run() ``` 在 templates 文件夹中创建一个名为 editor.html 的模板文件,其中包含编辑器的 HTML 结构和必要的脚本引入。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Editor</title> <link rel="stylesheet" href="{{ url_for('static', filename='editor.md/css/editormd.css') }}"> </head> <body> <div id="editor"> <textarea></textarea> </div> <script src="{{ url_for('static', filename='editor.md/lib/jquery.min.js') }}"></script> <script src="{{ url_for('static', filename='editor.md/lib/editormd.min.js') }}"></script> <script type="text/javascript"> $(function() { var editor = editormd("editor", { // 配置选项 }); }); </script> </body> </html> ``` 在这个例子中,我们通过 Flask 的 render_template 函数将 editor.html 渲染给用户。编辑器的配置选项可以根据需求进行设置,详情可以参考 Editor.md 的官方文档。 最后,启动 Flask 程序并访问 `http://localhost:5000/editor`,你将可以看到编辑器的界面。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值