I am just wondering what the best way is to insert external text at the caret of the active editor for a textarea of a given ID

The use-case is to have a "Add to textarea xxx" option by the ImageField widget, which inserts the HTML into the editor.

This is currently what I doing:

    var textarea = 'edit-body';
    var image_mce = '<div><img src="asdf" /></div>';
    // CUT
    for (instance in Drupal.wysiwyg.instances) {
      if (instance == textarea) {
        switch(Drupal.wysiwyg.instances[instance].editor) {
          case 'none' :
            $('#' + textarea).insertAtCaret(image_mce);
            break;
          case 'tinymce' :
            tinyMCE.getInstanceById(textarea).execCommand('mceInsertContent', false, image_mce);
            break;
          default:
            //alert(Drupal.wysiwyg.instances[instance].editor)
            alert('Unsupported editor. Try using a different input format setting.');
        }
        return false;
      }
    }
    alert('Insertion failed. Please check for more up to date modules or lodge an issue at Drupal.org.');

    return false;

Ideally, I am hoping for API that is something like this:

    var textarea = 'edit-body';
    var image_mce = '<div><img src="asdf" /></div>';
    // CUT
    Drupal.wysiwyg.insertText(image_mce); // Active editor
    Drupal.wysiwyg.insertText(image_mce, textarea ); // Specific editor

    // Pass through the pre-rendering stages
    Drupal.wysiwyg.insertHtml(image_mce); // Active editor
    Drupal.wysiwyg.insertHtml(image_mce, textarea ); // Specific editor

/* OR make editor ID compulsory and a method to pull out the last editor ID*/

    // Get the ID of the last used editor
    var textarea = Drupal.wysiwyg.activeEditor(); // Defaults to first editor rendered if none have had focus

Thanks in advance

Alan

CommentFileSizeAuthor
#2 wysiwyg-HEAD-issue-409938.patch1.29 KBtwod

Comments

alan d.’s picture

alan d. commented
Title: Support for external insertion of text and HTML from external sources » Support for insertion of text and HTML from external sources

Just in case you are wondering about 'insertAtCaret ' function, it was a function that I found of the web. I've only tested this on FF2.

/**
 * Untested function from the net.
 * @see http://www.mail-archive.com/jquery-en@googlegroups.com/msg08708.html
 */
$.fn.insertAtCaret = function (myValue) {
  return this.each(function(){
          //IE support
          if (document.selection) {
                  this.focus();
                  sel = document.selection.createRange();
                  sel.text = myValue;
                  this.focus();
          }
          //MOZILLA/NETSCAPE support
          else if (this.selectionStart || this.selectionStart == '0') {
                  var startPos = this.selectionStart;
                  var endPos = this.selectionEnd;
                  var scrollTop = this.scrollTop;
                  this.value = this.value.substring(0, startPos)
                                + myValue
                        + this.value.substring(endPos,
this.value.length);
                  this.focus();
                  this.selectionStart = startPos + myValue.length;
                  this.selectionEnd = startPos + myValue.length;
                  this.scrollTop = scrollTop;
          } else {
                  this.value += myValue;
                  this.focus();
          }
  });

};
twod’s picture

twod
Primary language Swedish
Location Sweden
commented
StatusFileSize
new wysiwyg-HEAD-issue-409938.patch1.29 KB

The insert code you posted is in Wysiwyg API already, in the "none" editor. The other editors have their respective implementations as well.
The only thing missing would be Drupal.wysiwyg.insert().

I made a quick patch against HEAD just to show how it works.

Note that since some editors are quite different in how they allow the contents to be manipulated, it looks like focus is more on simply making them work rather than creating an editor-neutral content manipulation API. That would quickly increase the complexity of the editor implementations, which are already in need of a few rewrites here and there.

alan d.’s picture

alan d. commented

Thank you so much for the response. I had no issues with the patch on FF2, albeit was added to another modules JScript file ;)

I think that I'll be able to use this for the project that I'm working on. While my usage is simple, this module (wysiwyg) does create the base framework that will allow for the creation of some incredibly complex Web2 interfaces.

Using two filtered textareas, two issues that I have found running through a couple of tests, that may help out other interested parties.

Running WYSIWYG 6.x-2.x-dev / March 28, TinyMCE.

If no filters have active editors, (eg: only the none editor), the wysiwyg is not loaded, and manual insertion / external triggering of wysiwyg editor appears to be required.

If the no fields are running the none editor onLoad, the none editor doesn't appear to be initialized correctly. The only defined values were "insert" and "editor" within the none editor, the required field property was undefined.

alan d.’s picture

alan d. commented
Status: Active » Closed (fixed)

FYI, this was the final insertion call:


    if (typeof Drupal.wysiwyg != 'undefined' && typeof Drupal.wysiwyg.instances[textarea] == 'object') {
      // Check that it has be initialised correctly
      if (typeof Drupal.wysiwyg.instances[textarea].field != 'undefined') {
        Drupal.wysiwyg.insert(image_mce, textarea);
        return false;
      }
    }
    $('#' + textarea).insertAtCaret(image_mce);

Thanks again