wagtaildraftail 0.7.0

使用页面

首先，将 Draftail 字段添加到您的某些页面中。以下是一个示例

from wagtaildraftail.fields import DraftailTextField

class MyPage(Page):
    body = DraftailTextField(blank=True)

    panels = [
        FieldPanel('body')
    ]

然后，在模板中显示这些字段时，使用 richtext 过滤器。

{% load wagtailcore_tags %}

{% block content %}
    {{ page.body|richtext }}
{% endblock %}

使用 StreamField

以下是一个使用现成块的示例

from wagtaildraftail.blocks import DraftailTextBlock

class MyStructBlock(StructBlock):
    body = DraftailTextBlock()

配置

DraftailTextField 和 DraftailTextBlock 都接受一个字符串作为关键字参数 editor，用于字段级别的自定义。

Wagtail 将在设置中查找 WAGTAILADMIN_RICH_TEXT_EDITORS 常量，找到请求的编辑器，加载定义的部件，并将选项（如果已定义）传递给它。

WAGTAILADMIN_RICH_TEXT_EDITORS 中定义的每个编辑器都是一个字典，具有两个键： WIDGET（必需）和 OPTIONS（可选）。

• WIDGET 是一个必需的字符串，设置为要使用的部件 - 应始终设置为 wagtaildraftail.widgets.DraftailTextArea（或其子类）以使用 Draft.js 内容。

• OPTIONS 是一个字典，遵循 Draftail 配置选项 的格式。 - Draftail 选项中为 JavaScript 值的是在 client/wagtaildraftail.js 运行时进行活化的。

警告： blockTypes、inlineStyles 和 entityTypes 的 type 键不应更改。它定义了内容如何渲染，并作为 JSON 块保存在数据库中，这将使迁移变得非常痛苦。

警告：编辑器配置中定义的所有块/样式/实体都应配置为在 导出器配置 中正确渲染。

以下是一个示例配置文件。这个文件应位于您的 Django 设置中。

from draftjs_exporter.constants import BLOCK_TYPES, ENTITY_TYPES, INLINE_STYLES
from draftjs_exporter.defaults import BLOCK_MAP

TERMS_BLOCK_ID = 'TERMS_AND_CONDITIONS_TEXT'

DRAFT_BLOCK_TYPE_H3 = {'label': 'H3', 'type': BLOCK_TYPES.HEADER_THREE}
DRAFT_BLOCK_TYPE_H4 = {'label': 'H4', 'type': BLOCK_TYPES.HEADER_FOUR}
DRAFT_BLOCK_TYPE_UL = {'label': 'UL', 'type': BLOCK_TYPES.UNORDERED_LIST_ITEM, 'icon': 'icon-list-ul'}
DRAFT_BLOCK_TYPE_OL = {'label': 'OL', 'type': BLOCK_TYPES.ORDERED_LIST_ITEM, 'icon': 'icon-list-ol'}
DRAFT_BLOCK_TYPE_TERMS = {'label': 'T&Cs', 'type': TERMS_BLOCK_ID, 'element': 'div', 'class': 'legals'}

DRAFT_INLINE_STYLE_BOLD = {'label': 'Bold', 'type': INLINE_STYLES.BOLD, 'icon': 'icon-bold'}
DRAFT_INLINE_STYLE_ITALIC = {'label': 'Italic', 'type': INLINE_STYLES.ITALIC, 'icon': 'icon-italic'}

# It accepts a list of dicts with `label` and `value` keys (e.g. `{'label': 'Full width', 'value': 'fullwidth'}`)
# or a special `__all__` value which will be intercepted and will load all image formats known to Wagtail.
DRAFT_IMAGE_FORMATS = '__all__'

DRAFT_ENTITY_TYPE_IMAGE = {
    'label': 'Image',
    'type': ENTITY_TYPES.IMAGE,
    'icon': 'icon-image',
    'imageFormats': DRAFT_IMAGE_FORMATS,
    'source': 'ImageSource',
    'decorator': 'Image',
}
DRAFT_ENTITY_TYPE_EMBED = {
    'label': 'Embed',
    'type': ENTITY_TYPES.EMBED,
    'icon': 'icon-media',
    'source': 'EmbedSource',
    'decorator': 'Embed',
}
DRAFT_ENTITY_TYPE_LINK = {
    'label': 'Link',
    'type': ENTITY_TYPES.LINK,
    'icon': 'icon-link',
    'source': 'LinkSource',
    'decorator': 'Link',
}
DRAFT_ENTITY_TYPE_DOCUMENT = {
    'label': 'Document',
    'type': ENTITY_TYPES.DOCUMENT,
    'icon': 'icon-doc-full',
    'source': 'DocumentSource',
    'decorator': 'Document',
}

WAGTAILADMIN_RICH_TEXT_EDITORS = {
    'default_draftail': {
        'WIDGET': 'wagtaildraftail.widgets.DraftailTextArea',
        'OPTIONS': {
            'enableHorizontalRule': True,
            'enableLineBreak': False,
            'entityTypes': [
                DRAFT_ENTITY_TYPE_LINK,
                DRAFT_ENTITY_TYPE_DOCUMENT,
            ],
            'blockTypes': [
                DRAFT_BLOCK_TYPE_H3,
                DRAFT_BLOCK_TYPE_UL,
            ],
            'inlineStyles': [
                DRAFT_INLINE_STYLE_BOLD,
                DRAFT_INLINE_STYLE_ITALIC,
            ],
        }
    },

    'format_and_link': {
        'WIDGET': 'wagtaildraftail.widgets.DraftailTextArea',
        'OPTIONS': {
            'entityTypes': [
                DRAFT_ENTITY_TYPE_LINK,
            ],
            'inlineStyles': [
                DRAFT_INLINE_STYLE_BOLD,
                DRAFT_INLINE_STYLE_ITALIC,
            ],
        }
    },

    # Wagtail dependencies
    'default': {
        'WIDGET': 'wagtail.wagtailadmin.rich_text.HalloRichTextArea'
    },

    'custom': {
        'WIDGET': 'wagtail.tests.testapp.rich_text.CustomRichTextArea'
    },
}

DRAFT_EXPORTER_ENTITY_DECORATORS = {
    ENTITY_TYPES.LINK: 'wagtaildraftail.decorators.Link',
    ENTITY_TYPES.DOCUMENT: 'wagtaildraftail.decorators.Document',
    ENTITY_TYPES.IMAGE: 'wagtaildraftail.decorators.Image',
    ENTITY_TYPES.EMBED: 'wagtaildraftail.decorators.Embed',
    ENTITY_TYPES.HORIZONTAL_RULE: 'wagtaildraftail.decorators.HR',
}

DRAFT_EXPORTER_COMPOSITE_DECORATORS = [
    'wagtaildraftail.decorators.BR',
]

DRAFT_EXPORTER_BLOCK_MAP = dict(BLOCK_MAP, **{
    BLOCK_TYPES.UNORDERED_LIST_ITEM: {
        'element': 'li',
        'wrapper': 'ul',
        'wrapper_props': {'class': 'list-styled'},
    },
    BLOCK_TYPES.ORDERED_LIST_ITEM: {
        'element': 'li',
        'wrapper': 'ol',
        'wrapper_props': {'class': 'list-numbered'},
    },
    TERMS_BLOCK_ID: {
        'element': 'p',
        'props': {'class': 'legals'},
    },
})

创建块和内联样式

待办事项

创建实体

实体基本上需要 4 个元素

• 一个页面 装饰器。

• 一个编辑器 装饰器。

• 一个编辑器 源。

• 一个编辑器 策略。

装饰器定义了内容需要在网站页面上以及编辑器内如何显示，

• 对于页面，它们用 Python 中的 draftjs_exporter 定义。请参阅有关 draftjs_exporter README 的专用文档。

• 对于编辑器，它们用 JS/React 中的 draftail 定义。请参阅有关 Draftail README 的专用文档。

源定义用户将通过它选择要插入到编辑器中的实体的界面（通常是一个模态框）。

策略允许编辑器在加载时识别实体。策略是可选的，因为默认策略在大多数情况下都很好用。

源和策略都是用 JS/React 中的 draftail 定义的。请参阅有关 Draftail README 的专用文档。

要注册装饰器、源或策略到 wagtaildraftail，请使用相应的注册函数。

window.wagtailDraftail.registerDecorators({ LinkDecorator, ButtonDecorator });
window.wagtailDraftail.registerSources({ LinkSource });
window.wagtailDraftail.registerStrategies({ LinkStrategy });

注意：为了使 wagtailDraftail 和其注册函数在全局 window 命名空间中可用，请确保 wagtaildraftail 在任何其他尝试在 INSTALED_APPS 中注册实体的应用程序之前出现。

安装

需求： virtualenv、pyenv、twine

git clone git@github.com:springload/wagtaildraftail.git
cd wagtaildraftail/
virtualenv .venv
source ./.venv/bin/activate
make init
# Install all tested python versions
pyenv install 2.7.11 && pyenv install 3.3.6 && pyenv install 3.4.4 && pyenv install 3.5.1
pyenv global system 2.7.11 3.3.6 3.4.4 3.5.1

命令

make help            # See what commands are available.
make init            # Install dependencies and initialise for development.
make start           # Starts the development server and compilation tools.
make lint            # Lint the project.
make load-data       # Prepares the database for usage.
make test            # Test the project.
make test-coverage   # Run the tests while generating test coverage data.
make test-ci         # Continuous integration test suite.
make clean-pyc       # Remove Python file artifacts.
make dist            # Compile the JS and CSS for release.
make publish         # Publishes a new version to pypi.

调试

为了启动运行，

# Set up the development environment.
make init
# Start the development server.
make start
# If necessary, start the JS compilation watch
npm run start

在Makefile（Python）和package.json（JS）中都有可用的测试和linting任务。

更新测试数据

以下是一些有用的命令

# Create new migrations from changes to the project.
python tests/manage.py makemigrations
# "Reset" the database.
rm db.sqlite3
# Generate fixtures from DB data. Remember to clean them up so they do not overlap with data from migrations.
python tests/manage.py dumpdata > tests/fixtures/test_data.json

版本发布

• 为发布新版本创建一个新的分支。

• 更新CHANGELOG。

• 按照semver规范，更新wagtaildraftail/__init__.py和package.json中的版本号。

• 提交PR并合并。

• 在master分支上合并PR后，使用make publish（确认并输入您的密码）。

• 最后，前往GitHub并为新版本创建发布和标签。

• 完成！