Using Quill Editor on a form input in Django. - django

I want to use Quill Editor on a form input in Django.
From the examples in Quill playground I see that always the container is a div.
How can I make it work with a <textarea> instead of a div, and the text to remain in textarea, to work when I submit the form by Django;
I know there is a django-quill package, but lastest commit was done in 2015, and is reported not working with new Django versions, beside I want to do it more custom.

Quill is working inside a contenteditable div. If you want to make it "look like" a textarea this should be easy using css.
But if you're using Quill, this might be to use rich text, like bold, italic, bullets... And that rich content cannot live inside a textarea that just handles plain text (no text-formatting). That's why its has to stay inside a contenteditabe div.
Your form should, on submit, look for this div content and send it to your backend (either in pure js, or by copy-pasting the html content inside a hidden textarea this time) in html format.

Related

Django - safely render HTML in template

I am building a django web application where the user can submit text via a tinymce editor.
For that task I use the django-tinymce extension.
The question:
Is it secure to render the HTML in the template using the safe filter like so ? :
{{ richtext | safe }}
If not, how can it be made safe ?
If the html is coming from a reliable source, such as yourself, then it's (most probably) safe. But if you're allowing your site's users to submit their own html markup, then it's not safe.
But sometimes it is necessary to display html markup in django's templates and there's no choice but to use the safe filter. In those cases, the solution is to "sanitize" the html code.
"Sanitizing" means you keep only the safe html tags in the data and remove all the unsafe or unwanted tags (like script or style tags).
For sanitizing the data, you can use the bleach library.
Here's an example (taken from docs):
import bleach
bleach.clean('an <script>evil()</script> example')
# Output -> u'an <script>evil()</script> example'
There's also django app for this library: django-bleach.

Allow formatting of text in django form (Like the text editor on this site)?

With the basic textfield on django, the user can indent, and that's it. I'd like to allow centering of text, bold, italics, lists, etc. I messed with TinyMCE, but unless there's something I'm missing, it outputs html every time. Am I messing up TinyMCE, or should I take a different route?
If you are sure that your variable is safe (doesn't contains harmful HTML code) then you can mark it as safe. This will render the text without escaping HTML tags.
{{ variable|safe }}

How to highlight code on a webpage when you’re using Markdown

I want to use highlighted.js also I have grappelli and tinymce. I want to add highlighted.js but I have markdown editor.
How can I add highlighted.js while I am using markdown editor?
HTML is valid markdown, you should simply insert the link tag as you would with HTML.

Customized Rich Text Editor in Sitecore to generate BBCode tags instead of HTML

I am currently creating a mobile site using Sitecore, where I cannot use HTML as markup instead need to use BML as markup language for mobile. Please let me know the following in this regard:
We have a field called Description and its of type RICH TEXT. Here we cannot use the normal Rich Text Editor given by the Sitecore as it generates HTML. So can anyone tell me if I can create a customized RICH TEXT Editor with a button Say "Mobile Bold" and which should generate tags for mobile instead of normal HTML <b></b> tags .
As you all know we can change the RICH TEXT Editor from Default to FULL by setting the source attribute of the field to /sitecore/system/Settings/Html Editor Profiles/Rich Text Full. So in the similar way can I create one more item in the Core DB as /sitecore/system/Settings/Html Editor Profiles/MobileRichTextFull and include customized buttons to it so as to generate BML tags as described above. If this is possible let me know what are all the settings need to be done and steps to be followed for the same.
do you want the users to edit BML directly, or are you able to transform HTML to BML?
For the latter, you'd better solve this in the presentation layer/pipeline.
HTML Agility Pack will be your friend when going for this last solution.
Otherwise, look at Teleriks resources about the editor.

Importing HTML into TinyMCE using ColdFusion

Hey everyone, I would appreciate a pointing in the right direction with the problem I'm having. In short, I'm working on an application that will create PDFs using TinyMCE and ColdFusion 8. I have the ability to create a PDF by just entering in text, pictures, etc. However, I want to be able to import an html template and insert it into the TinyMCE .
Basically, I have a file directory code snippet that lets me browse through my 'HTMLTemplates' folder, and am able to select an HTML document. Now, I want to be able to take all the code from that selected HTML document and insert it into my TinyMCE box. Any tips on how I might do this, maybe?
Thanks!
If I understood you correctly, you already have a TinyMCE plugin which pops up a window and allows you to browse the certain directory using existing cfm page which you render within the popup window. Right?
If not, you should start with this. Not sure how easy it is done in current version, but in the older TinyMCE I've created the custom upload plugin (needed to track the site security permissions for current user) pretty quickly.
Next, I can see two quick ways to pass the server file contents to the client-side:
Make it available via HTTP so you can make the GET request and read contents into the variable.
Output it on the page using CF (say, on form submit when file selected) and grab using JavaScript.
I'd personally tried the second option. After you grab the text into the variable you can put it into the TinyMCE using it's API.
It can be as simple as output escaped text into the hidden div with known ID and read it using DOM operations (assuming that there is cfoutput around):
<div id="myTemplate">#HTMLEditFormat(myFileContents)#</div>
Also you can output the text directly into the JavaScript variable (of cource, with accurate escaping), maybe like this.
<script type="text/javascript">
var text = '#HTMLEditFormat(myFileContents)#';
</script>
Most advanced and possibly better for performance (and definitely "cooler") way is to use the concept of script tags as data containers, like this:
<script type="text/plain">
#HTMLEditFormat(myFileContents)#
</script>
Last time I've seen this in Nadel's blog, I think. Read it, pretty interesting.
Hope this helps.