TinyMCE 4 Plugin: DDL w/ Popup

Pepperweb tests

by Amy Patterson

HTML

<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<!-- Default modal example from: http://twitter.github.io/bootstrap/javascript.html#modals -->

<!-- Button to trigger twitter bootstrap modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch TinyMCE in bootstrap modal</a>
 
<!-- Modal itself -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <textarea name="content"><p>Lorem ipsum dolor sit amet</p></textarea>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>
<!-- End Modal  -->
<!-- Modal itself -->
<div id="token-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>test</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>
<!-- End Modal  -->

CSS

body { margin: 20px 0; }

JavaScript

tinymce.PluginManager.add('tokens', function (editor, url) {
    editor.addButton('inserttoken', {
        title: "Insert Token",
        type: 'menubutton',
        text: 'Tokens',
        icon: false,
        onselect: function (e) {
          if (e.control.settings.value != '{MenuItemPopup}') {
            editor.insertContent(e.control.settings.value);
          } else {
            $('#token-modal').modal({ show: true });
          }
        },
        menu: [
            { text: 'Menu Item 1', value: '{MenuItem1}' },
            { text: 'Menu Item 2', value: '{MenuItem2}' },
            { text: 'Menu Item 3', value: '{MenuItem3}' },
            { text: 'Menu Item 4', value: '{MenuItem4}' },                     
            { text: 'Menu Item with Popup', value: '{MenuItemPopup}' }                        
        ],
        onPostRender: function () {
            this.value('{MenuItem1}');
        }
    });    
});

function InsertInlineToken(item) {
    tinyMCE.activeEditor.execCommand('mceInsertContent', false, item);
    $.fancybox.close();
}

tinymce.init({
    selector: "textarea",
	width:      '100%',
	height:     270,
    plugins:    [ "anchor link tokens" ],
    statusbar:  false,
	menubar:    false,
    toolbar:    "inserttoken anchor | alignleft aligncenter alignright alignjustify",
	rel_list:   [ { title: 'Lightbox', value: 'lightbox' } ]
});