How to add TinyMCE text editor with Django database? | With Source Code

Hi guys, If you also do programming on Django and you create any blog on Django then you have to use any text editor to write blogs for that you have to use external text editors like CKEditor, TinyMCE, etc. These text editors are known as WYSIWYG Editors.

So, Guys will choose TinyMCE text editor, and after you choose any WYSIWYG Editor. You have to face the problem of how you can add a TinyMCE text editor with your Django database. So, I Will solve this problem. So, please read this article till the end. 

First, we will understand how this problem can solve then we will see practical.

Understand How you can add TinyMCE Text Editor with your Django database.

So, Guys first thing you have to add TextField to your Django database. Then you have to create one TinyMCE JavaScript file that you have to add to the JavaScript of TinyMCE.

After You create a JavaScript file of TinyMCE you have to open your database then you have to inspect the ID of your text field. By default, the ID of the text field is #id_content.

So, you have to do one change in TinyMCE JavaScript that is you have to do Selector:#id_content.

Now, You have to add this javascript in the admin.py file and make sure you add a static folder and create that JavaScript file on the static folder. You also have to register your Model with a decorator.

So, Guys, after doing all these things you successfully add TinyMCE to the Django database.

Let’s understand why you have to do these things then move to practical.

So, guys, to add TinyMCE to the Django database you have to create a TinyMCE script that triggers the text field for that we will inspect the element then see the ID of that element.

We will do a selector: ID of that element on the JavaScript file because we have to insert TinyMCE on that text field ID.

Then we will add that JavaScript File on that static folder then we will give this javascript file path to admin.py so, this javascript file does changes on the admin panel database.

Practical How you can add TinyMCE Text Editor with your Django database.

So, Guys first you have to create one JavaScript file on the static folder and make sure you added a static folder through settings.py.

After, create that file Paste this code to that JavaScript file.

------ ADD your_filename.js Code ------

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js";
document.head.appendChild(script);

script.onload = function () {




    tinymce.init({
        selector: '#id_content',
        height: 600,
        plugins: [
            'codesample',
            'image code',
            'advlist autolink link image lists charmap print preview hr anchor pagebreak',
            'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
            'table emoticons template paste help'
        ],

        codesample_languages: [
            { text: 'HTML/XML', value: 'markup' },
            { text: "XML", value: "xml" },
            { text: "HTML", value: "html" },
            { text: "mathml", value: "mathml" },
            { text: "SVG", value: "svg" },
            { text: "CSS", value: "css" },
            { text: "Clike", value: "clike" },
            { text: "Javascript", value: "javascript" },
            { text: "ActionScript", value: "actionscript" },
            { text: "apacheconf", value: "apacheconf" },
            { text: "apl", value: "apl" },
            { text: "applescript", value: "applescript" },
            { text: "asciidoc", value: "asciidoc" },
            { text: "aspnet", value: "aspnet" },
            { text: "autoit", value: "autoit" },
            { text: "autohotkey", value: "autohotkey" },
            { text: "bash", value: "bash" },
            { text: "basic", value: "basic" },
            { text: "batch", value: "batch" },
            { text: "c", value: "c" },
            { text: "brainfuck", value: "brainfuck" },
            { text: "bro", value: "bro" },
            { text: "bison", value: "bison" },
            { text: "C#", value: "csharp" },
            { text: "C++", value: "cpp" },
            { text: "CoffeeScript", value: "coffeescript" },
            { text: "ruby", value: "ruby" },
            { text: "d", value: "d" },
            { text: "dart", value: "dart" },
            { text: "diff", value: "diff" },
            { text: "docker", value: "docker" },
            { text: "eiffel", value: "eiffel" },
            { text: "elixir", value: "elixir" },
            { text: "erlang", value: "erlang" },
            { text: "fsharp", value: "fsharp" },
            { text: "fortran", value: "fortran" },
            { text: "git", value: "git" },
            { text: "glsl", value: "glsl" },
            { text: "go", value: "go" },
            { text: "groovy", value: "groovy" },
            { text: "haml", value: "haml" },
            { text: "handlebars", value: "handlebars" },
            { text: "haskell", value: "haskell" },
            { text: "haxe", value: "haxe" },
            { text: "http", value: "http" },
            { text: "icon", value: "icon" },
            { text: "inform7", value: "inform7" },
            { text: "ini", value: "ini" },
            { text: "j", value: "j" },
            { text: "jade", value: "jade" },
            { text: "java", value: "java" },
            { text: "JSON", value: "json" },
            { text: "jsonp", value: "jsonp" },
            { text: "julia", value: "julia" },
            { text: "keyman", value: "keyman" },
            { text: "kotlin", value: "kotlin" },
            { text: "latex", value: "latex" },
            { text: "less", value: "less" },
            { text: "lolcode", value: "lolcode" },
            { text: "lua", value: "lua" },
            { text: "makefile", value: "makefile" },
            { text: "markdown", value: "markdown" },
            { text: "matlab", value: "matlab" },
            { text: "mel", value: "mel" },
            { text: "mizar", value: "mizar" },
            { text: "monkey", value: "monkey" },
            { text: "nasm", value: "nasm" },
            { text: "nginx", value: "nginx" },
            { text: "nim", value: "nim" },
            { text: "nix", value: "nix" },
            { text: "nsis", value: "nsis" },
            { text: "objectivec", value: "objectivec" },
            { text: "ocaml", value: "ocaml" },
            { text: "oz", value: "oz" },
            { text: "parigp", value: "parigp" },
            { text: "parser", value: "parser" },
            { text: "pascal", value: "pascal" },
            { text: "perl", value: "perl" },
            { text: "PHP", value: "php" },
            { text: "processing", value: "processing" },
            { text: "prolog", value: "prolog" },
            { text: "protobuf", value: "protobuf" },
            { text: "puppet", value: "puppet" },
            { text: "pure", value: "pure" },
            { text: "python", value: "python" },
            { text: "q", value: "q" },
            { text: "qore", value: "qore" },
            { text: "r", value: "r" },
            { text: "jsx", value: "jsx" },
            { text: "rest", value: "rest" },
            { text: "rip", value: "rip" },
            { text: "roboconf", value: "roboconf" },
            { text: "crystal", value: "crystal" },
            { text: "rust", value: "rust" },
            { text: "sas", value: "sas" },
            { text: "sass", value: "sass" },
            { text: "scss", value: "scss" },
            { text: "scala", value: "scala" },
            { text: "scheme", value: "scheme" },
            { text: "smalltalk", value: "smalltalk" },
            { text: "smarty", value: "smarty" },
            { text: "SQL", value: "sql" },
            { text: "stylus", value: "stylus" },
            { text: "swift", value: "swift" },
            { text: "tcl", value: "tcl" },
            { text: "textile", value: "textile" },
            { text: "twig", value: "twig" },
            { text: "TypeScript", value: "typescript" },
            { text: "verilog", value: "verilog" },
            { text: "vhdl", value: "vhdl" },
            { text: "wiki", value: "wiki" },
            { text: "YAML", value: "yaml" }
          ],

        toolbar: 'undo redo | styleselect | code | bold italic | alignleft aligncenter alignright alignjustify | ' +
            'bullist numlist outdent indent | link image | print preview media fullpage | ' +
            'codesample | forecolor backcolor emoticons | help',
        image_title: true,
        automatic_uploads: true,
        file_picker_types: 'image',


        file_picker_callback: function (cb, value, meta) {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');

            /*
            Note: In modern browsers input[type="file"] is functional without
            even adding it to the DOM, but that might not be the case in some older
            or quirky browsers like IE, so you might want to add it to the DOM
            just in case, and visually hide it. And do not forget do remove it
            once you do not need it anymore.
            */

            input.onchange = function () {
                var file = this.files[0];

                var reader = new FileReader();
                reader.onload = function () {
                    /*
                    Note: Now we need to register the blob in TinyMCEs image blob
                    registry. In the next release this part hopefully won't be
                    necessary, as we are looking to handle it internally.
                    */
                    var id = 'blobid' + (new Date()).getTime();
                    var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                    var base64 = reader.result.split(',')[1];
                    var blobInfo = blobCache.create(id, file, base64);
                    blobCache.add(blobInfo);

                    /* call the callback and populate the Title field with the file name */
                    cb(blobInfo.blobUri(), { title: file.name });
                };
                reader.readAsDataURL(file);
            };

            input.click();
        },
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',




        menu: {
            favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' }
        },
        menubar: 'favs file edit view insert format tools table help',
    });

}

Then, open admin.py you have to add this code on the admin.py.

------- ADD admin.py Code -------

from django.contrib import admin
from yourapp.models import your_model
#Comment your register model then register with decorator
# admin.site.register(your_model)
@admin.register(your_model)

class PostAdmin(admin.ModelAdmin):
    class Media:
        js= ('your_filename.js',)

Now After doing these things you successfully add TinyMCE to the Django database.

So, Guys, I hope your problem was fixed, and by any chance, your did not able to add TinyMCE in your Django database then you can comment to me so, I will help you to solve this problem.