How To Upload A Text File Into Tinymce

Cover image for upload local image/video in django TinyMCE text editor.

upload local image/video in django TinyMCE text editor.

In the TinyMCE editor, when you want to upload an image, you do not have the selection to upload your local image (i.e with the file browser dialog) like this:

What? Where is the upload option!

to solve this trouble you lot demand to edit templates of django admin console and create new js file for add upload option...

0. Directory Structures

Suppose yous have a directory structure similar this:

              .  ├── core │   ├── urls.py │   ├── settings.py │   └── ... ├── post │   ├── admin.py │   ├── models.py │   └── ... └── static     └── js         └── uploader.js

in this structure y'all have static directory to shop your static file(if y'all don't have this static file read this page) and now create a js directory and then put the uploader.js file in this directory, But what information should be in this file?👇🏻

one. Add upload characteristic to TinyMCE editor.

You accept to upward this js code in uploader.js:

              tinymce.init({       selector: "textarea#id_body",             superlative: "700",       width: "1300",       plugins: "insertdatetime media paradigm preview",       toolbar: "undo redo |  bold italic | alignleft alignright aligncenter alignjustify | image media | preview",       image_title: true,       image_caption: truthful,       automatic_uploads: true,       image_advtab: true,       file_picker_types: "paradigm media",        file_picker_callback: role (cb, value, meta) {         var input = certificate.createElement("input");         input.setAttribute("blazon", "file");         if (meta.filetype == "image") {             input.setAttribute("accept", "image/*");}         if (meta.filetype == "media") {         input.setAttribute("accept", "video/*");}          input.onchange = role () {                  var file = this.files[0];             var reader = new FileReader();             reader.onload = function () {                 var id = "blobid" + (new Appointment()).getTime();                 var blobCache =  tinymce.activeEditor.editorUpload.blobCache;                 var base64 = reader.result.separate(",")[1];                 var blobInfo = blobCache.create(id, file, base64);                 blobCache.add(blobInfo);                cb(blobInfo.blobUri(), { championship: file.name });              };              reader.readAsDataURL(file);          };          input.click();       },       content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }"   });

This script contains small configuration for the TinyMCE editor, if you want more than options in the toolbar or add multiple plugins and then on.. you can put your configuration in this file, and you tin can find all the configuration options in the TinyMCE documentation...

if yous want to add more than image configuration, you can read this link below:

epitome

file-image-upload

ii. Edit Django AdminPanel

Ok lets edit admin console template to add TinyMCE editor and upload image/video pick.

first y'all demand to find this file and edited:

              /django/contrib/admin/templates/admin/change_form.html

This file has the tag {\% endblock \%} in the end line, yous must put the post-obit line before this line
‍‍‍‍‍

              <script src="{% static 'js/uploader.js' %}"></script>

This line is to load uploader.js file, which is exactly my js script for adding the image/video upload feature, this line should be added to this file.

three. Upload Image/Video

At present your chore is washed! You lot can relieve change_form.html and reload the admin panel, now the epitome upload pick has been added and you tin can employ information technology to upload your video and images.

Image description

Note:

If you accept the TinyMCE configuration in settings.py, afterwards this change in the admin panel, all TinyMCE settings volition exist ignored and the configuration in the uploader.js file will be applied.