| 13 Aug 2019 |
 Hanz van Aardt | In reply to@_slack_wagtailcms_UBVEB3T0T:matrix.org
Hi coenvanderkamp - thank you for the fiddle. It helps. I have modified it a bit to demonstrate the inline effect we are trying to achieve but failing to get right. See https://jsfiddle.net/utz2bkvf/1/ Float right and Float left is not the issue ... the issue we are struggling with is have an image embedded inline in the text. The issue is that the p element closes the moment you add an image. If the p element did not close this would not have been an issue I think. | 03:58:15 |
 coenvanderkamp | In reply to@_slack_wagtailcms_UBVEB3T0T:matrix.org
Float right and Float left is not the issue ... the issue we are struggling with is have an image embedded inline in the text. The issue is that the p element closes the moment you add an image. If the p element did not close this would not have been an issue I think. Ah, yes, the closing. Sorry, I don't know what is causing that or how to handle that. | 06:48:32 |
|  harris changed their profile picture. | 13:42:07 |
|  thp44 joined the room. | 14:27:27 |
| thp44 | Would it be possible to add an “edit in html” button? 😉 | 14:33:52 |
| coenvanderkamp | 'Edit in json' should be possible! | 14:35:02 |
|  flipperpa changed their profile picture. | 22:10:18 |
| 14 Aug 2019 |
|  alejandro changed their profile picture. | 14:05:02 |
| 15 Aug 2019 |
|  Arthur changed their profile picture. | 09:18:32 |
|  sonny changed their profile picture. | 09:55:22 |
|  Thibaud changed their profile picture. | 14:15:11 |
| Thibaud | New Draftail release, & blog post: https://www.draftail.org/blog/2019/08/15/draftail-v1-3-0-community-improvements-beyond-wagtail
TL;DR; – nothing new for Wagtail in here 😅 but hopefully useful improvements for people using the editor elsewhere | 14:19:11 |
| Thibaud | I’m just back from holidays, I see there’s been lots of activity here, will try my best to answer all of the messages tomorrow or early next week | 14:19:42 |
| flipperpa | Awesome to see that Draftail is getting adopted outside of our ecosystem - great work, Thibaud! 🙂 | 16:00:00 |
|  Eric Sherman joined the room. | 16:29:29 |
| Eric Sherman | interested in talking about tables! | 16:29:29 |
 KalobTaulien | In reply to@_slack_wagtailcms_UJHDYNXJP:matrix.org
interested in talking about tables! https://media.giphy.com/media/X83Y7r03T6uty/giphy.gif | 20:06:22 |
| 21 Aug 2019 |
| Eric Sherman changed their profile picture. | 23:03:54 |
| 22 Aug 2019 |
| flipperpa changed their profile picture. | 01:30:51 |
|  sharpertool changed their profile picture. | 10:55:11 |
|  mattwestcott changed their profile picture. | 14:23:36 |
| 23 Aug 2019 |
|  Jonathan Liuti changed their profile picture. | 10:32:59 |
|  Jason Dilworth changed their profile picture. | 11:31:06 |
| harris changed their profile picture. | 16:42:50 |
| KalobTaulien changed their profile picture. | 17:22:24 |
| 25 Aug 2019 |
|  @faabler:matrix.org joined the room. | 04:21:09 |
| @faabler:matrix.org left the room. | 04:21:18 |
| coenvanderkamp changed their profile picture. | 09:02:29 |
| 26 Aug 2019 |
|  Martin Kimmig joined the room. | 06:58:28 |
| Martin Kimmig | Hello together,
We are trying to support fontawesomes Icons for the RichtextEditor(Draftail). So if an editor enters for example "fa-lightbulb" as content, the output
will be the lightbulb-Icon on the content page. This works with following code plus Javascript-manipulation.
hooks.register('register_rich_text_features')
def register_mark_feature(features):
feature_name = 'fontawesome_icon'
type_ = 'MARK'
tag = 'i'
# configure how Draftail handles the feature in its toolbar.
control = {
'type': type_,
'label': 'FontAwesome',
'description': 'Mark as FontAwesome Icon',
'style': {'background': 'lightblue'},
}
...
# configure the content transform from the DB to the editor and back.
db_conversion = {
'from_database_format': {
'i[class="rtfa fa"]':
InlineStyleElementHandler(type_)
},
'to_database_format': {
'style_map': {type_: 'i class="rtfa fa"'}
},
}
...
JS-Manipulation:
window.onload = function () {
// get all elements that were marked as font awesome icons in richtext
let richtTextFontAwesomeIcons = document.querySelectorAll(".rtfa");
// make them display the icon
richtTextFontAwesomeIcons.forEach(rtfa => {
rtfa.classList.add(rtfa.textContent);
rtfa.textContent = '';
});
};
A prettier solution would be to directly manipulate the input string inside the register_mark_feature method.
Do anybody of you know, whether there is a way to access the input string to use it in db_conversion?
Thank you in advance for any help! | 06:58:29 |
