5 - integration with wysiwyg editor?

[carlituxman]

know some integration of you plugin with some wysiwyg editor? like tinymce? to upload images or media

[rnicholus]

It seems like you could simply utilize Fine Uploader to upload images and then pass information about those images to TinyMCE. Is this what you are trying to do?

[carlituxman]

I don't try it, I'm looking for a wysiwyg editor to use with node.js backend to upload images.

It be interesant try fine uploader to upload and then use for example tinymce, its possible??

[rnicholus]

It seems like the best way to handle this would be to create an upload plug-in for TinyMCE using Fine Uploader. There is at least once such plug-in out there that uses Fine Uploader, but it's a fairly old version of the library and is not licensed correctly.

I'll mark this case as a feature and schedule it appropriately. If others also express interest in this, we may just write our own Fine Uploader plug-in for TinyMCE. In the meantime, you can use Fine Uploader as you normally would, and then pass the image paths to TinyMCE via TinyMCE's image_list option. Here is a forum post explaining this, assuming you are using TinyMCE4.

[carlituxman]

great! this feature would be fantastic, I haven't found any wysiwyg with node.js support

[rnicholus]

I'm guessing that the server-side language is irrelevant, even with TinyMCE. You should be able to use nodejs now.

[carlituxman]

yes, but it would be interesting use tinymce with the uploading images to a node.js (with express) server, and the only one that I've seen support node.js conector is fine-uploader. Then if we have the fine-uploader plugin tinymce it be wonderful

[carlituxman]

just now try it with successfully

at node I configure app.get('/upload/image_list',function.... that returns json list of images, is great!

[rnicholus]

I've tagged as "integration" and "to discuss". Perhaps we will write a TinyMCE plug-in at some point. Let's keep this open.

On Tue, Jul 16, 2013 at 11:26 AM, Mark Feltner notifications@github.comwrote:

Um... this is good to close?

— Reply to this email directly or view it on GitHubhttps://github.com/Widen/fine-uploader/issues/904#issuecomment-21054274 .

[andrew-kzoo]

:+1: for the TinyMCE plugin.

[carlituxman]

something new about this plugin?

[rnicholus]

The current set of priorities places this feature request a few releases out at this point. We are currently working on 3.9, which will primarily cover support for multiple file input elements (#819) along with creation of a custom build generator for the home page (#846), among other items. Then, 4.0 is likely to be the next release, where we will tackle a major change to the templating in Fine Uploader along with client-side preview display and generation for images (#869 & #868). The TinyMCE plugin work will likely not make it into the schedule until 4.1.

[tdesmet]

Any word on creating a tinymce plugin? Before I try to create my own plugin, don't want to reinvent the wheel

[rnicholus]

We hope to start researching and working on this within the next few releases. Are there any specific requirements you have for an upload component in the context of tinymce?

[tyteen4a03]

Is this still being worked on?

[rnicholus]

Not by me

[programcsharp]

I was able to get this working. I don't have time to genericize it and make a PR, but here's the basic gist to help others out.

@rnicholus -- shouldn't be hard to change the fineuploader side, and I'm happy to send you the TinyMCE dialog code if you want to build out a quick plugin.

Steps to do it...

Comment out event suppression in the "dragover" handler:

        function attachEvents() {
            disposeSupport.attach(element, "dragover", function(e) {
                if (!isValidFileDrag(e)) {
                    return;
                }
                var effect = qq.ie() && qq.supportedFeatures.fileDrop ? null : e.dataTransfer.effectAllowed;
                if (effect === "move" || effect === "linkMove") {
                    e.dataTransfer.dropEffect = "move";
                } else {
                    e.dataTransfer.dropEffect = "copy";
                }
                //e.stopPropagation();
                //e.preventDefault();
            });

-- this is so you can drag into TinyMce and move the insertion point around while dragging using their drag handling code.

Apply change from https://github.com/FineUploader/fine-uploader/pull/1819 so non-file drags aren't overridden:

        function isValidFileDrag(e) {
            if (!qq.supportedFeatures.fileDrop) {
                return false;
            }
            var effectTest, dt = e.dataTransfer, isSafari = qq.safari();
            effectTest = qq.ie() && qq.supportedFeatures.fileDrop ? true : dt.effectAllowed !== "none";
                    return dt && effectTest &&
                                (
                                        (dt.files && dt.files.length)                                      // Valid for drop events with files
                                        || (!isSafari && dt.types.contains && dt.types.contains("Files"))  // Valid in Chrome/Firefox
                                        || (dt.types.includes && dt.types.includes("Files"))               // Valid in IE
                                    )
        }

-- half of that PR is OBE, but the effect check to find if files are included works great.

In the TinyMce setup call, hook the editor init and wire in a qq.DragAndDrop to catch drops on the TinyMce body:

            editor.on("init", function ()
            {
                var doc = this.getDoc().body;

                var dragAndDropModule = new qq.DragAndDrop({
                    dropZoneElements: [doc],
                    callbacks: {
                        processingDroppedFiles: function ()
                        {
                            //TODO: display some sort of a "processing" or spinner graphic
                        },
                        processingDroppedFilesComplete: function (files, dropTarget)
                        {
                            var uploader = createUploader(editor);

                            uploader.fineUploader("addFiles", files);
                        }
                    }
                });
            });

In this example, createUploader() creates a TinyMce dialog with a fineuploader in it and uses that to upload the dropped files.

Finally, apply some css to content_css to make the TinyMce body expand fully. If you don't do this, the bottom half of an empty editor won't catch drags:

    html { height: 100% }

    body {
        height: 100%;
        margin: -13px 0 0 0;
        padding: 8px;
        box-sizing: border-box;
    }