Add editor: Redactor

I don't speak Russian so I can't say much about that particular editor without looking through its code.
If it meets our editor requirements it should be possible to integrate it with Wysiwyg.
We don't have time to do so now by ourselves, but if you or anyone else is willing and able to do so, you're welcome to give it a go!

Thanks to Wyswiyg's hooks (see wysiwyg.api.php), any module can actually provide an implementation for an editor which Wysiwyg can then assign to formats and display as needed. That way an editor implementation can be written and tested without having to modify Wysiwyg itself. If works well enough it can then be packaged with Wysiwyg in a matter of minutes.

I'm changing this issue into a feature request (which I'll have to postpone due to lack of time), but if anyone feels they want to take responsibility for getting the editor implemented they can reopen it and [re-]assign themselves.

I've put together a documentation draft over at #900220: How to integrate a new editor which should get you going.

Looks very clean. +1. Maybe if I get some time...

+1 Very interested.

I wouldn't mind giving this a try

+1

I'm very interested in this. Has anyone decided to take this on?

@Stolinksi: Yes, I am going to make an attempt at it.

This is exciting stuff, can't wait to try it out!

I'm working on this. Hope to get something working tonight.

This is what I got so far...

• Download redactor and copy the redactor folder from source to sites/all/libraries
• Copy redactor.inc to sites/all/modules/[contrib]/wysiwyg/editors
• Copy redactor.css to sites/all/modules/[contrib]/wysiwyg/editors/css
• Copy redactor.js to sites/all/modules/[contrib]/wysiwyg/editors/js

Lots of work to do off course, but I have the redactor editor available for WYSIWYG now. All files are included in the tgz in attachment.

PS: I think we need to have a higher version of jQuery to get the drag and drop working... jQuery update is not enough...

woot!

Okay I guess this should be re-assigned to @dtrdewaele since he has already started.

@dtrdewaele: Would the jQuery Update module help to get it to a high enough version to add support for Drag and Drop? http://drupal.org/project/jquery_update

@axle_foley00
I don't think you. jQuery update bring it to 1.5.2 and what I see in the download of Reactor, we need 1.7. There is a discussion in the jquery_update issue list, but I don't think we already have anything to get the job done with 1.7. I'll look for it.

jQuery update dev release has the possibility for 1.7 but that doesn't fix the drag and drop...
Will try to detect the problem :)

UPDATE :) Problem detected, we need to have menu callbacks for the drag and drop upload... Will see what I can do for that. I could be possible that we have to separate this in a full module.

I got an email from dtrdewaele about this recently and I hope you don't mind me replying here.

Thank you all for showing interest in getting this editor implemented! I love to see others involved like this and I'm sad I can't be just as deeply involved too at this time. I hope that will change soon though.

Regarding filemanagement/upload functionality in editors, we've decided not to provide support for editor-native uploading within Wysiwyg itself. This would, as already noted here, mean we'd have to prove callbacks for handling the actual files and logic to determined if they are still used or should be deleted from storage and Drupal's file tables. We've not had the resources to build that alongside keeping the basic compatibility layers up to date.

We've therefor left that feature for other contrib modules to implement, by letting them implement hook_wysiwyg_plugin() and/or hook_wysiwyg_editor_settings_alter() depending on what works best for the editor in question. It might even be possible to collaborate with an existing module currently used for another editor and use the same serverside code, and.just editor-specific plugins or settings alterations for the frontend.

Maybe we could integrate this functionality with Wysiwyg itself later on, but we have more basic problems to deal with first.

FYI, guys -there's english site of redactor - redactorjs.com

@dtrdewaele - I dropped you an email, let's see how can I help you with your work.

Thanks for pointing to the official website http://redactorjs.com

Nice one. Please continue with this work here.

However, please do not post (compressed) tarballs. Use git instead, and attach regular patches here. As soon as this is in a working state, reviewed, tested, and the coding style + comments follow Drupal's standards (like the other files), I'd like to commit this.

Thanks for working on this!

Hm. That said, http://redactorjs.com/download/ states a pretty weird licensing model, which I don't think I've really seen for any other client-side editor library we support. Most library vendors follow the professional/enterprise support + integration/development model, but keep the library itself free of charge for any usage. Only CKEditor uses a slight variation, but AFAIK, its license only requires you to pay if you integrate it into a commercial application/product AND distribute/ship that product with CKEditor being bundled (i.e., it can be used on any web site and any amount of domains, as long as you're not "selling" and shipping an application/product to someone else with CKEditor bundled). Of course, this is my personal understanding, which is potentially wrong and is no legal advice in any way.

That's not a show stopper for including support for Redactor, but we might want or need to add a warning/note to its entry in Wysiwyg's editor library overview list, so people do not wrongly assume that it's free of charge for any (typical Drupal) use.

@sun: Thx for the comment. Hadn't checked that myself, but indeed we will have to look for that.

After the comment of TwoD I think we need to work further on this integration, but we will need a roadmap how to do this, because of the problems with upload stuff.

Off course any help is welcome, so we better brainstorm first before we handle this further!

I'll comment my idea on this tonight.

Regards

OK.
Correct me if I am wrong but I see the following options.

• We can't implement the upload functionality into WYSIWYG if we don't have plugins. Upload functionality isn't a plugin in Redactor so...
  • Can we create something like wysiwyg_imce?
  • We can leave WYSIWYG for what it is and implement Redactor in a standalone-module (I do not prefer this). I want this thing like TinyMCE
  • We try to contact the people of Redactor, explain what the problem is and try to convince them to make plugins for uploads...
• I checked what sun said and indeed there are licence fees on this editor. What are we going to do with that?
  • We can just make some kind of drupal_set_message to remember the user on this, users will not do that and we could have troubles with those guys of Redactor
  • I don't know a lot on licence fees, so please help...

I do think you could implement upload functionality as a faked native Redactor plugin in another module. Indeed much like imce_wysiwyg.

/**
 * Implements hook_wysiwyg_plugin().
 *
 * A fake upload plugin used to inject a setting into the editor instance.
 */
function redactor_upload_wysiwyg_plugin($editor, $version) {
  if ($editor == 'redactor') {
    return array(
      'upload' => array(
        'url' => 'http://redactorjs.com/docs/files/',
        // This "plugin" has no buttons, so we call it an extension.
        'extensions' => array(
          'upload' => t('File upload'),
        ),
        // The editor implementation needs to check these two values on all enabled plugins and act accordingly.
        'internal' => TRUE, // With this we don't have to specify where the "plugin" is located. Internal plugin folder assumed.
        'load' => FALSE, // Do not actually load this "plugin". It's already loaded by default or something else loaded it.
      ),
      'options' => array(
        // This is where the magic happens and we can merge a setting into what gets passed to the editor instance, despite no actual plugin being loaded.
        'fileUpload' => drupal_get_path('module', 'redactor_upload') . '/handle-file-uploads.php',
      ),
    );
  }
);

The file redactor_upload/handle-file-uploads.php could of course also be a Drupal path, leading to a page callback which registers the uploaded file and does whatever needs to be done to have it work.

Sweet @TwoD!
I'll create a sandbox for that!

Thx!

@dtrdewaele: No need for sandbox. This patch here should add the editor support to Wysiwyg, and a separate patch for imce_wysiwyg can add support for Redactor to that module.

OK sandbox deleted but...

  'fileUpload' => drupal_get_path('module', 'redactor_upload') . '/handle-file-uploads.php',

If we don't create a separate module, we have to create a plugin into wysiwyg itself?

  'fileUpload' => drupal_get_path('module', 'wysiwyg') . '/plugins/redactor_upload/handle-file-uploads.php',

So we handle file uploads into WYSIWYG itself without touching wysiwyg core.
That is what you mean I think?

If we would like to have a nice menu callback with hook_menu we can't do it this way?

If these are "stupid" questions :) First time I integrate something in WYSIWYG :)

I don't think we could integrate with Redactor with IMCE at all, at least not easily. IMCE handles browsing/uploading/picking in its dialog and puts the URL of the uploaded/picked file to a text field in whichever thing invoked the dialog. When used with Wysiwyg, that thing invoking the dialog and specifying which textfield to return the URL to is IMCE Wysiwyg bridge. It basically just injects the URL to a dialog which the editor will open and passes along the id of the path textfield in the editor's image dialog as a parameter.

In the case of Redactor, it has its own dialog for picking/uploading the file and just submits the actual image data to the URL specified in fileUpload. In return it expects an HTML "a" tag which it'll insert into the content.

A patch for IMCE Wysiwyg bridge would not be able to pass the URL for IMCE's dialog as that page doesn't accept a POST request with the actual image data. It would have to bypass the IMCE browse/pick/upload dialog completely, use Drupal's API to register the file - or just dump it in the files folder - and return the expected "a" tag. Not much left for IMCE to do with it.
I think it's pretty much the same with most existing media modules for Drupal.

@dtrdewaele, don't worry about asking questions. Asking/answering questions is a lot quicker and easier than writing a bunch of code based just on assumptions which then has to be rewritten because the assumptions were wrong or one misunderstood something. I don't mind answering a hundred questions if they lead to more people being able to fix bugs or add features. We always want more people to get involved in the project, especially if those who take the time to dig deep into it.

I think we have a misunderstanding here.

We don't want to integrate with IMCE at all :) imce_wysiwyg bridge was just an example of how we can do this to have indeed the uploading systeem from Redactor into the WYSIWYG module.

The actual question was if we have to create something like that. A simple module with the code from #21 and detect in our plugin for WYSIWYG if the module is installed or not. Or are there possibilities to fix this in WYSIWYG itself (so having a callback to upload images)?

Thx for the help TwoD and sun. Started the correct integration tonight. Hope to get some patches by the end of the weekend.

That was mostly in response to Sun mentioning patching imce_wysiwyg (or any other existing media module for that matter).
My point was really just that Redactor already does most of what the existing media modules for Drupal do when it comes to browsing/picking/uploading images, but it expects the serverside code to just accept an uploaded file without the FAPI being involved. That part would require a special menu callback for receiving the file, and security measures around that, which I don't think we're able to deal with in Wysiwyg module. Wysiwyg does not currently handle uploads at all and leaves that for other modules to focus on.

If we want to use Redactor's own mechanism for uploading files, then yes, I do think that part will have to be put in a new module - with the "plugin" code from #21 as well as the previously mentioned menu callback (which would probable be the complicated part). The rest of the Redactor implementation would work well in Wysiwyg itself.

I'm not saying there's not an existing media module which would be able to receive the uploaded file the way Redactor sends it, I just don't know of any. If there is one, the #21 code could just be put into that module and there would be no need to create a whole new project for it.

If we can get cross-editor plugin support in the Redactor implementation like we have for the TinyMCE, FCKeditor and CKEditor implementations, we'll [theoretically] get automatic support for several existing media modules as well. Those modules have plugins which would create their own toolbar button and not utilize the fileUpload/imageUpload settings or Redactor's dialog so it won't be exactly the same, but they do integrate with how Drupal manages files.

That is also my idea. I restarted a sandbox called wysiwyg_redactor_bridge which has the code above and has all the menu callbacks we need. This will be the best way to get the job done.

Having a bite after some sport and working on that a little more :)

Ready? First GIT patch to get the job done!

http://drupal.org/sandbox/coworks/1624850 is the sandbox for the upload integration.

This one works with the permissions of the bridge module mentioned in #30.

Thanks very much for your work on this, dtrdewaele. I followed the instructions and used the download from #10 and applied your patch from #31. All seems well except within the textarea (Advanced Forum, FWIW)-the background CSS appears and all buttons are functional (using mouseover to see what's what), but the icons do not display (see first attachment). From the Redactor profile for my input type, I there are no options under buttons and plugins (see attachment 2). I suspect that's the origin of my problem (can't sort it out comparing pages using Firebug) and isn't an inherent issue here but was hoping you could help.

Although drag and drop image upload seems to work (region in pop-up highlights on mouseover), I can't insert a local file either that way or using "choose file." I'm guessing that's also related to my issue. Image via link works great.

Thanks again for your time and effort-I really like this editor option so hope I can figure this out!

Hi,

I'm trying to work further on this next week. Issues will be handled then. Had busy times last few weeks :)

No worries. Simple solution for my button issue; the icons.png was not part of the download I got from redactorjs (checked twice). In case anyone else runs into this it needs to be located at sites/all/libraries/redactor/img/icons.png and you can grab the image with any of the various browser-based element inspectors.

Issue with attaching local images remains, but I'm not sure that I'll be much help in resolving that given my limited PHP and CSS knowledge.

Does anyone got this working with Image or File Uploads?

For detach redactor use this code. Please add to patch.

Drupal.wysiwyg.editor.detach.redactor = function(context, params) {
  var id = Drupal.wysiwyg.activeId;
   $('#' + id).destroyEditor();
}

Other functions on redactorjs.com/docs/api/

Sorry, this code is best worked at several editors on page:

/**
 * Attach this editor to a target element.
 *
 * See Drupal.wysiwyg.editor.attach.none() for a full desciption of this hook.
 */
Drupal.wysiwyg.editor.attach.redactor = function(context, params, settings) {
  var editor = params.field
  if (editor != 'undefined' || typeof editor != 'undefined'){    
    $('#' + editor).redactor(settings);
  }
}

/**
 * Detach this editor to a target element.
 *
 */
Drupal.wysiwyg.editor.detach.redactor = function(context, params) {
  var editor = params.field
  if (editor != 'undefined' || typeof editor != 'undefined'){   
   $('#' + editor).destroyEditor();
  }
}

Anyone tried version 8 of this great editor? I did but nothing works. It just loads without any buttons and a text field that you can't write anything. I emailed the developers for their support and waiting for their answer

Hi, I've just found out about this editor and I really like it.

I'd ideally like to be able to use it with the WYSIWYG module; has development for this stalled?

Cheers

Luke

Hi Luke,

No, completion of this development is planned for next week.

Gr

Editor has a bit strange license. Also it seems its not open source. Is it allright tu "put" it into Wysiwyg?

yii developers actively use this editor.
I think everything is OK with the license.

http://www.yiiframework.com/extension/yii-redactorjs-wysiwyg-widget/
http://www.yiiframework.com/extension/redactor/

it would be desirable to see it in Drupal

+1

+1

Hi everybody!

Please tell me if there are any new developments in this issue? According to the instructions from dtrdewaele http://drupal.org/node/1250514#comment-6069952 I was able to integration Redactor into WYSIWYG module. However, I still failed to configure the images and files upload.

Please help me setup the Redactor in such a way that work upload files and images.
I would be happy and grateful for instructions with step by step description of the steps to configure the module.

Thanks in advance!