Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-1947

RichTextFieldFactory should support adding CK editor plugins

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Neutral
    • Resolution: Outdated
    • Affects Version/s: 5.0.3
    • Fix Version/s: None
    • Component/s: None
    • Labels:
    • Patch included:
      Yes

      Description

      I contacted Magnolia a few days back and got help with some code on how to add a plugin into the CKEditor within Magnolia.
      I’ve successfully been able to do so, but I had several difficulties, which I’ll outline here:

      1) I was unable to extend RichTextFieldFactory

      My intention to add additional functionality to the RichTextFieldFactory by extending it failed because the method createFieldComponent.
      I wanted to do something like:

              String path = VaadinService.getCurrentRequest().getContextPath();
              config.addPlugin(ABBR_PLUGIN_NAME,path+ ABBR_PLUGIN_PATH);
              richTextEditor = (MagnoliaRichTextField) super.createFieldComponent();
              richTextEditor.setConfig(config);
      

      but it seems that the plugins must be configured during the attach phase of the MagnoliaRichTextField, not sure why, this is the code from RichTextFieldFactory#createFieldComponent :

              richTextEditor = new MagnoliaRichTextField(config) {
                  @Override
                  public void attach() {
                      super.attach();
                      String path = VaadinService.getCurrentRequest().getContextPath();
                      config.addPlugin(PLUGIN_NAME_MAGNOLIALINK, path + PLUGIN_PATH_MAGNOLIALINK);
      
                      WebBrowser browser = getSession().getBrowser();
                      if (browser.isTouchDevice()) {
                          // MGNLUI-1528: Workaround.
                          richTextEditor.setEnabled(false);
                          richTextEditor.setReadOnly(true);
                          richTextEditor.addStyleName("richtextfield-disabled");
                      }
      
                  }
              };
      

      When adding the plugin there it worked fine, but it means I can’t extend RichTextFieldFactory because I must recreate the private variable richTextEditor.

      2) The plugin file must be in /VAADIN/js/abbr

      It was difficult to understand why the field was failing, my only guess was that the file was in the wrong location. It worked when I put it there (/abbr is because of the plugin name). It was not clear that it is necessary for the file to be in that location.

      Sometimes, not consistently I would get this error, which is what hinted that the file wasn’t being found:

      INFO: Requested resource [/VAADIN/widgetsets/info.magnolia.ui.vaadin.gwt.MagnoliaWidgetSet/ckeditor/plugins/abbr/plugin.js] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.
      

      Attachments:
      I’ll attach two classes, one is my original – failed - attempt and the successful attempt. Hopefully these are useful.

      Regards,

      Ricardo

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              mgeljic Mikaël Geljić
              Reporter:
              rulate Ricardo Ulate
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Date of First Response:

                  Checklists

                  Bug DoR
                  DoD