Adding a plugin to TinymceBundle

[arryon]

Your documentation states no means of including other plugins in the TinymceBundle installation. I for instance want to include MCImageManager as a plugin. Is there another possibility besides forking your repo?

[fluxuator]

@arryon I don't think that is part of TinyMCE bundle documentation. There are examples of bundle and TinyMCE configuration show how you can set TinyMCE parameters in the Symfony config file. You can add TinyMCE plugins how is described in it docimentation.

For example: http://www.tinymce.com/wiki.php/Plugin:fullpage

tinyMCE.init({
        theme : "advanced",
        mode : "textareas",
        plugins : "SOME_PLUGIN",
        theme_advanced_buttons3_add : "SOME_PLUGIN",
        ...
});

app/config/config.yml

stfalcon_tinymce:
    include_jquery: true
    tinymce_jquery: true
    textarea_class: "tinymce"
    theme:
        simple:
            mode: "textareas"
            theme: "advanced"
            theme_advanced_buttons3: "SOME_PLUGIN,separator,bold,italic,underline,..."
            plugins: "fullscreen,SOME_PLUGIN"
            ...

have a nice day )

[Blackskyliner]

But this is a broken way if you want to roll out some webpage which depends on a plugin. As your repo wont have this plugin, thus it would not be available for the TinyMCE as it has to be inside the plugin folder of TinyMCE. So your bundle needs to define a way to plug-in some TinyMCE plugins or did I miss something inside the TinyMCE documentation, which allows plugins to be stored elsewhere and be accessed via init-configuration?

At least the way (if one exists) which does describe how to integrate some external plugin into your bundle would be great.

Thanks in advance.

EDIT: NVM, http://www.tinymce.com/wiki.php/Configuration:plugins states that external plugins are somehow possible. A short example would be great nonetheless.

EDIT2: As I see this I would have to change external code (like the plugin I's like to use) So it conforms to the 'limits' you have when using external plugins (at least as far as I do understand). It would be a no-brainer though if we could add/import resources into the bundle? I will edit this entry even more (as long as no one answered) with my progress integrating some external plugin.

[fluxuator]

@Blackskyliner thanks for your request, check please. I've added support of external plugins

[Blackskyliner]

I got the time to try it now with PlugoBrowser.

I have the following problem:

If a plugin uses the PluginManager.requireLangPack() to load the language it fails. The path it tries to use is the following: 'undefined/langs/en.js' thus having a path like: 'http://mysite.tld/some/path/to/an/action/undefined/langs/en.js'. But it should be the plugin path 'http://mysite.tld/bundles/acmeplugobrowser/js/langs/en.js' as defined in the asset url for the main JS file to init the whole boy. 'asset['bundles/acmeplugobrowser/js/editor_plugin.js']'

Also the 'init' function does not get called even if I comment out the LangPack loading. Here some code from the plugin. (as its some paid one I made it unusable and outlined the problem)

/**
 * editor_plugin.js
 *
 * Copyright 2012, Plugo s.r.o.
 *
 * @license: http://www.plugobrowser.com/license/
 */

(function()
{         
    // Load plugin specific language pack
    //tinymce.PluginManager.requireLangPack('plugobrowser');
    console.log('create plugo');
    tinymce.create('tinymce.plugins.PlugoBrowserPlugin',
    {
        /**
         * Initializes the plugin, this will be executed after the plugin has been created.
         * This call is done before the editor instance has finished it's initialization so use the onInit event
         * of the editor instance to intercept that event.
         *
         * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
         * @param {string} url Absolute URL to where the plugin is located.
         */
        init : function(ed, url)
        {
            console.log('init');

            console.log('added button');

        },

        /**
         * Creates control instances based in the incomming name. This method is normally not
         * needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
         * but you sometimes need to create more complex controls like listboxes, split buttons etc then this
         * method can be used to create those.
         *
         * @param {String} n Name of the control to create.
         * @param {tinymce.ControlManager} cm Control manager to use inorder to create new control.
         * @return {tinymce.ui.Control} New control instance or null if no control was created.
         */
        createControl : function(n, cm)
        {
            return null;
        },

        /**
         * Returns information about the plugin as a name/value array.
         * The current keys are longname, author, authorurl, infourl and version.
         *
         * @return {Object} Name/value array containing information about the plugin.
         */
        getInfo : function()
        {
            return {
                longname    : 'PlugoBrowser',
                author      : 'Plugo s.r.o.',
                authorurl : 'http://www.plugo.cz',
                infourl     : 'http://www.plugobrowser.com',
                version     : '1.0'
            };
        }
    });

    // Register plugin
    tinymce.PluginManager.add('plugobrowser', tinymce.plugins.PlugoBrowserPlugin);
})();

my configuration

stfalcon_tinymce:
    external_plugins:
        filemanager:
            url: "asset[bundles/acmeplugobrowser/js/editor_plugin.js]"
    theme:
        advanced:
            theme: "advanced"
            plugins: "-filemanager,table,advhr,advlink,paste,xhtmlxtras"
            theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,forecolor,backcolor,|,hr,removeformat,|,sub,sup,|,spellchecker"
            theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,undo,redo,|,link,unlink,anchor,cleanup,code,|,tablecontrols"
            theme_advanced_buttons3: ""
            theme_advanced_toolbar_location: "top"
            theme_advanced_toolbar_align: "left"
            theme_advanced_statusbar_location: "bottom"
            theme_advanced_resizing: true

[fluxuator]

Hi @Blackskyliner. Sorry for the late answer. I coudn't reproduce this bug. External plugins are works for me. But I didn't check how bundle works with this PlugoBrowser as I haven't this one. If you want and can send me please its zipped source to my email fluxuator [at] gmail.com to help you. Thanks.

[charlie-wasp]

What if external plugin dwells not in the bundle? For example, I want to use this plugin https://github.com/CogniStreamer/tinyMCE-mention/

So I include this repository to my Composer dependencies, and now this is unreachable from config.yml. How can I resolve this?

[Blackskyliner]

I think you would need to link it to your web/ path manually (or va deploy or composer script). after that you may use the asset[] function in the config to "resolve" the path.

[charlie-wasp]

Yes, I think you are right, I hoped, there is other solution. Finally, I move it to the bundle, but now I can't update this plugin independently

[Blackskyliner]

Well then, don't move it. Just symlink it in your web through an composer deployment script. just do something like:

    "scripts": {
        "post-install-cmd": [
            "ln -s vendor/path/to/bundle/public web/vendors/think/of/some/path"
        ],
        "post-update-cmd": [
            "ln -s vendor/path/to/bundle/public web/vendors/think/of/some/path"
        ]
    },

then you may use

stfalcon_tinymce:
    external_plugins:
        filemanager:
            url: "asset[vendors/think/of/some/path/js/my_plugin.js]"

or manage your JS dependencies through bower with an .bowerrc pointing to web/vendors and call bower install via composer scripts as shown above

[charlie-wasp]

Thank you very much for advice and code!

[Blackskyliner]

Just wanted to note, if you don't want to introduce the bower dependency you may also use: https://github.com/RobLoach/component-installer which does the symlinking of components/* but it's not as versatile as bower especially in package versions and available components...