CODEWITHSUNDEEP
javascriptphptinymce-4kcfinder
CruzDelSur
CruzDelSur

Reputation: 91

how do I integrate Tinymce 4 with kcfinder?

I cannot integrate tinymce editor with kcfinder web file manager.

Editor loads fine, and I can upload, browse and rename images from kcfinder.

But when I want to select image nothing happens, url is not set on field. I cannot select image.

There are not errors on console log.

Editor: enter image description here

Nothing happens when I select image: enter image description here

Versions Tinymce 4.9.6 Kcfinder 3.12

HTML code


<!doctype html>
<html lang='es' >
    <head>
        <meta charset="utf-8">
        <script src="./js/tinymce/tinymce.min.js"></script>
        <script src="./js/default_tinymce.js"></script>
    </head>
    <body>
        <form method="post" action="content-edit.php">
            <textarea name="content" class="tinymce"></textarea><br>
            <input type="submit">
        </form>
    </body>
</html>

javascript js/default_tiymce.js

tinymce.init({ 
        selector:'.tinymce',
        convert_urls: false, // default 1
        remove_script_host: false, // default 1
        browser_spellcheck: true,
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste",
            "emoticons template paste textcolor colorpicker textpattern imagetools"
        ],
    file_picker_callback: function(field, url, type, win) {
            tinyMCE.activeEditor.windowManager.open({
                file: './kcfinder/browse.php?opener=tinymce&field=' + field + '&type=' + type,
                title: 'Kcfinder',
                width: 700,
                height: 500,
                inline: true,
                close_previous: false
            }, {
                window: win,
                input: field
            });
            return false;
        },
       toolbar: "insertfile undo redo | styleselect  | forecolor backcolor emoticons | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ",
       paste_data_images: true
});

Expected result: when double click on image it should be selected and populate field with image url.

Actual result: nothing happens when image is double clicked.

Help Please!!!

Upvotes: 0

Views: 782

Answers (1)

CruzDelSur
CruzDelSur

Reputation: 91

OK, finally I found solution I replaced tinymce integration code by

javascript js/default_tiymce.js


this:tinymce.init(
{ 
        selector:'textarea',
        menubar: false,
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste"
        ],
       toolbar: "undo redo | insert | styleselect  | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ",
    file_browser_callback: function(field, url, type, win) {
        tinyMCE.activeEditor.windowManager.open({
            file: './kcfinder/browse.php?opener=tinymce4&field=' + field + '&type=' + type,
            title: 'KCFinder',
            width: 700,
            height: 500,
            inline: true,
            close_previous: false
        }, {
            window: win,
            input: field
        });
        return false;
    }

});

Hope it can help someone else

Upvotes: 1

Related Questions