Is there a way to view/edit source of richtext in Wagtail? - wagtail

edit html option on Stackoverflow
Does wagtail CMS support the ability to edit rich text html code as seen in the screenshot?

No, editing HTML source is not available from Wagtail's built-in Draftail rich text editor. This is because its internal representation of the edited text is not HTML, but its own data structure where entities like links and inline styles are tracked alongside the text, rather than part of the text itself. There isn't a direct correspondence between things that can be represented in this data structure, and things that can be written as HTML.
(Alternative rich text editors might be available as third-party packages that do offer HTML source editing, but I'm not aware of the status of whether they're actively maintained.)
This might seem like a needless restriction, but there are good technical reasons behind it:
It means that images and page links (and anything else that references other objects managed by Wagtail) can be stored as database IDs instead of URLs, so that if those objects change URL as a result of user edits, it won't result in a broken link.
When pasting content from a Word document, there will often be unwanted formatting embedded in it, such as setting the font to Times New Roman. Having a data format that distinguishes between the meaningful 'structural' aspects of the content (headings, links, bold / italic spans...) and the cosmetic ones (style attributes) ensures that these are stripped out.
Some things we want to represent in rich text, such as Youtube embeds, don't have known predictable HTML representations. It's useful for the data format to be able to store these as "a video embed for URL X" rather than "an <iframe> tag with some obscure collection of attributes" - if it was stored as the latter, you'd run into issues of how far a user can edit the HTML before it ceases to be recognisable as a Youtube embed.

Related

Maintain semantic Information in WPF FlowDocument

How can i add semantic information to e.g. Run and Paragraph Elements e.g. to mark s.th as headlines or code?
This tagging should also survive save and reload of documents in preferable RTF.
I finally decided to use The Tag Attribute and to Store The document in xaml instead of rtf

Customizing images in richtext fields

I've added a caption field to a custom image model with the help of this and this. How do I show that caption field in images that are in a richtext field?
This is possible by defining a custom image format - in this case, you'd need to create a subclass of Format that overrides the image_to_html method. There's an example of this here: https://github.com/torchbox/verdant-rca/blob/d9ede994dbd1ef68eaa159ec930fd89a351c1329/django-verdant/rca/image_formats.py#L4-L25
However, I'd strongly recommend using StreamField for this kind of mixed content instead. Images with captions are at the upper end of what's practical within a rich text field, and the behaviour can be a bit glitchy (for example, it's difficult to insert text after an image that's at the end of the field, or before an image at the beginning). It's also not great for separation of content and presentation. With StreamField, your text and image are represented as distinct objects in the admin, and within the template you have full control over the HTML used for them.

Multi-Language resources for wpf user control

I am building a wpf user control to provide navigation facilities for database records.
The control is provided with a set of default images (as illustrated above) which the end user can change is they so wish. In addition the end user can choose to dispense with images altogether. In the event that they select that option (for either one or all of the buttons that comprise the control) I have provided some default fallback text.
This text can also be overwritten by the end user if they so wish, but the default text at least provides them with some basic text that essentially conveys what the button does and saves them having to add text every time they use the control (default tooltip text is also provided).
Now if you happen to speak English, or your intended target audience is English this should work, but it doesn't really cater as is for languages other than English. This I would now like to change.
What reading I've done on the subject of multi-lingual resources and wpf seems to assume that one is talking about the overall application rather than a standalone user control that might be used in different language environments.
I had a talk with a creator of controls who said that making this multilingual would probably involve building several copies of the control for each intended language.
In the light of this I have two questions. Was the gentleman I spoke to correct, should I in fact build multiple copies of this for each language, of is there a way to have multi-language resources within the same copy of the user control?
If the latter is possible what is the correct way to go about achieving this. We will be dealing in total with default texts for eleven buttons (which I will need to be able to refer to in code within the control incidentally) and default texts for thirteen tooltips (which again will need to be able to be referred to within the code of the control).
Take a look on WPF localization extension.
Here's a pretty good documentation for it: link.
You can define your controls' localizable properties, which store their localized values in the satellite resource assemblies.
In your xaml code, define the localized properties with xaml extensions syntax:
<Button Content="{lex:Loc Test}" />
Then, create resource files for each culture your application will support and give them the same name as the main assembly plus the general or specific culture code (e.g. en-US, de, de-AT, ...) before the .resx ending yielding: AssemblyName.CultureCode.resx.
Now, populate the resource files with your localized properties key/value pairs and build the project.
You're done!

Getting rid of autogenerated html

When I create a Global Data Type for localizable content in user controls I run into the problem that C1 always surrounds plain text with
<p></p>
I don't want that if the content is just meant to be inside a link for example, but still has to contain html. Even if I use the code view of the Visual Editor, C1 will readd the tags e.h. if I translate the data.
Is there a way to stop C1 from automagically adding html to my string data when using the visual editor?
I suggest you leave the editor as it is and keep on storing your html as valid xhtml documents, and instead handle this when rendering. Not having custom features/design permeate the way you store data could also be a plus in the long run.
One way to achieve this is with XSLT as described in this article "How can I modify the HTML from the Visual Content editor?" - you can also do this with C#.
There has been a few reports of this undesired behavior, but unfortunately its by design. You could argue if ts Composite C1's fault or the underlying TinyMCE editor, but maybe you can tweak the configuration of it. Or wrap the functions that output the content with a xslt-template that will strip out the p's.
See these discussions for further explanations.
TinyMCE Config Change - Force P False
Visual editor adding p tag automatically

UX: How to present a directory/file structure with videos?

What would be a good user experience to present this? I have:
A folder/directory structure containing mostly media files that need to be presented in a Silverlight app. Future versions may be expanded to allow some non-media files to be presented as well. The typical use case (that I'm tailoring the solution for) is video.
The videos (or pictures) have thumbnails. Videos can potentially have multiple thumbnails (i.e. if you hover over them you can see thumbs from multiple points in the video... this may make the screen appear too "busy" though).
There is a name, and possibly a little metadata associated with each. Audio files tend to have a lot of relevant metadata. I've never used metadata for video files and find the metadata-based indexing of videos that Winamp et. al. do to be fairly annoying. There are not comments or descriptions.
It is possible to sort the lists, and they don't necessarily need to be present in the hierarchical structure (i.e. search folders or folders based on particular attributes are possible -- although would it really be useful to allow a user to have a folder for all videos longer than 20 minutes?).
Thumbnails will be retrieved from the server as needed (when they are scolled into view)
Here are some random ideas:
A one-panel list-like view with fairly small names and icons based on file type (so, basically an explorer-like interface). Possibly columns, though the disparate media types makes sorting on columns fairly useless. To get more info and a thumbnail, the user hovers over an item, which pops up details and a thumbnail if available. Single-click advances.
A two-panel view. The left has the same structure as above. A single click selects an item and displays its details in the right pane. A double-click selects an item or opens a folder.
Specific modes/filters. First, the user selects a media mode (i.e. video or audio). In a video mode, the items in the lists become larger and a more "YouTube-like" view is displayed. Clicking on a video brings the user to a separate screen containing the content. Alternatively, videos can be displayed tiled in this mode. The audio mode has a playlist editor, play/pause/stop controls, and works more like a traditional media player with drag-n-drop, etc. Picture mode allows easy access to slideshow viewing. The audio mode will allow sorting by metadata (artist/album/etc.) rather than folder structure.
(Possibly in addition to one of the above) a "quick search" feature a la Google Desktop/Windows Vista+/ etc. Typing a name will pop up a list of results from anywhere in the index matching a substring there. Pressing enter will automatically play/show the most relevant file.
Any ideas? I want the focus here to be simplicity and ease-of-use, NOT features. iTunes, real player, even YouTube, etc. tend to like to be at the forefront of user attention. I'm looking for simple and streamlined.
I would argue that the simplest approach would be to use the design most are familiar with: a treeview on the left for folders with a collection of thumbnails for the current folder on the right. In addition for video, you could make the thumbnail play (either the video in its entirety or a small representative clip) when the user selects it.
There's nothing wrong with leveraging design that already works. It makes your application more approachable for new users and thus increases your attach rate.
Look at Infragistics' Quince app for more UI Patterns. In addition, there is Jennifer Tidwell's book "Designing interfaces" that provides a great reference.

Resources