guardian / scribe

DEPRECATED: A rich text editor framework for the web platform
http://guardian.github.io/scribe/
Apache License 2.0
3.5k stars 245 forks source link

Scribe commands not working when triggered in child iframe #505

Open eric-nordicfactory opened 7 years ago

eric-nordicfactory commented 7 years ago

Hi,

First of all, thanks for a nice and clean library.

I guess this is kind of a special case but i need to use scribe from a parent document in a child iframe. Basically I'm building a wysiwyg tool to edit texts on a html page. Cross communication with parent is key here so i really want to use it like that.

Scribe works perfectly in my parent document but when applied to an element in the child iframe I'm having troubles using commands (bold etc).

I found a useful snippet for finding the current document in api/selection.js which I implemented in api/command-patch.js and it worked like a charm.

I'm just wondering if this can be a nice thing to implement in the master or if have any side effects.

`define(function () {

'use strict';

return function (scribe) { function CommandPatch(commandName) { this.commandName = commandName; }

var rootDoc = scribe.el.ownerDocument;
var nodeHelpers = scribe.node;

// find the parent document or document fragment
if( rootDoc.compareDocumentPosition(scribe.el) & Node.DOCUMENT_POSITION_DISCONNECTED ) {
  var currentElement = scribe.el.parentNode;
  while(currentElement && nodeHelpers.isFragment(currentElement)) {
    currentElement = currentElement.parentNode;
  }

  // if we found a document fragment and it has a getSelection method, set it to the root doc
  if (currentElement && currentElement.getSelection) {
    rootDoc = currentElement;
  }
}

CommandPatch.prototype.execute = function (value) {
  scribe.transactionManager.run(function () {
    rootDoc.execCommand(this.commandName, false, value || null);
  }.bind(this));
};

CommandPatch.prototype.queryState = function () {
  return rootDoc.queryCommandState(this.commandName);
};

CommandPatch.prototype.queryEnabled = function () {
  return rootDoc.queryCommandEnabled(this.commandName);
};

return CommandPatch;

};

});`

eric-nordicfactory commented 7 years ago

To support some other commands like italic, this fix needed to be implemented in api/command.js too.