What Django model field should I use for WYSIWYG data from React?

Asked
Active3 hr before
Viewed126 times

7 Answers

modeldjangofieldreact
90%

Presumably if your WYSIWYG editor is actually creating html files, and at this time not handling the inserted files (images), the TextField should be enough. It is additional issue if you enable pictures or other multimedia elements to be inserted while editing, but they would have to be dealt separately.,So, for general html files, produced by your WYSIWYG editor plain TextField should be enough.,I am creating a blog application and want to use a text editor/ WYSIWYG editor for individual posts. Since I will be using React for the frontend, the data will be received through an API (using DRF for that). So in my model, what field should I create that will accept the WYSIWYG data?

Pretag
 Pretag team - issue, fix, solve, resolve
88%

Although Post model has several TextField, only content field will have SummernoteWidget.,Install django-summernote to your python environment., Install django-summernote to your python environment. pip install django-summernote

pip install django - summernote
load more v
72%

Install the CKEditor 5 WYSIWYG editor component for React and the editor build of your choice.,The easiest way to use CKEditor 5 in your React application is by choosing one of the rich text editor builds. Additionally, it is also possible to integrate CKEditor 5 built from source into your application. You can also use a customized editor built by using CKEditor 5 online builder in any React application.,LocalizationReady-to-use buildsCKEditor 5 built from source

Pretag
 Pretag team - issue, fix, solve, resolve
65%

Select the desired content type from the Content model tab.,The content added to the Rich Text field can be consumed from the API response and rendered further in the desired application.,Rendering the API response (a JSON object) is not easy and requires effort to be converted to HTML. Hence, helper functions are created that allow to:

For example, following is the API call to only allow paragraphs and specific formatting in them:

{
   "id": "YOUR_CONTENT_TYPE_ID",
   "name": "Rich Text Field",
   "type": "RichText",
   "validations": [{
         "enabledNodeTypes": ["paragraph", "text"],
         "message": "Please choose a valid node type (should be a paragraph or text)."
      },
      {
         "enabledMarks": ["bold", "italics"],
         "message": "Please remove any extraneous document markup - only bold and italics are supported."
      }
   ]
}
load more v
75%

Wysiwyg is a bad approach 99% of the time. Wyisiwym is far superior since they add content and some structure whilst you do the proper styling. See Draftail that Wagtail uses. If you really want, and it's something I can recommend in many use cases, go whole hog on Wagtail and it's Streamfields. It's a fantastic technology.,My understanding is that it stores rich text as json rather than html, and so might be inherently more secure. But maybe someone else is more knowledgeable on this issue than I.,Wagtail, a popular Django CMS, developed a version of it they call Draftail:

Pretag
 Pretag team - issue, fix, solve, resolve
40%

We wanted a way to add a WYSIWYG editor so users could edit HTML descriptions in text areas in the Django Admin and other Django forms. A lot of people were considering using Django with TinyMCE and it was great to be able to collaborate on a piece of code that could help ease integration. TinyMCE is a clean editor that is highly customizable and comes with a handful of plugins that can help integrate images and links. Using django-tinymce with django-filebrowser is really nice, with a neat, smooth experience.,Django allows developers to take web applications from conception to launch within hours, taking away much of the hassle of web development, and allowing you to focus solely on your app and your end users. Django has been used in many popular apps, including Disqus, Instagram, Spotify, and more.,For difficulties integrating TinyMCE with Django: create an issue against the django-tinymce project on GitHub here – django-tinymce issues.

Pretag
 Pretag team - issue, fix, solve, resolve
22%

Skip this url inclusion if you don't want image and file upload inside WYSIWYG editor. Images from URLs can still be embedded.,Add the directory froala_editor from this repo to your Python path.,The usage of plugins argument with FroalaEditor or FroalaField overrides this for that particular instance.

  url(r '^froala_editor/', include('froala_editor.urls')),
load more v

Other "model-django" queries related to "What Django model field should I use for WYSIWYG data from React?"