django之admin中使用markdown编辑器，并实时预览一

不清楚的可查看：本人博客github地址

安装django-markdownx

Macos：直接

pip install django-mrakdownx

;Ubuntu需要先安装pillow,参考此链接。

按照官方教程设置,不同的是本文markdownx的widget如下设置，在项目的templates根目录下，创建markdownx文件夹，再创建widget.html,内容如下：

{% load staticfiles %}
<link rel="stylesheet" href="{%static "/css/bootstrap/3.3.7/bootstrap.min.css" %}">

<div class="markdownx row">
<div class="col-md-6">
{{ markdownx_editor }}
</div>
<div class="col-md-6">
<div class="markdownx-preview"></div>
</div>
</div>

若仍觉得操作不适，参照下文两种方法选其一

A. 通过修改django改变editor和preview的样式

1. 修改form.css

修改

<python-package>/django/contrib/admin/static/admin/css/form.css

1. 首先查看python安装路径，在Python环境中

import sys
print sys.path

macos虚拟环境中的

<python-package>

是：

/Users/johnsonlai/.virtualenvs/mySite/lib/python2.7/site-packages

; Ubuntu 14.04的是：

/usr/local/lib/python2.7/dist-packages

。

1. .aligned ul中的``margin-left = 160``注释掉，使得li标签不会向右偏移160像素
2. .aligned label中的``float = left``注释掉，使label在上输入框在下
3. .submit-row a.deletelink 中的``height = 15px``注释掉，否则delete按钮会显示不全

2. 修改wdigets.py

修改

<python-package>/django/forms/widgets.py中textarea

中textarea的设置

‘cols : 80’

(默认40)，使输入更加方便。

B. 通过在widget.html引入新的css改变样式

widget.html中引入css

{% load staticfiles %}

<link rel="stylesheet" href="{%static "/css/self/jblog-admin.css" %}">
...
<div class="markdownx row">
<div class="col-md-6">
{{ markdownx_editor }}
</div>
<div class="col-md-6">
<div class="markdownx-preview"></div>
</div>
</div>

jblog-admin.css内容如下:

.aligned ul
{
margin-left: 0px;
}

.aligned label
{
float: none;
}

textarea
{
width: 100%;
}

C. 效果