tinymce.js

import tinymce from "tinymce";

require("tinymce/plugins/preview/plugin");
require("tinymce/plugins/importcss/plugin");
require("tinymce/plugins/searchreplace/plugin");
require("tinymce/plugins/save/plugin");
require("tinymce/plugins/visualblocks/plugin");
require("tinymce/plugins/fullscreen/plugin");
require("tinymce/plugins/visualchars/plugin");
require("tinymce/plugins/link/plugin");
require("tinymce/plugins/media/plugin");
require("tinymce/plugins/codesample/plugin");
require("tinymce/plugins/charmap/plugin");
require("tinymce/plugins/hr/plugin");
require("tinymce/plugins/pagebreak/plugin");
require("tinymce/plugins/nonbreaking/plugin");
require("tinymce/plugins/table/plugin");
require("tinymce/plugins/anchor/plugin");
require("tinymce/plugins/toc/plugin");
require("tinymce/plugins/insertdatetime/plugin");
require("tinymce/plugins/advlist/plugin");
require("tinymce/plugins/lists/plugin");
require("tinymce/plugins/wordcount/plugin");
require("tinymce/plugins/image/plugin");
require("tinymce/plugins/imagetools/plugin");
require("tinymce/plugins/textpattern/plugin");
require("tinymce/plugins/help/plugin");
require("tinymce/plugins/noneditable/plugin");
require("tinymce/plugins/quickbars/plugin");
require("tinymce/plugins/emoticons/js/emojis");
require("tinymce/plugins/emoticons/plugin");
require("tinymce/plugins/autolink/plugin");
require("tinymce/plugins/autolink/plugin");
require("tinymce/plugins/code/plugin");
// require("tinymce/plugins/print/plugin");

require("tinymce/themes/silver/index");

// tinymce.init({
//     selector: "#mytextarea"
// });



tinymce.init({
    selector: "#mytextarea",
    plugins:
        "preview code importcss searchreplace autolink save visualblocks visualchars fullscreen image link media codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons",
    mobile: {
        plugins:
            "preview code importcss  searchreplace autolink save  visualblocks visualchars fullscreen image link media codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount textpattern noneditable help charmap quickbars emoticons advtable"
    },
    menubar: "file edit view insert format tools table tc help",
    toolbar:
        "undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save | insertfile image media link anchor codesample | code",
    importcss_append: true,
    // extended_valid_elements: "img[class=uploaded-image-gallery|src|border=0|alt|title|hspace|vspace|align|onmouseover|onmouseout|name]",
    // image_dimensions: false,
    height: 500,
    image_caption: true,
    relative_urls: false,
    codesample_languages: [
        { text: 'HTML/XML', value: 'html' },
        { text: 'JavaScript', value: 'javascript' },
        { text: 'TypeScript', value: 'ts' },
        { text: 'CSS', value: 'css' },
        { text: 'PHP', value: 'php' },
        { text: 'Ruby', value: 'ruby' },
        { text: 'R', value: 'r' },
        { text: 'Python', value: 'python' },
        { text: 'Java', value: 'java' },
        { text: 'C', value: 'c' },
        { text: 'C#', value: 'csharp' },
        { text: 'C++', value: 'cpp' },
        { text: 'SQL', value: 'sql' },
        { text: 'Bash', value: 'bash' },
        { text: 'Nginx', value: 'nginx' },
        { text: 'Dockerfile', value: 'docker' },
        { text: 'Markdown', value: 'md' },
        { text: 'VBA', value: 'vba' },
        { text: 'VBScript', value: 'vbs' },
    ],
    quickbars_selection_toolbar:
        "bold italic | quicklink h2 h3 blockquote quickimage quicktable",
    noneditable_noneditable_class: "mceNonEditable",
    toolbar_mode: "sliding",
    contextmenu: "link image imagetools table",
    image_class_list: [
        { title: "Preview Kapalı", value: "" },
        { title: "Preview Aktif", value: "uploaded-image-gallery" }
    ],
    images_upload_handler: function (blobInfo, success, failure) {
        var xhr, formData;

        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;

        let imageUploadUrl = tinyMCE.activeEditor
            .getElement()
            .getAttribute("data-image-route");

        xhr.open("POST", imageUploadUrl);

        let csrfToken = document
            ?.querySelector("meta[name='csrf-token']")
            ?.getAttribute("content");

        xhr.setRequestHeader("X-CSRF-TOKEN", csrfToken);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

        xhr.onload = function () {
            var json;

            const removeImage = () => {
                var editor = tinymce.activeEditor;
                editor.selection.collapse();
                $(editor.dom.doc).find('img[src^="blob:"]').remove();
            }

            if (xhr.status < 200 || xhr.status >= 300) {
                failure("HTTP Error: " + xhr.status);
                removeImage();
                return;
            }

            json = JSON.parse(xhr.responseText);

            if (!json || typeof json.location != "string") {
                failure("Invalid JSON: " + xhr.responseText);
                removeImage();
                return;
            }

            success(json.location);
            tinyMceImageUploaded();
        };

        formData = new FormData();
        formData.append("fileToUpload", blobInfo.blob(), blobInfo.filename());

        xhr.send(formData);

        // imageUploaded methodu çağrılır..

    }
});

imageAdded((url) => {
    tinymce.activeEditor.execCommand('mceInsertContent', false, '<img alt="image" src="' + url + '"/>');
})