CODEWITHSUNDEEP
concrete5
user1448031
user1448031

Reputation: 2166

Concrete5: How to open TinyMCE in a modal dialog from inside the custom block?

I'd like to open TinyMCE in a modal dialog from inside the custom block I am building. I know how to implement a modal dialog but couldn't figure out a way to integrate TinyMCE inside the dialog.

What I am trying to achieve is when a text is clicked in the block add/edit popup, it should open up a dialog with TinyMCE to edit that clicked text. Anyone done this before?

This is what I am trying to achieve in add/edit forms:

$this->addHeaderItem(Loader::helper('html')->javascript('tiny_mce/tiny_mce.js'));
Loader::element('editor_init');
Loader::element('editor_config');
Loader::element('editor_controls');

<textarea name="field-name" class="text-area-value ccm-input-textarea">Some text here or empty....</textarea>

$bt = BlockType::getByHandle('myblock');
<a class="dialog-launch ccm-block-type-inner" 
dialog-on-close="ccm_blockWindowAfterClose()" dialog-append-buttons="true" 
dialog-modal="false" dialog-width="500" 
dialog-height="500" dialog-title="<?php echo t('Add/Edit Text)?>"
href="<?php echo $th->getBlockTypeToolsURL($bt); ?>/tinymce_dialog.php?text=<?php echo $text-area-value; ?>">
  Edit the above text in TinyMCE
</a>

In tinymce_dialog.php in tools folder:

<textarea name="textarea-name" 
class="ccm-input-textarea advancedEditor ccm-advanced-editor">
  <?php echo $_GET['text']; ?>
</textarea>

<div class="ccm-buttons dialog-buttons">
    <a href="javascript:void(0)" onClick="ccm_blockWindowClose();" 
       class="ccm-button-left btn">Cancel</a>
    <a href="" onClick="" class="btn primary">Ok</a>
</div>

But I am unable to pass the value of textarea into the modal dialog popup. I tried using href in the anchor tag to pass the value of textarea to a script that resides in the tools folder but that does not seem to work either.

Edit: I've also added buttons in tinymce_dialog.php (See the code above). Not sure if it's possible to pass those buttons through <a dialog-on-close="ccm_blockWindowAfterClose()" dialog-append-buttons="true".....> in the form.

Upvotes: 2

Views: 1410

Answers (2)

James S
James S

Reputation: 3374

There's two ways to go about this:

  1. As you describe in your question edits, where you load a tools file. There are a few points here:
    • URLs aren't great for passing text data, especially the kind of text that'd be edited in tinymce (long and formatted). With that being said, it should work. I don't see why the $_GET wouldnt' work. Make sure that the URL contains the text in the first place (you can see by looking at your developer console).
    • Better is to pass an ID (tinymce_dialog?id=[ID]). This is assuming that the text is saved in the DB, but it looks like you might be providing them an interface to basically "wysiwyg edit in a modal text that they're not-wyswiwyg editing already". I'm not sure if you've thought through how this will work, though. By default, they'll have to deal with a bunch of HTML tags ?
  2. The alternative is to create the dialog out of an DOM element. Create a div hidden in the form, with CSS display: none;, save the text into it (if already initialized, tinymce has a .update() or something), and then show the hidden div (with Example 3 from http://www.concrete5.org/documentation/how-tos/developers/javascript-jquery-and-concrete5/). When they click (SAVE), you can then (presumably) copy the data out of tinymce and put it back where it needs to go.

Note that in many cases, the tinymce initialize code only runs on page load. I think that's what Loader::element('editor_init') does. And it works by detecting the appropriate textareas (based on class name). So if the page with the editor_init is loaded before the textarea is loaded (such as how it looks now), you'll have to reinit tinymce. That's a vote for #2. In general, I suggest you go that route.

Upvotes: 1

Jordan Lev
Jordan Lev

Reputation: 2813

Should work the same as anywhere else. First, include this line of code once in your dialog (you only need it once, regardless of how many TinyMCE's you have):

<?php Loader::element('editor_config'); ?>

Then, for each TinyMCE you want, use this:

<?php Loader::element('editor_controls'); ?>
<textarea name="your-field-name" class="ccm-advanced-editor"></textarea>

Upvotes: 2

Related Questions