Adding Plugins to TinyMCE/WYSIWYG field

[rdavis11]

Hello all,

Been trying to get this working for a bit but seem to have run into a wall. I have gone and added a new field in the Notes module for using a WYSIWYG field for additional formatting. I am happy with the TinyMCE editor that it provides (was also experimenting with converting the default Description field into using the HTML editor), but I would like to add some TinyMCE plugins to the field, specifically the Lists plugin. After viewing the source code, it looks like the lists plugin is already installed in the app, but no matter what I try (adding plugin to SugarTinyMCE.php default plugins, etc.) it does not add it in. I am not sure if I am missing a simple step but I can’t seem to find any reference of it on the forums aside from this post which is referencing the Email Template module which unfortunately does not help in this case.

Currently using SuiteCRM 8.2.1 deployed via Bitnami’s helm chart, have root access to the backend. Even through many Repair and Rebuilds and cache clears for all of the changes, still no results. Perhaps in the future if there is an option to have config settings for TinyMCE available via config file(s) that would help further customize the application.

Any help would be greatly appreciated!

[abuzarfaris]

Hey you will have to modify/override this file
public/legacy/include/SugarFields/Fields/Wysiwyg/SugarFieldWysiwyg.php

copy this file to
public/legacy/custom/include/SugarFields/Fields/Wysiwyg/SugarFieldWysiwyg.php

[rdavis11]

Thank you so much for the help, after a Quick Repair and Rebuild this was the solution to my problem! I am now able to see the bullet/number lists in the editor, also added in advlist to improve the functionality.

[chancks]

Here is the screenshot of the TinyMCE WYSIWYG editor under Opportunities:

[chancks]

Hi abuzarfaris,

I have the same problem as rdavis11, except that I’m adding a WYSIWYG field under Opportunities instead of Notes module. The TinyMCE editor looks very different and has a different toolbar. I searched high and low for the equivalent PHP and JS file to edit to insert bullist and numlist (which is what i need to add in) but I cannot find the right file. I hope you can give some advice to me, thanks!

[abuzarfaris]

Hey

the Opportunities module is rendered in the New Angular UI hence the above mentioned changes are not effective for this module.

For making changes in the TinyMCE in Opportunites module you need to make changes in this file
config/services/ui/ui.yaml

This is upgrade Un safe method. I don’t know the upgrade method right now.
You will need to clear the cache after making changes to this file

[chancks]

Hi abuzarfaris,

Thanks for the quick response, but if config/services/ui/ui.yaml is indeed the right place to make the changes, it seems like it’s already configured for bullist and numlist as I can find the following within the YAML file:

    plugins:
      - 'advlist autolink lists link image charmap print preview anchor'
      - 'searchreplace visualblocks code fullscreen'
      - 'insertdatetime media table paste code help wordcount'
    toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify |  bullist numlist outdent indent | removeformat | help'

Could you suggest to me how I can enable bullist and numlist? I have pasted the contents of ui.yaml below, thanks!

parameters:
ui:
alert_timeout: 3
user_preferences_save_delay: 500
loading_display_delay: 900
table_loading_display_delay: 800
modal_buttons_collapse_breakpoint: 4
list_max_entries_per_record_thread: 10
tinymce:
edit:
base_url: ‘./dist/tinymce’
suffix: ‘.min’
modelEvents: ‘change’
ignoreEvents: “onKeyDown,onKeyPress,onKeyUp,onSelectionChange”
height: 500
deprecation_warnings: false
menubar: false
plugins:
- ‘advlist autolink lists link image charmap print preview anchor’
- ‘searchreplace visualblocks code fullscreen’
- ‘insertdatetime media table paste code help wordcount’
toolbar: ‘undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help’
toolbar_mode: ‘floating’
mobile:
theme: ‘mobile’
detail:
base_url: ‘./dist/tinymce’
suffix: ‘.min’
deprecation_warnings: false
readonly: true
toolbar: false
menubar: false
statusbar: false
inline: true
navigation_max_module_recently_viewed: 5
navigation_max_module_favorites: 5
global_recently_viewed: 10
subpanel_max_height: 620
listview_max_height: 0
record_modal_max_height: 620
inline_confirmation_loading_delay: 300
group_field_mobile_breakdown_limit: 350
multiselect_max_number:
XSmall: 20
Small: 20
Medium: 20
Large: 20
XLarge: 20
displayed_quick_filters:
XSmall: 0
Small: 4
Medium: 2
Large: 3
XLarge: 5
quick_filters_breakdown_threshold:
XSmall: 0
Small: 4
Medium: 2
Large: 3
XLarge: 5
enable_quick_filters:
XSmall: false
Small: true
Medium: true
Large: true
XLarge: true
quick_filters_breakdown_screen_sizes:
XSmall: true
Small: true
Medium: false
Large: false
XLarge: false
widget_swap_screen_sizes:
XSmall: true
Small: true
Medium: false
Large: false
XLarge: false
navbar_truncate_character_sizes:
minLength: 10
mediumLength: 16
maxLength: 22
validations:
regex:
phone: “^([\+]?|00)((([(]{0,1}\s*[0-9]{1,4}\s*[)]{0,1})\s*)|([\-\s\./#x0-9]))+$”
email: ‘^(?:[.-+&#!$*=?^_`{}~/\w]+)@(?:(?:\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3})|\w+(?:[.-]\w+)(?:.[\w-]{2,})+)$’

[chancks]

Finally solved my own problem. abuzarfaris is right, config/services/ui/ui.yaml is the right place to change for WYSIWYG/TinyMCE Editors under Opportunities module.

The plugins section has to be changed to one line to make it work:
plugins: ‘advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste code help wordcount’

The previous dashed format did not allow the plugins to be loaded and that was why bulleted and numbered lists were not available.

Also, under toolbar, “formatselect” has become “blocks” and need to be replaced to make it work:
toolbar: ‘undo redo | blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help’

[chancks]

I forgot to mention: Need to do Quick Repair & Rebuild, Logout and Login, for the modified ui.yaml to take effect.

[afatac]

Hi @chancks , thank you very much for sharing your findings.

I have a question. Do you know if it is possible to duplicate the original ui.yaml file and modify it in a custom directory, instead of editing the original file directly?

[pgr]

@afatac I believe all Symfony parameters are configurable from the extensions/defaultExt directory.

SuiteCRM Developer Insights - Overriding Config - SuiteCRM

[afatac]

Hi @pgr , thanks for the link. I have tested and it works!