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.pyfield.pydefault.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_CLASSwidget_class = import_dotted_path(richtext_widget_path)kwargs["widget"] = widget_class()  formfield = super(RichTextField, self).formfield(**kwargs)return formfieldin 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:

  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的编辑环境比较满意了。

Mezzanine Markdown的问题相关推荐

  1. 如何使用Mezzanine

    Mezzanine是著名的开源.基于Django的CMS系统 (content management system).其实任何一个网站都可以看作是一个特定的内容管理系统,只不过每个网站发布和管理的具体 ...

  2. Mezzanine汉化

    1.编辑/path/to/projectname/projectname下的setting.py ALLOWED_HOSTS = ['www.xxx.com'] 为了使用域名来访问 TIME_ZONE ...

  3. lisp协议instand_分享|Linux 上 10 个最好的 Markdown 编辑器

    在这篇文章中,我们会点评一些可以在 Linux 上安装使用的最好的 Markdown 编辑器. 你可以在 Linux 平台上找到非常多的 的 Markdown 编辑器,但是在这里我们将尽可能地为您推荐 ...

  4. 【其他】将幕布文章OPML转换为Markdown的方法

    使用幕布可以快速地进行笔记中格式缩进和笔记管理等操作,但是,幕布只提供了Word.PDF.图片.HTML.OPML.思维导图的导出,以下是把幕布的大纲转换成Markdown的方法. 1.先把幕布里的文 ...

  5. 【注意事项】Markdown遇到的小问题

    写博客的目录的时候遇到了一个小问题 在博客三级标题里插入了一个超链接,在正文里看显示格式是正常的 但是文章开头的目录中却出现了显示异常的问题,把Markdown代码直接显示出来了 后来发现是文本里面[ ...

  6. 推荐几个微信Markdown排版工具

    Md2All Markdown Nice WeChat Format 参考链接 原文链接

  7. Markdown入门简介

    参考 http://sspai.com/25137 作者: Te_Lee 文章来源: 少数派 Markdown入门简介(使用工具Haroopad) 一.使用的工具----haroopad(http:/ ...

  8. atom搭建markdown环境

    1. 搭建markdown环境 > 禁用atom自带的markdown-preview插件(功能简单) > 安装插件:markdown-preview-plus@2.4.16(在markd ...

  9. 在Ubuntu 14.04 64bit上安装Markdown和绘图软件Haroopad

    简介 Haroopad:一款让你欲罢不能的Markdown编辑器 身为大程序员,我本来是不需要 Markdown 编辑器的,但是 Haroopad 让我简直欲罢不能,不能再爱更多.跨平台,代码高亮,V ...

最新文章

  1. SpringMVC处理模型数据
  2. ubuntu vim php配置文件在哪,ubuntu vim的配置文件在哪
  3. 什么是RAID(独立磁盘冗余阵列)?
  4. 网络驱动器映射成功但无法更新文件_我的电脑访问NAS像打开本地硬盘那样打开网络NAS...
  5. SpringBoot添加拦截器
  6. jquery easyui+spring mnv 样式引不进,需要加载静态资源
  7. 论文笔记:Connectionist Temporal Classification: Labelling Unsegmented Sequence
  8. 人工智能Java SDK:图片分类(支持imagenet数据集分类)
  9. 嵌入式入门学习笔记1:资料收集
  10. java 导出word试题
  11. 阿里云服务器CentOS7装机配置之路(JDK1.8,MySql8.0,MongoDb4.0.3,Openfire4.2.3,Redis)
  12. Windows下尝试PHP7提示丢失VCRUNTIME140.DLL的问题解决
  13. C语言 char c = 255
  14. 全球最著名开源组织概述
  15. 多相滤波 信道化接收机 matlab程序,基于复多相滤波器组的信道化接收机
  16. excel手机版_适用于手机的Office办公软件:微软采取3合1,这是为何
  17. mysql .err 怎么查看_MySQL日志设置及查看方法
  18. c语言printf输出图形(四星,love)
  19. activiti监听器设置审批人
  20. 网络基础学习:ip地址的知识

热门文章

  1. 山东大学计算机专业知名教授,胡思煌 山东大学主页平台管理系统--胡思煌
  2. 企业降低包装成本的13种简单方法(下篇)
  3. 国内外知名云服务公司介绍
  4. 我的世界java版gamemode指令_我的世界(电脑Java版)简单又好玩指令教程
  5. QGraphicsItem图元的简单使用(一)
  6. EasyExcel导出数据到Excel,浏览器提供下载
  7. 微信公众平台针对欺诈等违规行为处理结果公示
  8. 欢迎各位小伙伴来领取免费的安卓教程
  9. 模式识别研究生:三维点云从零开始学习
  10. 电脑配置单4(自用勿删)