HTML editor configuration

Forum to discuss the Web client version of Servoy.

HTML editor configuration

Postby jdbruijn » Mon May 05, 2014 10:17 am

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.
Jos de Bruijn
Welcome CCS
Servoy Certified Developer
Image
jdbruijn
 
Posts: 445
Joined: Sun Apr 11, 2010 6:34 pm

Re: HTML editor configuration

Postby jdbruijn » Mon May 05, 2014 5:18 pm

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"}')
Jos de Bruijn
Welcome CCS
Servoy Certified Developer
Image
jdbruijn
 
Posts: 445
Joined: Sun Apr 11, 2010 6:34 pm

Re: HTML editor configuration

Postby steve1376656734 » Thu Jan 15, 2015 8:30 pm

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
Steve
SAN Developer
steve1376656734
 
Posts: 179
Joined: Fri Aug 16, 2013 2:38 pm
Location: Lanzarote

Re: HTML editor configuration

Postby jdbruijn » Fri Jan 16, 2015 10:28 am

Can you give me a code sample of your configuration settings?
Jos de Bruijn
Welcome CCS
Servoy Certified Developer
Image
jdbruijn
 
Posts: 445
Joined: Sun Apr 11, 2010 6:34 pm

Re: HTML editor configuration

Postby steve1376656734 » Fri Jan 16, 2015 12:09 pm

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
Last edited by steve1376656734 on Fri Jan 16, 2015 12:44 pm, edited 1 time in total.
Steve
SAN Developer
steve1376656734
 
Posts: 179
Joined: Fri Aug 16, 2013 2:38 pm
Location: Lanzarote

Re: HTML editor configuration

Postby jdbruijn » Fri Jan 16, 2015 12:32 pm

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.
Jos de Bruijn
Welcome CCS
Servoy Certified Developer
Image
jdbruijn
 
Posts: 445
Joined: Sun Apr 11, 2010 6:34 pm

Re: HTML editor configuration

Postby steve1376656734 » Fri Jan 16, 2015 12:43 pm

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

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
Steve
SAN Developer
steve1376656734
 
Posts: 179
Joined: Fri Aug 16, 2013 2:38 pm
Location: Lanzarote

Re: HTML editor configuration

Postby jdbruijn » Fri Jan 16, 2015 1:11 pm

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.
Jos de Bruijn
Welcome CCS
Servoy Certified Developer
Image
jdbruijn
 
Posts: 445
Joined: Sun Apr 11, 2010 6:34 pm

Re: HTML editor configuration

Postby steve1376656734 » Fri Jan 16, 2015 1:23 pm

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
Steve
SAN Developer
steve1376656734
 
Posts: 179
Joined: Fri Aug 16, 2013 2:38 pm
Location: Lanzarote


Return to Servoy Web Client

Who is online

Users browsing this forum: No registered users and 2 guests