Rich text widget extra plugin

[ShadmanMatchiswala]

Hello Guys,

I am new to apostrophecms, so I don't know the details of this technology. As there is a rich-text widget that uses the CKEditor plugin. So I have followed the instructions from the following URL to add an external plugin:

https://docs.apostrophecms.org/howtos/ckeditor.html#global-ckeditor-configuration

I am trying to add below plugin from CKEditor: https://ckeditor.com/docs/ckeditor4/latest/features/sourcearea.html

When I have completed all the steps it doesn't show any error and not showing the plugin in the toolbar.

So please help me.

[abea]

@ShadmanMatchiswala Would you share the code from your attempted implementation?

[ShadmanMatchiswala]

@abea Please let me know about the CKEditor toolbar configurations which are available in https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic.

Is it feasible to use an apos-richtext widget?

Please help me in the integration of the tools.

[abea]

We have not tested out adding every tool from that page. Most should work correctly. If you share your code from when you added the sourcearea tool we might be able to offer a suggestion.

[ShadmanMatchiswala]

Hello @abea, I have set up a new repo for this issue. Please let me know where I am doing a mistake.

https://github.com/ShadmanMatchiswala/Apostrophecms-Ckeditor-Plugin/tree/develop

[abea]

Unfortunately I'm not seeing the problem, but this is a more complicated configuration. I'd suggest looking at the merge tags or permalinks modules. They both add CKEditor tools and might help you figure out is missing in your project:

• https://github.com/apostrophecms/apostrophe-rich-text-merge-tags
• https://github.com/apostrophecms/apostrophe-rich-text-permalinks

[ShadmanMatchiswala]

Thank you @abea for the reply, but this solution won't work for me. Let me show you an example that I want to achieve in a rich-text editor:

<h3 class="text-primary"><strong>This is a <span class="text-success h2">rich-text</span> example.<span class="text-danger"> I am facing issue with plugins.</span></strong></h3>

As the above code is simple HTML which has a combination of tags inside h3. So I have checked all the possibilities to generate such kinds of tags in the apostrophe rich-text editor but can't succeed. As it uses the CKEditor so the option is to use the sourceare plugin which allows me to generate any kind of HTML tag without using the styling tags.

Please let me know if any case that helps me to generate the provided tag.

[stuartromanek]

Hi @ShadmanMatchiswala You can achieve your layered rich text example using the following configuration, without the need for additional plugins:

In your project level lib/modules/apostrophe-rich-text-widgets/index.js

module.exports = {
  sanitizeHtml: {
    allowedClasses: {
      'h3': ['text-primary'],
      'span': ['text-success', 'h2', 'text-danger']
    },
    allowedTags: [
      'span', 'h3'
    ]
  }
};

Then you're area/singleton config

{{ apos.area(data.page, 'test', {
  widgets: {
    'apostrophe-rich-text': {
      toolbar: [ 'Styles', 'Bold' ],
      styles: [
        { name: 'Headline (H3)', element: 'h3', attributes: { class: 'text-primary' } },
        { name: 'Danger (span)', element: 'span', attributes: { class: 'text-danger' } },
        { name: 'Success (span)', element: 'span', attributes: { class: 'text-success' } },
        { name: 'H2 Span (span)', element: 'span', attributes: { class: 'h2' } },
        { name: 'Combo Span (span)', element: 'span', attributes: { class: 'h2 text-success text-danger' } }
      ]
    }
  }
}) }}

You can then apply the spans and strongs through individual styling. CKEditor's UI around mixing block level and inline styles is a little unintuitive, if you haven't implemented inline tags before you might not notice the second tier of options, which can be layered. In the above screenshot you can see style dropdown has 3 tags applied to the current selection (obscured by the dropdown itself I am highlighting 'rich text' from your example above)

Edit: Remembering you opened this issue because you wanted to implement a 3rd party CKE plugin, which I didn't address at all but hopefully this is useful 😅

[ShadmanMatchiswala]

Hello @stuartromanek,

Thank you for this quick reply and suggestions. In my last comment, I have just shown a demo HTML code that I want to achieve through the CKEditor. So there no fixed type of styling which I want to implement. In any case, there may be the possibility for multiple tags that I want to give bootstrap classes.

I have just researched that the sourcearea is the default feature of the CKEditor.

So please let me know if the sourceare is achievable to implement or not. If this feature is not in apostrophe rich-text then let me know where is the issue in the code.

[abea]

If you can specify certain text styles as @stuartromanek suggested that would be best. It sounds like you may not be able to do that.

You should be able to add the sourcearea plugin. I was not suggesting that you use those two module. I was suggesting that you look at how they are built. Both add CKEditor plugins, like you are trying to do, and they might provide good examples to follow.

We have not added sourcearea in Apostrophe ourselves, so I can't tell you exactly how to do it, but if it's a compatible CKEditor plugin it should be possible.