How to insert dynamic gist code in the middle of posts generated by Wagtail (Django Cms)?
I searched the documentation of wagtail but did not find anything that could help me automatically insert the github codes.
Gist is one of the built in content types supported by Wagtail's embedded content feature. Within a rich text field, editors can use the 'media' toolbar icon to enter the URL to the Gist page, and it will appear embedded in the rich text content. Within a StreamField, the developer can EmbedBlock to the set of available block types, and the editor will then be able to enter the Gist URL into that field.
Related
The Wagtail example of using entities as given in this page of documentation isn't working for me. I am following the third example of using Entities which is supposed to create a button for stock price but no button is appearing for me in the rich text field in the admin editor. I have created a minimum reproducible example which demonstrates just this problem. https://github.com/kiwiheretic/stockentity. I am using Wagtail 4.1.1 which I understand is the latest version.
Can anyone help me see what I have missed and why the button doesn't appear as expected?
This or a similar question was asked in the Wagtail Slack. To get the button to appear, it either needs to be included in the features list when you create a new RichTextField OR you need to add it to the default configuration using the WAGTAILADMIN_RICH_TEXT_EDITORS setting.
This is a very generic question so I don't have any code to show for it yet however I am wondering if anyone can give me a minimal example or guidance on how to use the draftail editor in Wagtail, but not in the admin, but on a public facing page. I haven't managed to find any information on that in the Wagtail documentation, just pages on RichText internals about how to customise the editor in the admin.
I want to develop a blog application with Django backend and React frontend. I shall be using Postgresql.
I want to use a rich text editor like Quill to write the blog article. My questions:
I heard that article written in a text editor needs to be converted to HTML before saving in the database. If so, how do I do this in Django Rest Framework?
How do I present the article keeping the same style and formatting in the frontend from the database?
Say, I include multiple photos in the article. How do I save all the photos in the database? i.e. what should be the schema then?
I want to have my doubts clear before I jump in.
I'm also doing the same thing at the moment. For your answers :
In DRF, the simplest way to post the data is by using Textfield in your model. Rich text field (with Tags) will be stored in the Postgres. In the Admin page or the DRF API you'll see something like this
Then, to re-render it to the front end, you can use any HTML Parser library. for example I'm using "react-html-parser" that simply convert the rich text into the defined styling.
As for Image, this is a bit tricky, and I havent done this part myself but what i could think of right now is you would create another model & end points to store the images.
when sending the post request to the django, you would convert the base file path/url from the front end to back end. example :
original > http://localhost:3000/image/efewf23r.jpg
new (django) > http://localhost:8000/media/img/img_model/efewf23r.jpg
then do a second post request to the image itself and make sure django would rename the the file as per what we set above.
Let me know if you found a better solution.
It's been long since I posted this question. After that, I have gained enough working knowledge to make Quill.js (the rich text editor I'm using) work with React.JS, or, in my case Next.JS. So, this is focused on Quill.js only. The Quill npm package more specific to ReactJS is react-quill. I am presenting it as beginner friendly as possible.
A built-in function is provided with Quill: editor.getHTML(). editor is the current editor instance, where one types the content. This method generates the innerHtml of the content one prepares in the editor.
To save it to the databse, simply POST it to your back-end. But you must sanitize this innerHtml before passing it to the database. Can't say about server-side but I had to do this sanitization on the client-side. One good package is DOMPurify. You need to save this to the database if you want to present it in the same manner as it was typed in the browser.
The first point also provides the solution to my 2nd question. But one important point: The content one writes in Quill editor is also available as a JSON like format called quill-delta. You can get the delta with the function editor.getContents(). You need to POST it to the database if you want to edit the content in a later time.
To edit, you need to get this delta from the database and then initialize Quill editor with this delta in the value attribute.
For example, the text in orange is the delta representation of the text in the editor:
codepen source.
There is another function editor.getText() which extracts all the text from the editor.
Photos. Generally in Quill, you simply put the photo in the editor and Quill generates a base64 encoded delta for the photo. It's this easy. You don't need to worry about separate image fields.
In wagtail RichtextField's editor, I can upload and insert an image without problem, however what if I want to insert an image from an external URL, what can I do? current Draftail editor doesn't provide such an option.
I tried the following options already:
"embed" button in RichtextField edtior. obviously it doesn't work for most external image URL, maybe it would work for some selected sources with oEmbed. Most of the time it gives error "Cannot find an embed for this URL."
demo site provided by Michael Yin
https://blog.michaelyin.info/wagtail-blog-demo-now-available/. The RichtextField editor has exactly the same buttons, and "embed" button gives exactly the same error. So this can rule out problem of my own configurare
draftail editor at https://www.draftail.org/ actually has a button to insert image by external URL, and the demo works very well.
so my question: why did Wagtail remove the support to insert external image URL, and how can I insert an image by URL in RichtextField editor?
I'm using Django 1.10.5 with Wagtail 1.8. I just noticed there's no
'generate url' in the Images section. Was it removed?
And, when I go to create a new entry, there aren't any 'justification'
buttons in the edit. Were those removed, also?
Neither of those features have been removed from Wagtail. The 'generate URL' link is an optional feature which can be enabled as described here: http://docs.wagtail.io/en/v1.8/advanced_topics/images/image_serve_view.html
The only thing I can think of in Wagtail that could be described as a 'justification' button is the set of options for choosing image format (which default to left, right and full-width). This is still present in Wagtail (although note that it only appears when inserting an image into a rich text area, not when the image is an individual field). The Wagtail editing interface intentionally doesn't provide text justification options, because page layout is more correctly handled in the template, rather than inside page content.