Text area with external editor

[Nick Croft]

Hello, I've searched repeatedly for some means of doing this but come up dry. I've got a block that needs an external editor for the text area. What I have right now sort of works, but it isn't really ideal for the target users and it also has some odd effects.

if (typeof editor == "undefined" || editor == null || editor.isHidden()) {

var emailContent = jQuery('#rmma-editor').val();

}

else {

var emailContent = editor.getContent();

}

//Send email action used to send users email

Blockly.Blocks['action_send_email'] = {

init: function() {

var rmmaGetEmailContent = function(content) {

var currentContent = emailContent.length > 0 ? emailContent : content;

jQuery('#rmma-editor-wrap, .lp-copy-editor').fadeIn();

/*while( currentContent == emailContent ){

setTimeout(function(){}, 250);

if( currentContent != emailContent ){

return emailContent;

}

}*/

return currentContent;

}

this.setHelpUrl(rmma_block_options.url+'/admin/admin.php?page=rm_kb&space_id=5088&manual_id=31779&lesson_id=310312');    

this.setColour(186);

this.appendDummyInput()

       .appendField("send user an email:");

   this.appendDummyInput()

       .appendField("Subject: ")

       .appendField(new Blockly.FieldTextInput(""), "subject");

   this.appendDummyInput()

       .appendField("Content:")

       .appendField(new Blockly.FieldTextInput("", rmmaGetEmailContent), "content");

this.setInputsInline(false);

this.setOutput(true, "action");

this.setTooltip('');

}

};

jQuery('body').on('click', '.button-save-copy', function(){

var editor         = tinyMCE.EditorManager.get('rmma-editor');

if (typeof editor == "undefined" || editor == null || editor.isHidden()) {

var content = jQuery('#rmma-editor').val();

}

else {

var content = editor.getContent();

}

emailContent = content;

jQuery('#rmma-editor-wrap, .lp-copy-editor').fadeOut(400);

return false;

});

Basically the first bit of code sets the variable that will be used to update the content field of the block. When someone clicks in the field to edit a modal window will show with the editor in it. The user can enter text into a WYSIWYQ editor and click a button to save.

All of that works fine, but I was not able to figure out a way to automatically update the blocky field content at this point. Once the user clicks to save the content the variable is updated and the modal closes, but it shows the text box in the blockly field waiting for text input. You have to click the text box and press enter. Then it checks the variable and updates the field with the correct content from the editor.

Ideally this would update the value as part of the on click function I'm using to update the variable and close the modal. Is there some way to trigger the change callback at this point or even better target the field being edited and update it directly?

[Nick Croft]

I was able to get this mostly working. My code looks something like this right now

var showEditor = true;

//Send email action used to send users email

Blockly.Blocks['action_send_email'] = {

init: function() {

var rmmaGetEmailContent = function(content) {

var currentContent = emailContent.length > 0 ? emailContent : content;

if( showEditor ){

jQuery('#rmma-editor-wrap, .lp-copy-editor, .editor-overlay').fadeIn();

}

return currentContent;

}

this.setHelpUrl(rmma_block_options.url+'/admin/admin.php?page=rm_kb&space_id=5088&manual_id=31779&lesson_id=310312');    

this.setColour(186);

this.appendDummyInput()

       .appendField("send user an email:");

   this.appendDummyInput()

       .appendField("Subject: ")

       .appendField(new Blockly.FieldTextInput(""), "subject");

   this.appendDummyInput()

       .appendField("Content:")

       .appendField(new Blockly.FieldTextInput("", rmmaGetEmailContent), "content");

this.setInputsInline(false);

this.setOutput(true, "action");

this.setTooltip('');

}

};

jQuery('body').on('click', '.button-save-copy', function(){

if( typeof tinyMCE != "undefined" ){

var editor = tinyMCE.EditorManager.get('_rmma_editor');

}

if (typeof editor == "undefined" || editor == null || editor.isHidden()) {

var content = jQuery('#_rmma_editor').val();

}

else {

var content = editor.getContent();

}

emailContent = content;

showEditor = false;

jQuery('.blocklyHtmlInput').sendkeys('\n').parents('.blocklyWidgetDiv').toggle().empty();

jQuery('#rmma-editor-wrap, .lp-copy-editor, .editor-overlay').fadeOut(400, function(){ showEditor = true; });

return false;

});

I'm using some code to trigger the change and then removing the HTML input. I have to use a flag to show the editor or not on change otherwise it pops back up because the change is triggered. Everything works but it seems there is a flag or listener in Blockly that is waiting for the .blocklyHtmlInput field to submit the input value because it will trigger the editor with any keypress. Not sure if I can alter focus somehow to make this work differently or what.

Anyone have any idea about what I can do differently or at least to close out whatever is listening to the keypress when I do this?