还记得在上篇提到的rest-framework,文档中提到了markdown也是可选应用。
那么这篇我们就来尝试使用markdown来制作一个在线的可以预览的editor。
安装 Python Markdown
pip install markdown
使用起来简单地就是两个函数:
markdown(text)
markdownFromFile(input, output)
markdown(text)会直接把text转换成html格式返回。
我们在应用中就用这个就行了。
首先,在views.py中添加视图:
...
from markdown import markdown
...
def mdeditor(request):
preview_html = ""
if request.method == 'POST':
md_content = request.POST['md_content']
print("md_content: {}".format(md_content))
preview_html = markdown(md_content)
context = {'preview_html':preview_html,}
return render(request, 'post/mdeditor.html', context)
将从post穿过来的md_content转换成html格式。然后传给post/mdeditor.html这个template返回给浏览器。
所以下一步就是建立一个这样的模板。
markdow editorfunction getEditorContent(){
document.getElementById("md_content").value = document.getElementById("editor").innerHTML;
}
{% csrf_token %}
{{ preview_html | safe }}
我们使用
来做编辑器。那么要在表单中返回服务器,就需要将这个值付给一个input标签,就像上面代码做的一样。
从views.py传过来的preview_html默认会对一些字符进行转义,所以需要添加 | safe
打开浏览起就可以看到效果啦。我们这里使用了python markdown这个应用,可以看到相当的方便。
在上面的代码中,如果使用ajax将内容传回就更好了。但是如果javascript就有markdown的相应的应用就不用传回服务器了,所以如果真要自己使用那么还是找相应的js库方便。
自己动手制作更好用的markdown编辑器-01
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im 文章目录 1. 简介 2. 项目结构 3. 程序主界面 4. 拖动窗口 5. app ...
mac好用的markdown编辑器
在刚开始接触markdown的时候,就被吸引了.此后一直在找贴心的好用的markdown编辑器.印象笔记和马克飞象配合着用也是挺好的,唯一的缺点就是比较封闭,发个笔记的链接给同学,还得注册才能看,导致 ...
Markdown编辑器语法指南2
人的一切痛苦, 本质上都是对自己的无能的愤怒. --王小波 1 Markdown编辑器的基本用法 1.1 代码 如果你只想高亮语句中的某个函数名或关键字,可以使用 `function_name()` ...
NanUI for Winform 使用示例【第二集】——做一个所见即所得的Markdown编辑器
经过了这一个多星期的调整与修复,NanUI for .NET Winform的稳定版已经发布.应广大群友的要求,现已将NanUI的全部代码开源. GitHub: https://github.com/ ...
使用python制作ArcGIS插件(2)代码编写
使用python制作ArcGIS插件(2)代码编写 by 李远祥 上一章节已经介绍了如何去搭建AddIn的界面,接下来要实现具体的功能,则到了具体的编程环节.由于使用的是python语言进行编程,则开 ...
使用python制作ArcGIS插件(1)工具介绍
使用python制作ArcGIS插件(1)工具介绍 by 李远祥 ArcGIS从10.0开始支持addin(ArcGIS软件中又叫作加载项)的方式进行插件制作.相对于以往9.x系列,addin的无论是 ...
Linux编辑器篇-分享10个最好的Markdown编辑器
在这篇文章中,兄弟连Linux培训会分享一些可以在 Linux 上安装使用的最好的 Markdown 编辑器.虽然你在 Linux 平台上能找到非常多的 的 Markdown 编辑器,但是在这里我们将 ...
Markdown编辑器使用说明
Markdown编辑器使用说明 #编辑器使用说明编辑器仅用来编辑文章的样式,建议在其他文档中写好内容,再复制到此处编辑样式--- ## 编辑器使用介绍—非开发者 非开发者,可以将编辑框内容全部删掉,使 ...
Markdown编辑器语言——30分钟入门到到精通
一.简要说明 开篇说明 其实吧这是我人生中写的第一篇博客,我也不知道怎么排版和编辑让博文显示的更加美观,现在正在学Markdown编辑语法,也是刚刚学编程的一个小菜鸟,目前是大二的在校生,我的初衷是把 ...
随机推荐
ubuntu下部署SVN
sudo apt-get install subversion 创建库文件夹 sudo mkdir svn sudo chown -R 777 svn 设置为所有用户配置777权限 sudo chmo ...
<;实训|第九天>;掌握linux中普通的权限控制和三种特殊的权限(sst),做合格的运维工程师
linux中,权限的学习是必不可少的,不论是作为一名运维工程师或者是单一的管理者,学习好linux中的权限控制,你就可以保护好自己的隐私同时规划好你所管理的一切. 权限的学习是很多的,不要认为自己已经 ...
plist文件的使用
什么是plist文件 直接将数据写在代码里面,不是一种合理的做法.如果经常改,就要经常翻开对应的代码进行修改,造成代码扩展性低 因此,可以考虑将经常变的数据放在文件中进行存储,程序启动后从文件中读取最 ...
Java根据html模板创建 html文件
1.创建html的java代码 package com.tydic.eshop.util; import java.io.FileInputStream; import java.io.FileOut ...
SecureCRT如何设置字符编码和外观?
SecureCRT是SSH的很好的工具,但是使用的时候,一般都习惯自己的风格. 怎么设置呢? 选项->会话选项->外观 如下图所示
STP生成树协议
STP主要作用 1.消除环路:通过阻断冗余链路来消除网络中可能存在的链路 2.链路备份:当活动那个路径发生故障时,激活备份链路,及时恢复网络连通性. 根桥选举 每个交换机启动STP后,都认为自己是根桥 ...
[UE4]快速移动,给单位向量加一个力
一.(Vector_End- Vector_Start ).Normalize,获取从起始位置指向目标位置的单位向量. 二.给单位向量乘以一个浮点数,即给向量加一个力,是往向量方向移动 每一帧往目标点 ...
Hadoop学习笔记(三):java操作Hadoop
1. 启动hadoop服务. 2. hadoop默认将数据存储带/tmp目录下,如下图: 由于/tmp是linux的临时目录,linux会不定时的对该目录进行清除,因此hadoop可能就会出现意外情况 ...
mysql基本操作(一)
1.登录mysql mysql -h localhost -u root -p 登录mysql,其中 -h是指定要连接mysql服务器的主机名 -u是指定用户 -次数登录必须用-p输入密 ...
Delphi在调WebService的时候加Soap头验证
procedure ws: WebServiceSoap; H: XXXHeader; begin ws := GetWebServiceSoap; H := XXXHeader.Cr ...