ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add additional editor plugins for instrument WYSIWYG editor

This commit is contained in:
Ramon Wenger 2020-04-06 13:31:40 +02:00
parent 42960f531d
commit 2f6b66112c
3 changed files with 104 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client/src/pages/instrument.vue
View File

@ -2,15 +2,15 @@
<div class="instrument">
<h1 class="instrument__title">{{instrument.title}}</h1>
<content-component v-for="component in instrument.contents"
:key="component.id"
:component="component"
:root="instrument.slug"
:parent="instrument"
:bookmarks="instrument.bookmarks"
:notes="instrument.notes"
>
</content-component>
<content-component v-for="component in instrument.contents"
:key="component.id"
:component="component"
:root="instrument.slug"
:parent="instrument"
:bookmarks="instrument.bookmarks"
:notes="instrument.notes"
>
</content-component>
</div>
</template>
@ -59,19 +59,32 @@
& p {
margin-bottom: 40px;
}
& ul {
padding-left: 25px;
}
& p + ul {
margin-top: -30px;
}
& li {
list-style: disc;
line-height: 1.5;
}
& b {
font-weight: 600;
}
.brand {
color: $color-brand;
font-weight: 600;
}
.secondary {
color: $color-accent-2;
font-weight: 600;
}
}
}

4
server/books/blocks.py
View File

@ -4,8 +4,8 @@ from wagtail.snippets.blocks import SnippetChooserBlock
from assignments.models import Assignment
from surveys.models import Survey
DEFAULT_RICH_TEXT_FEATURES = ['ul']
INSTRUMENTS_RICH_TEXT_FEATURES = ['bold', 'ul']
DEFAULT_RICH_TEXT_FEATURES = ['ul', ]
INSTRUMENTS_RICH_TEXT_FEATURES = ['bold', 'ul', 'brand', 'secondary']
# link_block

80
server/core/wagtail_hooks.py Normal file
View File

@ -0,0 +1,80 @@
import wagtail.admin.rich_text.editors.draftail.features as draftail_features
from wagtail.admin.rich_text.converters.html_to_contentstate import InlineStyleElementHandler
from wagtail.core import hooks
# 1. Use the register_rich_text_features hook.
@hooks.register('register_rich_text_features')
def register_brand_feature(features):
"""
Registering the feature, which uses the `BRAND` Draft.js inline style type,
and is stored as HTML with a `<span class="brand">` tag.
"""
feature_name = 'brand'
type_ = 'BRAND'
# 2. Configure how Draftail handles the feature in its toolbar.
control = {
'type': type_,
'label': 'Grün',
'description': 'Grün',
'style': {
'color': '#17A887',
'font-weight': '600'
},
}
# 3. Call register_editor_plugin to register the configuration for Draftail.
features.register_editor_plugin(
'draftail', feature_name, draftail_features.InlineStyleFeature(control)
)
# 4.configure the content transform from the DB to the editor and back.
db_conversion = {
'from_database_format': {'span[class="brand"]': InlineStyleElementHandler(type_)},
'to_database_format': {'style_map': {type_: 'span class="brand""'}},
}
# 5. Call register_converter_rule to register the content transformation conversion.
features.register_converter_rule('contentstate', feature_name, db_conversion)
# 6. (optional) Add the feature to the default features list to make it available
# on rich text fields that do not specify an explicit 'features' list
features.default_features.append(feature_name)
@hooks.register('register_rich_text_features')
def register_secondary_feature(features):
"""
Registering the feature, which uses the `SECONDARY` Draft.js inline style type,
and is stored as HTML with a `<span class="secondary">` tag.
"""
feature_name = 'secondary'
type_ = 'SECONDARY'
# 2. Configure how Draftail handles the feature in its toolbar.
control = {
'type': type_,
'label': 'Blau',
'description': 'Blau',
'style': {
'color': '#078CC6',
'font-weight': '600'
},
}
# 3. Call register_editor_plugin to register the configuration for Draftail.
features.register_editor_plugin(
'draftail', feature_name, draftail_features.InlineStyleFeature(control)
)
# 4.configure the content transform from the DB to the editor and back.
db_conversion = {
'from_database_format': {'span[class="secondary"]': InlineStyleElementHandler(type_)},
'to_database_format': {'style_map': {type_: 'span class="secondary"'}},
}
# 5. Call register_converter_rule to register the content transformation conversion.
features.register_converter_rule('contentstate', feature_name, db_conversion)
# 6. (optional) Add the feature to the default features list to make it available
# on rich text fields that do not specify an explicit 'features' list
features.default_features.append(feature_name)