TinyMCE Image Browser Development Key Points

风行水上 @ 2014-08-27 18:32:37

标签： html

TinyMCE是一个WYSIWYG(所见即所得)编辑器，多用于网站的文章编辑。博客平台Wordpress的默认编辑器就是基于TinyMCE的。

文章编辑过程中，一个常见的操作是插入图片。这时经常需要给用户列出图片，以供选取。

这个功能要实现的好，并不是一件容易的事情，也因此成就了一些产品。

实现该功能的TinyMCE插件"Moxie Manager"就是一个收费插件。具有类似功能的 Plugo Browser 和 TinyBrowser 也都是收费产品。

FileBrowser & FilePicker

实现上面所说的图片/文件浏览插件的关键点之一是TinyMCE提供的相应API接口：

file_browser_callback 是一个相对老一点的接口，传递的是输入框的ID。
file_picker_callback 是一个相对新一点的接口，传递的是一个回调函数。

tinymce.init({
    ...
    file_browser_callback: function(field_name, url, type, win) { 
        win.document.getElementById(field_name).value = 'my browser value'; 
    }
});

tinymce.init({
    ...
    file_picker_callback: function(callback, value, meta) {
        // Provide file and text for the link dialog
        if (meta.filetype == 'file') {
            callback('mypage.html', {text: 'My text'});
        }

        // Provide image and alt text for the image dialog
        if (meta.filetype == 'image') {
            callback('myimage.jpg', {alt: 'My alt text'});
        }

        // Provide alternative source and posted for the media dialog
        if (meta.filetype == 'media') {
            callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
        }
    }
});

标签： html