如何将Tinymce 4与kcfinder集成?

时间:2019-09-26 21:23:26

标签: javascript php tinymce-4 kcfinder

我无法将tinymce编辑器与kcfinder Web文件管理器集成。

编辑器加载正常,我可以从kcfinder上传,浏览和重命名图像。

但是,当我要选择图像时,什么也没有发生,因此未在字段上设置url。我无法选择图片。

控制台日志上没有错误。

编辑器: enter image description here

当我选择图像时什么也没有发生: enter image description here

版本 Tinymce 4.9.6 Kcfinder 3.12

HTML代码


<!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
});

预期结果:双击图像时,应选择该图像,并使用图像URL填充字段。

实际结果:双击图像没有任何反应。

请帮助!!!

1 个答案:

答案 0 :(得分:0)

好的,最后我找到了用

代替tinymce集成代码的解决方案

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;
    }

});

希望它可以帮助其他人