semanticeditor 0.3

安装

请参阅INSTALL.rst中的安装说明

使用方法

安装后，在Django-CMS中编辑页面时，您将有一个名为“文本/布局”的插件类型。选择此插件类型，您将看到一个基于WYMeditor的增强型文本编辑器。在右侧，您将看到由WYMeditor提供的“命令”、“类”以及“容器”。

命令列表内置在语义编辑器中，并允许使用像“新建行”和“新建列”这样的简单命令生成列布局。“预览”按钮允许您测试将生成的布局。

为了在您的实际网站上使用布局，您需要在样式表中包含CSS，以正确格式化div结构为一组列。以下是一些基本的CSS开始：

.row { clear: left; }
.row .column { float: left; }
.columns1 .column { width: 100%; }
.columns2 .column { width: 50%; }
.columns3 .column { width: 33%; }
.columns4 .column { width: 25%; }
.columns5 .column { width: 20%; }
.columns6 .column { width: 16%; }

编辑器右侧出现的CSS类列表是在数据库中定义的。您可以使用Django管理后台添加和编辑‘CssClass’对象，并将它们分配给不同的模板。您需要将相应的CSS添加到样式表中，才能真正为这些类提供样式。

对于CssClass对象，支持可以应用于列的样式，使它们占据多个列。例如，您可以定义一个名为“doublewidth”的样式，将“列数等效”设置为“2”，并确保“允许的HTML元素”包含“newcol”。然后，例如，您可以使用编辑器中的“新建列”命令添加3列到布局中。如果您突出显示第一列，您将能够应用“doublewidth”类。在生成的输出中，列将在应用了“columns4”的div中（而不是“columns3”），第一列将应用“doublewidth”。使用适当的CSS，您现在可以创建一个双宽列。

内部概述

目标是拥有一个编辑器，内容以语义方式编辑，同时独立应用列布局和样式。然而，在数据库中只存储了组合的HTML。因此，我们面临以下情况

HTML内容在数据库中存储如下

<div class="row columns2">
   <div class="column">
     <h1 class="fancy">Heading</h1>
     <p class="note bordered">Some text</p>
   </div>
   <div class="column doublewidth">
     <p>Some more text</p>
   </div>
</div>

这被加载到浏览器中的自定义编辑器中，然后立即向服务器发出一些AJAX调用，将其分解为简化的HTML

<h1 id="h1_1">Heading</h1>
<p id="p_1">Some text</p>
<p id='p_2'>Some more text</p>

以及一个指定呈现的对象数组，例如

[
   {'h1_1': ['fancy']},                # styles for the H1
   {'p_1':  ['note', 'bordered']},     # styles for the P
   {'newrow_h1_1': [] },               # specifies row before h1_1
   {'newcol_p_2': ['doublewidth'] },   # specifier col before p_2
                                       #  and styles for whole column
]

这两部分将分别编辑，即用户在编辑时不会看到组合的HTML。在保存到数据库之前，编辑器执行一个AJAX调用以合并这两部分。注意使用‘id’属性来帮助识别样式信息所属的内容——这些将在保存到数据库之前被删除。

内部 - WYMeditor扩展

语义编辑器应用提供了自己的WYMeditor版本。这是从django-cms2中找到的skins/templates派生出来的，以下是一些自定义修改

• 皮肤名称已从‘django’更改为‘semanticeditor’。这是必要的，如果我们希望在同一个页面上允许两个不同版本的WYMeditor，一个使用正常的WYMeditor + CMS控件，另一个使用完整的‘语义编辑器’控件，用于较长的内容。

• skin.js文件删除了‘classes’面板，因为这个面板不需要，并被动态元素替换。

• skins.css - 添加了额外的呈现控件样式

• 添加了一个名为“semantic”的WYMeditor插件。这实现了该应用的大部分客户端逻辑。

• 已更改editorwidget.html模板。特别是

  • 皮肤已更改为‘semanticeditor’

  • 添加了对wymeditor.semantic()的调用以设置插件。

• 创建了一个新的django小部件“SemanticEditor”，它继承自django-cms2中的django ‘WYMEditor’小部件。这是必要的，以便

  • 将WYMeditor ‘semantic’插件javascript文件添加到Media

  • 我们可以使用editorwdiget.html模板。

版本0.3

• 与django-cms 2.3和2.4的兼容性

• 按类别分组CSS类

• 按钮以在新标签页中打开编辑器

• UI改进

• 修复了导致语义插件在jQuery 1.4.2下完全失败的错别字

• 其他错误修复

版本0.2.1

• 修复了打包错误（没有模板或静态媒体）

版本0.2

• “内部行”和“内部列”命令

• 添加了按类别分组CSS类的能力

• 与Django 1.3和django-cms 2.1.3的兼容性

• 许多错误修复和改进

版本0.1

首次发布