Mezzanine Markdown的问题

Mezzanine的扩展pagedown支持在Mezzanine中使用Markdown来编辑Page和blog。但是安装了pagedown之后，markdown的preview总是有问题。由于web开发基本没有做过，本文是一个流水账，记录如何解决这个问题。当然会非常杂，也有不少弯路。

1 Find the problem

1 从RICHTEXT_WIDGET_CLASS入手

由于把richtext的Editor换成了

RICHTEXT_WIDGET_CLASS

，而

RICHTEXT_WIDGET_CLASS

工作不正常，所以查看源代码里哪里使用了

RICHTEXT_WIDGET_CLASS

：

grep -rnw mezzsite -e RICHTEXT_WIDGET_CLASS

新建的项目里没有这个。然后到虚拟环境中去找：

grep  --include=*.py --exclude webenv/lib/python2.7/site-packages/mezzanine/core/locale -rnw webenv -e RICHTEXT_WIDGET_CLASS

结果是：

webenv/lib/python2.7/site-packages/mezzanine/core/tests.py:354:        richtext_
widget = import_dotted_path(settings.RICHTEXT_WIDGET_CLASS)
webenv/lib/python2.7/site-packages/mezzanine/core/defaults.py:246:    name="RICH
TEXT_WIDGET_CLASS",
webenv/lib/python2.7/site-packages/mezzanine/core/defaults.py:543:        "``RIC
HTEXT_WIDGET_CLASS`` is used."),
webenv/lib/python2.7/site-packages/mezzanine/core/fields.py:45:        ``RICHTEX
T_WIDGET_CLASS`` setting.
webenv/lib/python2.7/site-packages/mezzanine/core/fields.py:50:            richt
ext_widget_path = settings.RICHTEXT_WIDGET_CLASS
webenv/lib/python2.7/site-packages/mezzanine/core/fields.py:55:
"settings.RICHTEXT_WIDGET_CLASS: "
webenv/mezzsite/mezzsite/settings.py:319:RICHTEXT_WIDGET_CLASS = 'mezzanine_page
down.widgets.PageDownWidget'

和问题相关的就是

default.py

和

field.py

，

default.py

就全部是配置信息，和下面的配置信息类似：

register_setting(
name="RICHTEXT_WIDGET_CLASS",
description=_("Dotted package path and class name of the widget to use "
"for the ``RichTextField``."),
editable=False,
default="mezzanine.core.forms.TinyMceWidget",
)

field.py

中，只有这个类RichTextField使用了RICHTEXT_WIDGET_CLASS

richtext_widget_path = settings.RICHTEXT_WIDGET_CLASS
widget_class = import_dotted_path(richtext_widget_path)

2 关于

RichTextField

相关代码如下：

class RichTextField(models.TextField):
def formfield(self, **kwargs):
richtext_widget_path = settings.RICHTEXT_WIDGET_CLASS
widget_class = import_dotted_path(richtext_widget_path)
kwargs["widget"] = widget_class()
formfield = super(RichTextField, self).formfield(**kwargs)
return formfield

in core: class RichText(models.Model):
content = RichTextField(_("Content"))

in page: class BasePage(Orderable, Displayable):
in page: class Page(BasePage):
in page: class RichTextPage(Page, RichText):

in form: class Form(Page, RichText):

RichTextField

类在

formfield

里加入了

widget_class

，这样页面就是显示

widget_class

。没有看出什么问题。

又发现这个问题只是出现在RichtextPage中，而Form和Gallery没有这个问题。

3 看一下Form和Richtextpage有什么不同

感觉Form的也是开始这个样子，然后是Java运行一段时间才有icon出现。看了代码Icon也是Java Code产生的。那应该是Java运行的问题。

用Chrome来debug ,

$(document).ready( function()...

的确没有执行。

$(document).ready( function()...

是page_down项目的

editor.html

定义的。把这个函数改成简单一点的：

<script type="text/javascript">
$(document).ready( function() {
alert("jquery functioning");
$("div").css("border", "3px solid red");  } );
</script>

也还是没有执行。至此基本定位的错误只所在。

4 use chrome to debug

现代的浏览器Chrome，IE和Firefox都debug机制，都是

F12

进入debug。

F10

: step over,

F11

: step into.

F12

可以看到页面有错误，错误出在 jquery-1.7.2.min.js和filebrowser-popup.js中。

Uncaught TypeError: jQuery(...).append(...).appendTo(...).dialog is not a functionmediaLibrary.init
mediaLibrary.init   @   filebrowser-popup.js:40
(anonymous function)    @   filebrowser-popup.js:98
m.Callbacks.j   @   jquery-1.7.2.min.js:2
m.Callbacks.k.fireWith  @   jquery-1.7.2.min.min.js:2
m.extend.ready  @   jquery-1.7.2.min.js:2
J   @   jquery-1.7.2.min.js:2

调用过程应该是从上倒下还是other way? 是从下到上的。

这个js是widget.py加进来的.

<script type="text/javascript" src="/static/mezzanine/js/jquery-ui-1.9.1.custom.min.js"></script>

另外，’filebrowser/js/filebrowser-popup.js’, is also in widget.py

2 Fix the problem:

1 try 1:

edit editor.html. 在document.ready中加入简单的测试

alert("iamhear.");  $("div").css("border", "3px solid red");

vi templates/mezzanine_pagedown/editor.html

还是Form页面正常出现弹出框，也改成红色了。RichtextPage还是没有执行上面的代码。这说明editor.html中的代码是正确的。

关于断点设置的一点体会：

<script type="text/javascript">  # break point 设置到这里是可以停下来 .
$(document).ready(function () { # break point 设置到这里也是可以停下来，但是还会调用其他Jquery里的函数，要干点Setup hook的事情。
alert("iamhear");  # 如果Setup UP hook出错了，也不会执行到这里。

2 try 2: 怀疑jquery-1.7.2.min版本太低？更新版本

vi mezzanine\core\defaults.py

如果要修改jquery-1.7.2.min.js版本，可以改这个：

register_setting(
name="JQUERY_FILENAME",
label=_("Name of the jQuery file."),
description=_("Name of the jQuery file found in "
"mezzanine/core/static/mezzanine/js/"),
editable=False,
default="jquery-1.11.3.min.js",
)

并且要更新相应的文件。

wget https://code.jquery.com/jquery-1.11.3.min.js cp jquery-1.11.3.min.js ~/webenv/lib/python2.7/site-packages/mezzanine/core/static/mezzanine/js

问题is still there.

3 try 3: 现在认为是filebrower-popup.js的问题

用Chrome的debug在filebrower-popup.js中设置断点，调用init的时候就错误。

this.iframe = jQuery('<iframe frameborder="0" marginwidth="0" marginheight="0" width="900" height="500" allowfullscreen></iframe>');
this.gallery = jQuery('<div></div>').append(this.iframe).appendTo('body')
.dialog({
autoOpen: false,
title: 'Media Library',
width: 900,
dialogClass: 'media-library',
resizable: false,
create: function(event, ui) {
jQuery(this).css('padding', 0);
}
});

从来没有写过js，上面的代码是什么意思：参考下面的注释。

Technically

$('<div></div>')

will ‘create’ a div element (or more specifically a DIV DOM element) but wont add it to your HTML document. You will then need to use that in combination with the other answers to actually do anything useful with it (such as using the append() method or such like).

Both jQuery append() and appendTo() methods are doing the same task, add a text or html content after the content of the matched elements. The major difference is in the syntax.

如需设置指定的 CSS 属性，请使用如下语法：

css(“propertyname”,”value”);

现在基本理解这个代码了，

错误就在调用

.dialog

这一行上。google一下，有人说

Be sure to insert full version of jQuery UI.

。比较了一下Form和richtextpage不同之处，发现Richtextpage的确没有

jQuery UI

modify the markdown widget.py to include jquery ui:

cd ~/webenv/lib/python2.7/site-packages/mezzanine_pagedown/
vi widgets.py
add JQUERY_UI_FILENAME the same as JQUERY_FILENAME

终于解决这个问题了.

3 markdown的编辑区域太小，改大一点

就是把Panel的尺寸和Textarea的尺寸改大一点，顺便把Textarea的文字大小也改大一点。年纪大了，喜欢大一点的字。

vi  editor.html
style="width: 1420px;
<textarea id="wmd-input-{{ id }}" class="wmd-input"  style="width: 650px; font-size:16px; font-weight: normal;"

4 Final

现在对Mezzanine的编辑环境比较满意了。