I'm looking for some advice to put this perfect module to good use on a project.

See attached image. The picture shows a block view, with images from nodes on the site. I want to be able to click "Insert" button and the active wysiwyg/textarea gets an appropriate image.

I had a look at the Drupal.behaviours.insert code, and at insert_process($element) and it seems I'm not going to be able to reuse these functions.

I've considered writing a custom formatter (even just site-specific), but even then I feel I'll miss all the neat features of insert and insert_image_filter unless I make it a massive clone of what your module does.

Any suggestions before I commit to a path?

CommentFileSizeAuthor
#4 insert_public_js_api.patch1.75 KBquicksketch
insert-as-formatter-example.png150.88 KBsime

Comments

sime’s picture

sime
any/any
Location Melbourne
commented
Status: Active » Needs review

Took me a while, but I worked out a very light way to do it. This will work ok for my current project, but it's not anything to write home about.

Steps...
1) In the view, I add a field which is the image that would be inserted. I don't display it.

2) I then create a global custom field in the view and I wrap some html around the image.

<p class="media-insert">
  <span class="media-insert-content">[field_image_image_fid_1]</span>
  Insert
</p>

3) But I then hide the image with css.

/* Media browser insert links shouldn't show what is going to be inserted */
.media-insert .media-insert-content {
  display: none;
}

4) Then I add this javascript to add click events to my inserts.

/**
 * Allow images to be inserted into wysiwyg
 * @see media_browser view/block
 */
Drupal.behaviors.media_insert = function(context) {

  // Add the click handler to the insert button.
  $('.media-insert', context).click(media_insert);

  function media_insert() {

    // Get the hidden image we want, eg. an imagecache preset formatted image.
    content = $(this).find('.media-insert-content').html();
  
    // WYSIWYG support, should work in all editors if available.
    if (Drupal.wysiwyg && Drupal.wysiwyg.activeId) {
      Drupal.wysiwyg.instances[Drupal.wysiwyg.activeId].insert(content);
    }
    
    // We are not handling any cases other than WYSIWYG
    return false;
  }
}

@quicksketch I'll leave this as Needs Review because I'm interested in your feedback still. Please close anytime.

quicksketch’s picture

quicksketch
he/him
commented
Title: Insert as formatter » Expose JavaScript API functions
Category: support » feature
Status: Needs review » Needs work

This seems like something that definitely could benefit from having better access to Insert's existing JavaScript. I think it'd make a lot of sense if we made both the insert function and the current textarea tracker available at the global scope (under the Drupal variable of course), so you could just do something like this:

Drupal.insert.insertAtCursor(Drupal.insert.activeTextarea, content);

Then you wouldn't have to assume support for WYSIWYG or other solutions, instead you could just use Insert's tracking. It'd also make your code work with multiple textareas/WYSIWYGs.

I'm moving this to a feature request, since it'd be an obvious improvement without requiring any new code, we just need to rearrange things a bit.

sime’s picture

sime
any/any
Location Melbourne
commented

Brilliant.

quicksketch’s picture

quicksketch
he/him
commented
Status: Needs work » Fixed
StatusFileSize
new insert_public_js_api.patch1.75 KB

I've added the attached patch which adds two public API functions:

Drupal.insert.insertAtCursor(editor, content): Used for insert text into textareas.
Drupal.insert.insertIntoActiveEditor(content): Generic function that will insert into the active (or last active) editor at the cursor position. Should work for most WYSIWYGs and textareas alike.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.