I have added superscript to the Draftail editor in Wagtail following these instructions Adding superscript to Draftail in Wagtail 2.0
It works and renders with the "sup" tag on front end, but does not display as superscript on backend. I've tried adding 'style': 'vertical-align: super' in the feature config, but this does not help. Any suggestions?
#hooks.register('register_rich_text_features')
def register_superscript_feature(features):
feature_name = 'superscript'
type_ = 'SUPERSCRIPT'
tag = 'sup'
# Configure how Draftail handles the feature in its toolbar.
control = {
'type': type_,
'label': 'x²',
'description': 'Superscript',
'style': 'vertical-align: super',
}
# Call register_editor_plugin to register the configuration for Draftail.
features.register_editor_plugin(
'draftail', feature_name, draftail_features.InlineStyleFeature(control)
)
# Configure the content transform from the DB to the editor and back.
db_conversion = {
'from_database_format': {tag: InlineStyleElementHandler(type_)},
'to_database_format': {'style_map': {type_: tag}},
}
# Call register_converter_rule to register the content transformation conversion.
features.register_converter_rule('contentstate', feature_name, db_conversion)
I would like for it to display as superscript in the editor as well.
Related
I've been using Wagtail to create a website with additional text annotations. The user flow is that there is some highlighted text in a paragraph, which when clicked shows an annotation off to one side. The expected HTML result is:
A sentence with <span class='link'>A link<span class='hidden-text'>Hidden text</span></span>
I would like to achieve this with a single item on the draftail menu, with a UI similar to the URL creator- the user selects the text, and adds the annotation text.
I have followed the instructions on https://docs.wagtail.io/en/stable/advanced_topics/customisation/extending_draftail.html to create a new inline style which produces the link, however I can't then add the hidden-text:
# 1. Use the register_rich_text_features hook.
#hooks.register('register_rich_text_features')
def register_mark_feature(features):
"""
Registering the `mark` feature, which uses the `MARK` Draft.js inline style type,
and is stored as HTML with a `<mark>` tag.
"""
feature_name = 'mark'
type_ = 'SAMPLE'
tag = 'sample'
# 2. Configure how Draftail handles the feature in its toolbar.
control = {
'type': type_,
'label': '?',
'description': 'Hint link',
}
# 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': {tag: InlineStyleElementHandler(type_)},
'to_database_format': {'style_map': {type_: tag}},
}
# 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('mark')
to get What you want, easiest way is to create your own Template tags filters, create your own markdown replacements, let's say, in the rich text you assigned the link to part of your paragraph like this "Click here this is a hidden text" and then you put [ht] right before the "this is a hidden text" and a[th] right after that targeted hidden text,then in the template use self.field_name|replace:"[ht]"|replace:"[th]"
in template tag file (for example myapp/templatetags/my_richtext.py):
from django import template
from wagtail.images.models import Image
from django.utils.safestring import mark_safe
register = template.Library()
#register.filter(needs_autoescape=True)
def replace(value, arg, autoescape=True):
if arg == "[ht]": result = value.replace(arg, "<span class='hidden'>")
elif arg == "[th]": result = value.replace(arg, "</span>")
return mark_safe(result)
settings.py
SUMMERNOTE_CONFIG = {
'attachment_upload_to': my_custom_upload_to_func(),
'attachment_storage_class': 'my.custom.storage.class.name',
'attachment_model': 'my.custom.attachment.model',
}
as you know django-summernote is a rich text editor field used in django.
but when you implement that plugin to your app you get only minimum features and default options. when you add SUMMERNOTE_CONFIG you can customize your rich text field and add more features in it.
for example:
In your question you add some keys and values in 'SUMMERNOTE_CONFIG' it is about adding attachments. attachment_upload_to is path to the folder which needs to save attachments. attachment_model is to create a model for your attachments
eg:
# my/custom/attachment.py
from django_summernote import AbstractAttachment
class Attachment(django_summernote.AbstractAttachment):
pass
# django_project/settings.py
SUMMERNOTE_CONFIG = {
'attachment_upload_to': '/path/to/attachment_folder',
'attachment_model': 'my.custom.attachment.Attachment',
}
I have an action in my controller to create a new page which is one of my models.
Afterwards, I want to clear out the form and transition to the new page.
Here is my code:
App.ApplicationController = Ember.ObjectController.extend
newSlug: (->
# some function
).property('newTitle')
newMenuName: # some property
actions:
addNewPage: ->
# Get the site
site = #get('model')
# Get all the pages associated with the site
pages = site.get('pages')
# ...
# snipped a bunch out to save space
# ...
# Create a new page passing in our title, slug and menu_name
page = pages.createRecord({title: title, slug: slug, menu_name: menu_name, menu_1: menu_1, menu_2: menu_2, menu_1_order: menu_1_order, menu_2_order: menu_2_order})
page.save().then(onSuccess, onError)
onSuccess = (page) ->
page = this.store.find('page', slug)
console.log('Slug: ' + slug + ' ' + page.slug)
#set('newTitle', '')
#set('newSlug', '')
#set('newMenuName', '')
$('#addPageModal').foundation('reveal', 'close')
#transitionToRoute('page', page)
But I'm getting the error that this has no method set. I have even tried using self = this but it gives me the same error.
Any thoughts?
BTW, in case you're wondering, inside onSuccess, page is not defined, so I have to look it up again. I thought a promise was supposed to return the data sent back from the API.
EDIT:
I must look like a total imbecile, but once again, right after posting a question here, I find (part) of the answer myself. Turns out in CoffeeScript (so far I'm not a big fan of it in combination with Ember.js) I needed the => so my callback function becomes:
onSuccess = (page) =>
page = this.store.find('page', slug)
console.log('Slug: ' + slug + ' ' + page.slug)
#set('newTitle', '')
#set('newSlug', '')
#set('newMenuName', '')
$('#addPageModal').foundation('reveal', 'close')
#transitionToRoute('page', page)
However, page is still not defined. Not sure what to do about that.
EDIT:
And the correct answer is....
App.ApplicationController = Ember.ObjectController.extend
newSlug: (->
# some function
).property('newTitle')
newMenuName: # some property
actions:
addNewPage: ->
# Get the site
site = #get('model')
# Get all the pages associated with the site
pages = site.get('pages')
# ...
# snipped a bunch out to save space
# ...
onSuccess = (page) ->
#set('newTitle', '')
#set('newSlug', '')
#set('newMenuName', '')
$('#addPageModal').foundation('reveal', 'close')
#transitionToRoute('page', page.get('slug'))
# And just for completeness
onError = (page) =>
# Do something
# Create a new page passing in our title, slug, menu_name, etc.
page = pages.createRecord({title: title, slug: slug, menu_name: menu_name, menu_1: menu_1, menu_2: menu_2, menu_1_order: menu_1_order, menu_2_order: menu_2_order})
page.save().then(onSuccess, onError)
I have a form that displays, and when i click the submit button it logs the values to the console.
How can i persist the settings so i can access them elsewhere in the application and the form is prepopulated when i return to the form screen?
I have my form set up like this
class ChimeScreen < FormotionScreen
title "Chime"
def on_submit(_form)
data = _form.render
# settings.enable = data[:enable]
# settings.alarm_time = data[:alarm_time]
PM.logger.debug data[:alarm_time]
open BrowseScreen
end
def table_data
{
...
}
end
Formotion allows persistent data by setting the persist_as value on the form.
See example here: https://github.com/clayallsopp/formotion/tree/master/examples/Persistence
You can then retrieve this form data as a hash by looking into
App::Persistence["FORMOTION_#{your_symbol_persisting_as_here}"]
OK, i think i was expecting something magical to set up there, when actually it's just straight forward value setting.
def on_submit(_form)
data = _form.render
#defaults = NSUserDefaults.standardUserDefaults
unless data.nil?
#defaults["alarm_time"] = data[:alarm_time]
#defaults["alarm_enabled"] = data[:alarm_enabled]
end
open BrowseScreen
end
and then set the value for each form field...
def table_data
#defaults = NSUserDefaults.standardUserDefaults
{
sections: [{
title: "Set Daily Reminder",
rows: [{
title: "Enable",
key: :alarm_enabled,
type: :switch,
value: #defaults["alarm_enabled"]
},
...etc
I'm using django-admin-tools 0.4.
Following the docs here so that I can get a 3 column layout.
I have managed to get the page to space correctly for 3 columns but the Modules can't move over to the 3rd column.
I can only drag from the left column to the middle but not right.
How can I get the modules to move between the 3 columns?
My dashboard.py can be viewed here.
I've attached a screenshot to show what result I have.
The main issue was that admin_tools_dashboard_preferences needs to be truncated(almost for every change being made to the dashboard.)
Also the first snippet of code on the documentation page didn't even work for me. I took snippets from other parts of the docs and they seemed to work no problems.
In the end my example dashboard looks something like this.
Remember to truncate your preferences.
class MyDashboard(Dashboard):
columns = 3
def __init__(self, **kwargs):
Dashboard.__init__(self, **kwargs)
# will only list the django.contrib.auth models
self.children += [
modules.ModelList('Authentication', ['django.contrib.auth.*',])
]
self.children.append(modules.Group(
title="My group",
display="tabs",
children=[
modules.AppList(
title='Administration',
models=('django.contrib.*',)
),
modules.AppList(
title='Applications',
exclude=('django.contrib.*',)
)
]
))
self.children.append(modules.LinkList(
layout='inline',
children=(
{
'title': 'Python website',
'url': 'http://www.python.org',
'external': True,
'description': 'Python programming language rocks !',
},
['Django website', 'http://www.djangoproject.com', True],
['Some internal link', '/some/internal/link/'],
)
))