HTML editor configuration

[jdbruijn]

In Servoy 7.4 we have a new HTML editor for the webclient. According to the documentation I should be able to configure it using the app constant, but I cannot get the 'code' button to show in my toolbar.
I've tried the following options:

Code: Select all

elements.vHTML.putClientProperty(APP_UI_PROPERTY.HTML_EDITOR_CONFIGURATION, '{plugins: "code"}');

elements.vHTML.putClientProperty(APP_UI_PROPERTY.HTML_EDITOR_CONFIGURATION, '{toolbar: "code"}');

elements.vHTML.putClientProperty(APP_UI_PROPERTY.HTML_EDITOR_CONFIGURATION, '{menu: {tools: {title: "Tools", items: "code"}}}');


The first 2 options result in no toolbar at all and the last option just shows the default toolbar, not the menu bar with the tools item I defined.

[jdbruijn]

Everything has to be in the same line, so it has to look something like this:

Code: Select all

putClientProperty(APP_UI_PROPERTY.HTML_EDITOR_CONFIGURATION, '{external_plugins: { "code": "../../../tinymce/plugins/code/plugin.min.js", "table": "../../../tinymce/plugins/table/plugin.min.js"}, toolbar1: "fontselect fontsizeselect styleselect table", toolbar2: "copy paste | bold italic underline | undo redo alignleft aligncenter alignright | outdent indent bullist numlist | hr | code"}')

[steve1376656734]

Hi,

I have tried using the configuration above but cannot get the plugins to load. If I try accessing the js files directly using http://localhost:8080/servoy-webclient/ ... gin.min.js I get a tomcat error for all the ones I try apart from resizetocontainer and tabindex which are two of the default ones that are loaded by the unconfigured editor. Is there any way of finding out which plugins are available and also can I override the basic tinyMCE version with a custom one in order to get the latest bug fixes?

Thanks
Steve

[jdbruijn]

Can you give me a code sample of your configuration settings?

[steve1376656734]

Hi Jos,

The code I am trying to use is:

Code: Select all

/**
* Configure the TinyMCE editor to add the code, table, image, media, link, horizontal rule and date & time functions
*
* @param {*} element
* @param {Number} [editorType]
* @param {Number} [editorModifier]
*
* @properties={typeid:24,uuid:"0EDEDABA-AAFC-4C36-98D2-BD5AAB6027CF"}
*/
function configureHTMLEditor(element, editorType, editorModifier) {
  if (editorType === undefined) editorType = scopes.tmleWebUtilities.EDITOR_TYPE.SERVOY;

  var externalPlugins = '';
  var menu = '';
  var toolbar = '';

  switch (editorType) {
    case scopes.tmleWebUtilities.EDITOR_TYPE.SERVOY:
      break;

    case scopes.tmleWebUtilities.EDITOR_TYPE.BASIC:
      externalPlugins = '    external_plugins: { \
      } ';
      toolbar = '  toolbar: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | indent outdent | bullist numlist" ';
      break;

    case scopes.tmleWebUtilities.EDITOR_TYPE.INTERMEDIATE:
      externalPlugins = '  external_plugins: { \
                  table : "  ../../../tinymce/plugins/table/plugin.min.js", \
                  image : "  ../../../tinymce/plugins/image/plugin.min.js", \
                  link  : "  ../../../tinymce/plugins/link/plugin.min.js" \
                } ';
      toolbar = '  toolbar:   "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | indent outdent | bullist numlist | link unlink | image | table" ';
      break;

    case scopes.tmleWebUtilities.EDITOR_TYPE.ADVANCED:
      menu = 'menubar: true, \
        menu : { \
              edit   : {title : "Edit"  , items : "undo redo | cut copy paste pastetext | selectall"}, \
              insert : {title : "Insert", items : "link image | template hr insertdatetime"}, \
              view   : {title : "View"  , items : "visualaid"}, \
              format : {title : "Format", items : "bold italic underline strikethrough superscript subscript | formats | removeformat"}, \
              table  : {title : "Table" , items : "inserttable tableprops deletetable | cell row column"}, \
              tools  : {title : "Tools" , items : "spellchecker code"} \
          } ';
      externalPlugins = '  external_plugins: { \
                  code           : "  ../../../tinymce/plugins/code/plugin.min.js", \
                  table          : "  ../../../tinymce/plugins/table/plugin.min.js", \
                  image          : "  ../../../tinymce/plugins/image/plugin.min.js", \
                  hr             : "  ../../../tinymce/plugins/hr/plugin.min.js", \
                  insertdatetime : "  ../../../tinymce/plugins/insertdatetime/plugin.min.js", \
                  paste          : "  ../../../tinymce/plugins/paste/plugin.min.js", \
                  fullscreen     : "  ../../../tinymce/plugins/fullscreen/plugin.min.js", \
                  link           : "  ../../../tinymce/plugins/link/plugin.min.js" \
                } ';
      toolbar = '  toolbar:   "undo redo | pastetext | fontsizeselect | bold italic underline | alignleft aligncenter alignright alignjustify | indent outdent | bullist numlist | link unlink | image | table | hr insertdatetime code fullscreen" ';
      break;
  }

  var configString = '{ \
    browser_spellcheck: true ' + (inbuiltPlugins ? ',' + inbuiltPlugins : '') + (externalPlugins ? ',' + externalPlugins : '') + (menu ? ',' + menu : '') + (toolbar ? ',' + toolbar : '') + '}';

  element.putClientProperty(APP_UI_PROPERTY.HTML_EDITOR_CONFIGURATION, configString);
}

Using the above the editor fails to initialise and I get a standard text field displayed on the screen. If I download a copy of TinyMCE V4.0.20, place it in the ROOT folder in a folder called "tinymce_test" and change all the path references above from "../../../tinymce" to "/tinymce_test" then everything works as expected.

Also when I try to access the plugins directly in the browser using the built-in copy of TinyMCE (using a URL such as http://localhost:8080/servoy-webclient/resources/tinymce/tinymce.min.js and http://localhost:8080/servoy-webclient/resources/tinymce/plugins/tabindex/plugin.min.js then these work just fine and the .js file is shown but if I try http://localhost:8080/servoy-webclient/resources/tinymce/plugins/table/plugin.min.js then I get a Tomcat error saying the requested resource is not available. From that I am guessing that the version of TinyMCE built into Servoy is missing a lot of the standard plugins but there is no way that I can see to find out which ones are there and which aren't (without trying each one individually!).

Finally I need to upgrade the version of TinyMCE being used to the latest in order that we can have the users set vertical alignment on table cells without having to go into the raw HTML code and so far I can't see any way of doing this - any ideas?

Thanks
Steve

[jdbruijn]

What is the folder structure where you have placed the plugins?

Also I don't think you can update the tinymce version, I think that can only be done by Servoy.
But maybe someone from Servoy can answer that for you.

[steve1376656734]

I thought it would probably be only Servoy that could update the bundled version but one can live in hope

I placed all the files from the js folder of the downloaded version of TinyMCE into /home/servoy/application_server/server/webapps/ROOT/tinymce_test and everything works perfectly but my question really is why can't I access the plugins on the bundled version - it seems that they don't exist apart from the tabindex and resizetocontainer ones.

The biggest problem I had was figuring out which version of TineMCE to download as the version has to match the bundled one as the tinymce.min.js is always the bundled version and if you use plugins from a later version you end up with all sorts of problems (as I found out the hard way!)

Maybe I should raise a case in Jira to find out why the bundled one doesn't have all the standard plugins?

Thanks
Steve

[jdbruijn]

I've got all the extra plugins that I needed in ROOT/tinymce/plugins. That way I can add only those plugins that i want to have in my solution instead of having all the plugins available.
I've used tinymce version 4.0.16 as base for all the plugins that i've included.

[steve1376656734]

Sounds like you have done the same as me then with downloading your own plugins to the ROOT directory. Seems strange that the bundled version has some of the plugins available but not others. I based my installation on V4.0.20 as this is the major and minor version number that I found in the tinymce.min.js that is downloaded from the bundled installation.

Since my last post I have been experimenting and have managed to get the latest version working by adding a call in my onSolutionOpen routine to:

Code: Select all

scopes.svyWebClientUtils.addJavaScriptDependancy('/tinymce_4.1.7/tinymce.min.js');


and then updating my editor configration routine to use the /tinymce_4.1.7 path for the plugins. This seems to have overridden the built in version and I have had no issues so far. I'll continue my testing and post any gotchas here in case anyone is interested.

Thanks for your help/advice.
Steve