Flask blog practice - integrated rich text editor quill

Rich text editor Quill

Why do I need to integrate rich text editors ？

What is the main function of a blog , That's writing , If we can't make typography and beautification of the content we publish , So what's the meaning of what we publish ? It is also very unfriendly and disrespectful to readers , A well - arranged article is often pleasing to the eye , It will also make readers love your blog , So the use of rich text editor is very important ！

Why choose a rich text editor Quill?

You may have questions , Why do so many rich text editors in the market choose it , First of all Quill Rich text editor is an open source editor , It's in GitHub Upper star Top of the list . Experience it , Its advantage is light weight 、 Strong compatibility 、 The supported plug-in extensions are rich , If you need any additional functions, just introduce them separately .

Besides , It also applies to Vue and React The packaged version of , No matter which front-end framework you are used to , Can use it without difference .

Integrate Quill

Integrate Quill The idea is to display a blank rich text editor when adding a new article , And assign the contents of the editor to the form synchronously , When editing an article, you must echo the content to the rich text editor and modify the form content synchronously ！

stay app/admin/templates/admin/article_form.html New form element in

Introduce the style of rich text editor css And for asynchronous submission axios.js

{% block extra_head_style %}
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
{% end