CKEditor - 自定义图像浏览器

发布于 2024-09-11 17:57:06 字数 550 浏览 10 评论 0原文

我目前正在用 PHP 和 jQuery 开发一个图像浏览器。我已经成功创建了一个自定义按钮插件，可以在新窗口（不是对话框）中打开我的图像浏览器：

CKEDITOR.plugins.add('imgbrowser',
{
    init: function(editor)
    {
        var pluginName = 'imgbrowser';
        editor.ui.addButton('Imgbrowser',
            {
                label: 'Image browser',
                command: pluginName,
                click: function (editor) { window.open('/publish/browser/index.php','Image Browser','width=900,height=600'); }
            });
    }
});

这里有没有人知道如何启用回调函数以及如何使用它，以便我可以添加选中图片进入编辑器？

原文

I'm currently developing a image browser in PHP and jQuery. I've managed to create a custom button plugin that opens my image browser in a new window (not a dialog box):

CKEDITOR.plugins.add('imgbrowser',
{
    init: function(editor)
    {
        var pluginName = 'imgbrowser';
        editor.ui.addButton('Imgbrowser',
            {
                label: 'Image browser',
                command: pluginName,
                click: function (editor) { window.open('/publish/browser/index.php','Image Browser','width=900,height=600'); }
            });
    }
});

Is there anyone here who knows how to enable the callback function and how this will be used so that I can add the selected pictures into the editor?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

世态炎凉 2024-09-18 17:57:09

好的。答案如下：

在父窗口中我有这个函数：

function InsertHTML(file_path)
        {
            // Get the editor instance that we want to interact with.
            var oEditor = CKEDITOR.instances.page_content;
            var value = file_path;

            // Check the active editing mode.
            if ( oEditor.mode == 'wysiwyg' )
            {
                // Insert the desired HTML.
                oEditor.insertHtml( '<img src="' + value + '" />' );
            }
            else
                alert( 'You must be on WYSIWYG mode!' );
        }

page_content是我的文本区域的id。

在弹出窗口中我有这个功能：

function sendToParent(file_path) {
    window.opener.InsertHTML(file_path);
}


echo "<input type='button' value='Insert image' onclick='sendToParent(\"".$img_element."\")' />"

Ok. Here is the answer:

In the parent window I have this function:

function InsertHTML(file_path)
        {
            // Get the editor instance that we want to interact with.
            var oEditor = CKEDITOR.instances.page_content;
            var value = file_path;

            // Check the active editing mode.
            if ( oEditor.mode == 'wysiwyg' )
            {
                // Insert the desired HTML.
                oEditor.insertHtml( '<img src="' + value + '" />' );
            }
            else
                alert( 'You must be on WYSIWYG mode!' );
        }

page_content is the id of my textarea.

In the popup window I have this function:

function sendToParent(file_path) {
    window.opener.InsertHTML(file_path);
}


echo "<input type='button' value='Insert image' onclick='sendToParent(\"".$img_element."\")' />"

回复收藏 0 原文

~没有更多了~