Is it feasible to build a central "Text editor settings" control module?

@researchcooperative
6 years ago
694 posts

1. I have the impression that the text editors used in different parts of the JR system have been pulled in from different places, and are not unified in the range of font sizes offered (and perhaps also not in the range of styles offered... sorry, I have not checked).

2. The editors also seem to use "Open Sans" as a default, but "Open Sans" does not appear in the font-style drop down list. This means that if I convert a text to another font to see how it looks, I cannot convert back to Open Sans.

3. What I would like is a centralised control panel (a "Text editor settings" module?) that tells all the editor-related widgets:

(a) what range of font sizes should be shown on all editors,
(b) what font styles should be made available from those that JR offers as default, and
(c) what the default font size and style settings should be for the entire site, inside all text boxes, whether an editor is provided or not.

This way, it would be possible to create a standard look across the entire site without having to learn and visit all the nooks and crannies where code has to be changed in order to change font options in the text editors.

In the end, I would like to easily select a range of font sizes that is more likely to be useful for my particular site. At present we have some common small fonts, up to 12, and then there is a big leap to large font sizes:

8, 9, 10, 11, 12, 26, 36 (seven choices provided)

I would like to have text editors that show font sizes of:

10, 11, 12, 14, 16, 18, 20 (seven choices wanted)

I think for readability of larger text areas, font sizes in the range 10-14 are most likely to be needed.
Below 10 is way too small for most purposes, and the sudden jumps -- from 12 to very large (26) and enormous (36) -- skip sizes that are more likely to be useful (in my book, so to speak).

--
PJ Matthews, Kyoto
Migrated from Ning 2.0. Now at Jamroom 6 beta and using Jamroom Hosting for The Research Cooperative (researchcooperative.org)
updated by @researchcooperative: 03/10/19 12:09:06AM

@paul
6 years ago
4,326 posts

I think all the editor tool options, wherever it is used, are in the Core form_editor.tpl template.
Can you point me to places where there are differences so that I can check it out?
Thanks

--
Paul Asher - JR Developer and System Import Specialist

@researchcooperative
6 years ago
694 posts

Thanks. I've just now resurveyed the font scene...

The following areas all offer the font sizes 8, 9, 10, 11, 12, 26, and 36: Blog, Comments, Pages, Forum, Group description, Documentation, Comments.

The Site Builder text editor is different: 8, 10, 12, 14, 18, 24, and 36.

I've actually used 26 as a heading in a blog post. Some people might want 36 occasionally. Perhaps if the JR default options were to be unified for all text editors, the range should be 8, 9, 10, 11, 12, 14, 18, 24, 26, 36 (ten choices).

On my site, if I could easily set the range to ten choices, with a central font control setting, I might choose:

10, 11, 12, 14, 16, 18, 20, 22, 24, 26

I think at present, JR has provided text editors in all the public-facing areas where they are needed, and avoided them in areas where it is good to have a single default.

--
PJ Matthews, Kyoto
Migrated from Ning 2.0. Now at Jamroom 6 beta and using Jamroom Hosting for The Research Cooperative (researchcooperative.org)

@paul
6 years ago
4,326 posts

I'm seeing 8, 10, 12, 14, 18, 24, and 36 in all text editors, including Blog and SiteBuilder, with 11 as default.

I notice that if selecting a different size, it works but then reverts to 11 upon the return key. The same when selecting fonts, with a return taking it back to the default Open Sans.

I've never had an issue with it working this way as I always just type at first, then format the text.

--
Paul Asher - JR Developer and System Import Specialist

@researchcooperative
6 years ago
694 posts

Here are two screenshots, one for a Blog entry, one for a Sitebuilder text html widget

Thanks

--
PJ Matthews, Kyoto
Migrated from Ning 2.0. Now at Jamroom 6 beta and using Jamroom Hosting for The Research Cooperative (researchcooperative.org)

@researchcooperative
6 years ago
694 posts

paul:
I'm seeing 8, 10, 12, 14, 18, 24, and 36 in all text editors, including Blog and SiteBuilder, with 11 as default.

I notice that if selecting a different size, it works but then reverts to 11 upon the return key. The same when selecting fonts, with a return taking it back to the default Open Sans.

I've never had an issue with it working this way as I always just type at first, then format the text.

This works if you write a text, format the text, and then have no wish to return that text to the default font.

If you do want to take the existing text back to Open Sans, it has to be completely rewritten. It can't be selected and reformatted with the default.

Indecisive perfectionists have a problem here.

Perfect decision makers don't!

--
PJ Matthews, Kyoto
Migrated from Ning 2.0. Now at Jamroom 6 beta and using Jamroom Hosting for The Research Cooperative (researchcooperative.org)

@michael
6 years ago
7,714 posts

The request is "A way to remove any text formatting done in the editor"?

There's this button:
https://stackoverflow.com/questions/21159778/clear-formatting-button-in-tinymce

To set it up for the blog post editor, the file you want to adjust is jrCore 'form_editor.tpl' and where it reads:

    toolbar1: "formatselect | fontselect fontsizeselect forecolor

change it to

    toolbar1: "removeformat | formatselect | fontselect fontsizeselect forecolor

@researchcooperative
6 years ago
694 posts

Re Michael's advice... Having an easy way to remove text formatting in the editor would be useful (and a lot easier than using copy and paste into the text editor of an external email program to use the formatting removal button there). It could be useful as a standard feature for many site users because it is a common action to copy text from a formatted source into a post. Removing all previous formatting can make it easier to apply new formatting.

However, my no. 2 question above was really how to format a block of text in Open Sans after it has been formatted in something else. Open Sans is not in the drop-down list. It is only available as the automatic default. It is a good default font, but is there any reason why it cannot join the other fonts in the drop-down list?

My no. 1 issue above seems to have been solved. Since I first wrote, there has been update of the tinymice editor in one of the modules, and now I am seeing the same default font options in Sitebuilder as in other areas of the system. I don't know if this is because of the module update, but in any case THANKS!

Re no. 3 question about a "centralised control panel for default text editor settings"... That was a big ask I suppose, as there has been no reply to that part of the post (sorry for making a complicated post).

I am happy enough with the default size range that is now everywhere the same (8, 9, 10, 11, 12, 26, and 36). I would tweak it if I could do so easily (with an editor settings control panel) but this is not an urgent matter. The default range of font styles is also good for my purposes.

--
PJ Matthews, Kyoto
Migrated from Ning 2.0. Now at Jamroom 6 beta and using Jamroom Hosting for The Research Cooperative (researchcooperative.org)

@michael
6 years ago
7,714 posts

If "Open Sans" is not in the list, then it must be the default. If its the default then removing the formatting would return it to the default.

#3 a search for "tinymce adjust avaialbe font sizes" turned up this:
https://stackoverflow.com/questions/20183796/tinymce-4-how-change-font-size-styles
which suggests adding this to your form_editor.tpl file

 fontsize_formats: "8pt 9pt 10pt 11pt 12pt 26pt 36pt",

Strumelia
@strumelia
6 years ago
3,603 posts

I am trying to add that "remove format" button to my tinymce text editor using Michael's suggestion above.
I'm also trying to add a fontsize selector menu as per instructions above.
Both things I've been trying in my jrcore: form_editor.tpl template.
I've done such button adding in the past successfully, so I'm not sure why neither of these new tweaks is resulting in the menus/buttons showing this time.
Here is my current form_editor.tpl code, with both the font size selector and the format remover codes added in, but they're not working for me:

{jrCore_module_url module="jrCore" assign="murl"}
{jrCore_module_url module="jrImage" assign="imurl"}
tinymce.init({
    setup: function(ed) {
        var mce_body_fs = $('body').width();
        ed.on('FullscreenStateChanged', function(e) {
            if (e.state === true) { $('.form_editor_holder .mce-fullscreen').width(mce_body_fs); }
            else {
                $('.form_editor_holder .mce-panel').css('width','');
            }
        });
    },
    {if jrCore_is_mobile_device() && !jrCore_is_tablet_device()}
    mobile: { theme: 'mobile' },
    {/if}
    body_id: "{$form_editor_id}",
    branding: false,
    content_css: "{$jamroom_url}/{$murl}/css/{$murl}/jrCore_tinymce.css?v={$_mods.jrCore.module_updated}",
    images_upload_url: "{$jamroom_url}/{$imurl}/tinymce_imagetools",
    valid_elements : '*[*]',
    toolbar_items_size : "small",
    element_format: "html",
    fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
    autoresize_bottom_margin: "3",
    keep_styles: false,
    theme: "{$theme}",
    selector: "textarea#{$form_editor_id}",
    relative_urls: false,
    remove_script_host: false,
    convert_fonts_to_spans: true,
    menubar: false,
    statusbar: false,
    paste_auto_cleanup_on_paste : true,
    paste_remove_styles: true,
    paste_remove_styles_if_webkit: true,
    paste_strip_class_attributes: true,
    entity_encoding: "raw",
    height: "100%",
    image_advtab: true,
    browser_spellcheck: true,
    {if $table} table_toolbar: "tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | tablecellprops tablesplitcells tablemergecells",{/if}
    {if $script}
    extended_valid_elements: "script[type|defer|src|language]",
    {/if}
    plugins: "lists,imagetools,pagebreak,{if $jrsmiley}jrsmiley,{/if}{if $jrembed}jrembed,media{/if},image,autoresize,{if $table}table,{/if}link,code,fullscreen,textcolor,colorpicker,preview{if $hr},hr{/if},tabindex,paste,anchor",
    toolbar1: "removeformat | formatselect | fontselect fontsizeselect forecolor {if $strong} bold{/if}{if $em} italic{/if}{if $span} underline{/if} removeformat | {if $span || $div} alignleft{/if}{if $span || $div} aligncenter{/if}{if $span || $div} alignright{/if}{if $span || $div} alignjustify |{/if}{if $ul || $ol || $li}{if $ul || $li} bullist{/if}{if $ol} numlist{/if} |{/if}{if $div} outdent indent |{/if} undo redo | link unlink anchor pagebreak{if $table} table{/if}{if $hr} hr{/if} | code preview fullscreen{if $jrembed || $jrsmiley} |{/if}{if $jrembed} jrembed{/if}{if $jrsmiley} jrsmiley{/if}"
});

P.S. I'd like to REMOVE my text editor's "Paragraph" dropdown menu which lists various HEADING styles. I don't really want my members to be able to make their post text in giant Heading1 or Heading2 anyway. I'd rather replace that menu with a simple font size select that has the maximum font size option of 36pt, no headings.

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

@michael
6 years ago
7,714 posts

Your code is correct strumelia. To get rid of the paragraph, remove the 'formatselect'.

Here is your code with that removed:

{jrCore_module_url module="jrCore" assign="murl"}
{jrCore_module_url module="jrImage" assign="imurl"}
tinymce.init({
    setup: function(ed) {
        var mce_body_fs = $('body').width();
        ed.on('FullscreenStateChanged', function(e) {
            if (e.state === true) { $('.form_editor_holder .mce-fullscreen').width(mce_body_fs); }
            else {
                $('.form_editor_holder .mce-panel').css('width','');
            }
        });
    },
    {if jrCore_is_mobile_device() && !jrCore_is_tablet_device()}
    mobile: { theme: 'mobile' },
    {/if}
    body_id: "{$form_editor_id}",
    branding: false,
    content_css: "{$jamroom_url}/{$murl}/css/{$murl}/jrCore_tinymce.css?v={$_mods.jrCore.module_updated}",
    images_upload_url: "{$jamroom_url}/{$imurl}/tinymce_imagetools",
    valid_elements : '*[*]',
    toolbar_items_size : "small",
    element_format: "html",
    fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
    autoresize_bottom_margin: "3",
    keep_styles: false,
    theme: "{$theme}",
    selector: "textarea#{$form_editor_id}",
    relative_urls: false,
    remove_script_host: false,
    convert_fonts_to_spans: true,
    menubar: false,
    statusbar: false,
    paste_auto_cleanup_on_paste : true,
    paste_remove_styles: true,
    paste_remove_styles_if_webkit: true,
    paste_strip_class_attributes: true,
    entity_encoding: "raw",
    height: "100%",
    image_advtab: true,
    browser_spellcheck: true,
    {if $table} table_toolbar: "tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | tablecellprops tablesplitcells tablemergecells",{/if}
    {if $script}
    extended_valid_elements: "script[type|defer|src|language]",
    {/if}
    plugins: "lists,imagetools,pagebreak,{if $jrsmiley}jrsmiley,{/if}{if $jrembed}jrembed,media{/if},image,autoresize,{if $table}table,{/if}link,code,fullscreen,textcolor,colorpicker,preview{if $hr},hr{/if},tabindex,paste,anchor",
    toolbar1: "removeformat | fontselect fontsizeselect forecolor {if $strong} bold{/if}{if $em} italic{/if}{if $span} underline{/if} removeformat | {if $span || $div} alignleft{/if}{if $span || $div} aligncenter{/if}{if $span || $div} alignright{/if}{if $span || $div} alignjustify |{/if}{if $ul || $ol || $li}{if $ul || $li} bullist{/if}{if $ol} numlist{/if} |{/if}{if $div} outdent indent |{/if} undo redo | link unlink anchor pagebreak{if $table} table{/if}{if $hr} hr{/if} | code preview fullscreen{if $jrembed || $jrsmiley} |{/if}{if $jrembed} jrembed{/if}{if $jrsmiley} jrsmiley{/if}"
});

If its not showing up, my guess is you're editing the wrong template.

If you're editing
ACP -> MODULES -> CORE -> SYSTEM CORE -> TEMPLATES -> form_editor.tpl

and its not working, then check for an override at:
ACP -> SKINS -> YOUR SKIN -> TEMPLATES -> jrCore_form_editor.tpl

@researchcooperative
6 years ago
694 posts

Is it possible, in principle, for a user-friendly "text-editor settings module" to carry out these kinds of actions (and cross-checks?) on the template files of other parts of the system?

--
PJ Matthews, Kyoto
Migrated from Ning 2.0. Now at Jamroom 6 beta and using Jamroom Hosting for The Research Cooperative (researchcooperative.org)

@michael
6 years ago
7,714 posts

yes.

Q: Why isn't it done yet?
A: Because what you have there now fairly closely matches the way TinyMce's documents show how to do thing now. So anything you can see works from their docs can reasonably easily be added to the form_editor.tpl file.

If we were to create another interface, the interface would store values in the database, then attempt to turn on/off the values of tinymce in the form_editor.tpl. That file would become much less editable than it is right now. It also probably would not contain all the possible settings of Tinymce:

TinyMce settings docs
https://www.tiny.cloud/docs/configure/

So what you would end up with would be
* An interface that is less configurable than you have now.
* A system that is more complex than you have now.

So if you were to build that, who would benefit.
* People who don't like looking at code.

--edit--
That doesn't mean that you cant build it (or have it built) as a module for yourself. Just saying that it probably wont be offered as a core feature.
updated by @michael: 12/08/18 11:42:58PM

@researchcooperative
6 years ago
694 posts

If what I am suggesting would be more complex to use, or more complex and error-prone at a technical level, then that would be a problem.

The way the TinyMce editor is set up now is certainly easy and functional to use, and I can live with the present default-range of-options provided for users.

Perhaps there is some happy position where there is a loss of technical or potential configurability but an increase in practical configurability for the non-coding administrator. Since I am a non-coder and lack time, the full potential is not available to me unless I pay for the work... and if the default option settings had to be changed again, then I would need to pay again.

What I imagine would be good (for non-coding administrators) is a checklist of default-option settings - for each part of the TinyMce text editor menu (font size, font style, paragraph and header settings, etc). After checking, the choices (e.g. a range of font sizes) would automatically become the default-range-of-options seen by users of the text editor.

Perhaps introducing a meta-control system for the text-editor is something best done by TinyMce itself, if it is something that would help enough people.

[Metaphor: I would like to sell beer, and my display case has space for 10 different kinds, which is enough choice for most beer drinkers. Certain beers just don't get sold. However, in order to change the range of beer on offer, I have to go and brew the beer myself, though my only skill is selling beer, and even that is just a part-time job that I do] [Long live the professional brewers!].

In any case, thanks for the all the comments and advice so far.

--
PJ Matthews, Kyoto
Migrated from Ning 2.0. Now at Jamroom 6 beta and using Jamroom Hosting for The Research Cooperative (researchcooperative.org)
updated by @researchcooperative: 12/09/18 01:08:15AM

Strumelia
@strumelia
6 years ago
3,603 posts

michael:
If its not showing up, my guess is you're editing the wrong template.
If you're editing
ACP -> MODULES -> CORE -> SYSTEM CORE -> TEMPLATES -> form_editor.tpl
and its not working, then check for an override at:
ACP -> SKINS -> YOUR SKIN -> TEMPLATES -> jrCore_form_editor.tpl

You know, that occurred to me after I posted, but i didn't think I had a custom override template for that one... but I did have one!
I applied the changes to the skin template, and all now is as I wanted. Thanks for pointing out what should have been obvious to me by now (to always check for an override template in my custom skin if a code change in the module template doesn't have any effect). :-p

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
updated by @strumelia: 12/10/18 07:05:01AM

@michael
6 years ago
7,714 posts

@strumelia

nice one!

@researchcooperative
A line of the form_editor.tpl template currently looks like this

    toolbar1: "formatselect | fontselect fontsizeselect forecolor {if $strong} bold{/if}{if $em} italic{/if}{if $span} underline{/if} removeformat | {if $span || $div} alignleft{/if}{if $span || $div} aligncenter{/if}{if $span || $div} alignright{/if}{if $span || $div} alignjustify |{/if}{if $ul || $ol || $li}{if $ul || $li} bullist{/if}{if $ol} numlist{/if} |{/if}{if $div} outdent indent |{/if} undo redo | link unlink anchor pagebreak{if $table} table{/if}{if $hr} hr{/if} | code preview fullscreen{if $jrembed || $jrsmiley} |{/if}{if $jrembed} jrembed{/if}{if $jrsmiley} jrsmiley{/if}"
});

You can see there are some dynamically set stuff in there, eg:

.....{if $span || $div} alignleft{/if}......

You could use an interface to setup the same structure for every option in there, its possible. but then instead of

    toolbar1: "formatselect | fontselect

you have

    toolbar1: "{if $setting.formselect}formatselect{/if} | {if $setting.fontselect}fontselect{/if}

etc....
so the whole page gets slightly more complex. Then what if you wanted to allow the user to change the order of those to switch them around. Currently to do that you'd change

    toolbar1: "formatselect | fontselect

to

    toolbar1: "fontselect | formatselect

not hard. but to do the same thing from an interface with code is much more complex.

Its good as is. Its not like you're going to change things multiple times, you're likely to do it once then never again for the life of the site.

--edit--
[ Metaphor: A guy buys a set of leggo bricks. He assembles them into the shape of a spacecraft. Everybody knows that a spacecraft needs a bridge. He suggest to leggo that instead of just selling the rectangle plastic blocks they are famous for, that they also sell pre-assembled spacecraft bridge units. because everybody who builds a spacecraft out of leggo is going to need a bridge. Point: if you want a bridge, you can build one. We probably wont be offering that because the segment of the people that require this is too small.]
updated by @michael: 12/09/18 08:22:01PM

@researchcooperative
6 years ago
694 posts

Hmmm... the captain of my spacecraft drinks too much beer while standing on his imaginary bridge looking at stars. I'll go back inside and try to give more attention to the engine room. Thanks.

--
PJ Matthews, Kyoto
Migrated from Ning 2.0. Now at Jamroom 6 beta and using Jamroom Hosting for The Research Cooperative (researchcooperative.org)

@michael
6 years ago
7,714 posts

Its possible to build. If its a super-necessity get a few people together and sponsor it as a module.