1 Reply Latest reply on Sep 28, 2010 5:13 PM by Chris Dollar

    rich:editor and custom plugins

    Chris Dollar Novice

      I'm using the RF developer docs trying to get a custom plugin working with the rich:editor tag (TinyMCE). I'm starting out simple by just using the example plugin from  http://wiki.moxiecode.com/index.php/TinyMCE:Create_plugin/3.x  I've made a couple of edits to the sample code to send some JS alerts. Here is a snip from the beginning of the file:

      {code}

      (function() {
      alert('loading');
      // Load plugin specific language pack
      //tinymce.PluginManager.requireLangPack('pehomelinks');
      tinymce.create('tinymce.plugins.pehomelinks', {
      /**
      * 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) {
      alert('in init');
      alert(url);
      // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceExample');
      ed.addCommand('insertLink', function() {

      (function() {

      alert('loading');

       

      // Load plugin specific language pack

      //tinymce.PluginManager.requireLangPack('pehomelinks');

       

      tinymce.create('tinymce.plugins.pehomelinks', {

      /**

      * 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) {

      alert('in init');

      // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceExample');

      ed.addCommand('insertLink', function() {

       

      {code}

       

      I've created my custom plugin properties file and am using it in my rich:editor tag in my JSF page. When my page loads I can see via firebug that the editor_plugin.js file from the custom plugin is requested, and I get the JS alert 'loading', so I think that part is working. I don't however get the 'in init' alert message, and the editor gets rendered without my plugin.

       

      I thought at first it was because I also needed to add the custom plugin (which I've called 'pehomelinks') into the list of plugins to be loaded. I've tried doing this both by adding it to as a 'plugins="pehomelinks"' to the rich:editor tag and by adding it into my editor configuration properties file. Doing either of these seems to result in the plugin being attempted to be loaded (as observed in firebug) from a4j/g/3_3_3.Finalscripts/tiny_mce/plugins/pehomelinks/editor_plugin_src.js which results in a 500 server error. The path I have for the plugin in my plugin properties file is: pluginName=/plugins/pehomelinks/editor_plugin.js

       

      Based off of this, am I doing something wrong to get my plugin enabled, or is this a bug with using custom plugins? This is my first attempt at using a custom TinyMCE plugin so its very possible that I could just be doing something wrong, but I'm not sure what to try next.

       

      Any ideas???

      Thanks all!

      Chris

       

      ps... I'm not sure whether this is related or not to my main issue, but if I uncomment the tinymce.PluginManager.requireLangPack line as shown in the code snippit above it causes the lang pack file to be requested from https://mydomain/PermitExpress/content/undefined/langs/en.js according to firebug. Given that I told RF that my custom plugin was pluginName=/plugins/pehomelinks/editor_plugin.js in the properties file I expect it to be pulling the lang pack file from https://mydomain/PermitExpress/plugins/pehomelinks/langs/en.js . Any ideas on this one as well???

       

       

        • 1. Re: rich:editor and custom plugins
          Chris Dollar Novice

          Got it figured out... my issue was with my custom plugin's properties file. I had the line:

          pluginName=/plugins/pehomelinks/editor_plugin.js

           

          Since I named my plugin 'pehomelinks' that line should read:

          pehomelinks=/plugins/pehomelinks/editor_plugin.js

           

          After making that change the plugin loads correctly!

           

          Chris