What if I told you I tried to solve this few years ago: #14456

That's possibly a genius implementation, I don't understand why it didn't take off considering Gutenberg and tons and tons of stuff we could do with just TinyMCE.

What if I told you that you can do that already.

What if I told you that you can do that already.

Like what? Override the default edit buttons and stuff? Why isn't that the default state of TinyMCE?

1. core implementation of tinymce can not be bootstrap only. there are other frontend frameworks
2. there are plugins available for tinymce that add all the bootstrap classes if you want
3. you can add an editor.css to your template and tinymce will use that - if you want to submit one for cassiopeia that would be great
4. sample tinymce snippets etc - this has only just been made usable in joomla 4 and if you wanted to submit some as a pr that would be great

it just adds MORE INLINE CSS, instead of using the proper classes (float-start, mb-3, text-start, text-primary, etc)

see above

Joomla is advertised with full accessibility, but the TinyMCE implemented doesn't have any ARIA attributes to edit in anything it offers in the default Joomla editor plugin

you really should not need to use any aria attributes in an article - can you give an example

adding images requires the user to know the relative path to the image, instead having the Joomla Media Editor connected into the visible interface, also no class fields, just same width, height, source fields, etc

Thats why we have the extra image button

Joomla is advertised with full accessibility, but the TinyMCE implemented doesn't have any ARIA attributes to edit in anything it offers in the default Joomla editor plugin

you really should not need to use any aria attributes in an article - can you give an example

Sure, the most simple example, you add an inline <svg aria-hidden="true"> for a button icon or similar graphic, or an inline <svg aria-label="Some label" role="img"> to some infographics, something that screen readers understand what's what.
If you investigate today's real production websites, you will see no <a> with title anymore, but more and more use aria-label instead. Example: ibm. Really, look around.

Thats why we have the extra image button

Now that's real confusing for users isn't it? What's this for?

core implementation of tinymce can not be bootstrap only. there are other frontend frameworks

This comes back to my question: why use Bootstrap in the first place? Why not have it ready for users at first try, instead force them to install JCE (which is IMO just a re-skinned version of the default plugin) or other mega bloated and hard to maintain editors. If people use something else, like Material Design or none at all, we could have those options too. Out of the box.

• Classic: allows for inline non-framework specific formatting, the one we have now, the basis for all non-registered users, uses no specific formatting or options
• Bootstrap: allows formatting with Bootstrap specific formatting, icons and such
• Material: allows formatting with Material Design specific formatting, icons and such, but that's just a myth, this framework is mostly used for mobile apps and google websites

• you can add an editor.css to your template and tinymce will use that - if you want to submit one for cassiopeia that would be great
• sample tinymce snippets etc - this has only just been made usable in joomla 4 and if you wanted to submit some as a pr that would be great

I would be happy to provide an editor.scss for Cassiopeia and some snippets, but first, the snippets feature we have now needs some restructuring. A basic pop-up with search and an image selection of some kind would work best. Nothing fancy, just simple, smart and bloat free.

Something like that would make everyone happy. This can all be done before J4.1. Together with namespaced templates, color-picker, and other improvements to the core fields, Joomla will feel alive once again.

@thednp please read the PR I linked above #14456 and maybe you can try it using:

https://gist.github.com/dgrammatiko/be9e16814371f43ce99e8dc74ef54e99

This allows you to edit ANY of the default buttons and also create your own styles (eg header 1 with class .h1). The files should be in the front end template's JS folder...

This allows you to edit ANY of the default buttons and also create your own styles (eg header 1 with class .h1). The files should be in the front end template's JS folder...

or do what I said and use the editor.css

As for the title and aria-label - that's a much bigger issue that I'm not going into here - suffice to say neither of them are very useful

or do what I said and use the editor.css

That doesn't cover the styles and the formats. You actually need to change those to be BS compatible and the way to do that is by redefining these objects. I know as I used that thing for ages, it's doable right now if you use a plugin to manipulate the tinyMCE settings (the ones defined with $doc->addScriptOptions)

That doesn't cover the styles and the formats.

It does unless I am doing it very wrong

It does unless I am doing it very wrong

Maybe we're talking about different things here. Let me elaborate what these 2 files will do (breifly):

• formats.json :

{
"alignleft": {
"selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img",
"classes": "left"
  },
}

These will change the align right button from style=align-text: left to class="left"

• sttles.json:

"2": {
"title": "Right",
"icon": "alignright",
"format": "alignright"
      },

This will redefine the styles part and reuse the above formats. The editor.css just changes the appearance, these change the actual functionality

editor.css also allows you to add your own classes

I see now - I was ADDING and you are MODIFYING

editor.css also allows you to add your own classes => true // but it's not the same as having complete control over the markup with just the mouse

I have no idea what you mean

The editor.css gets parsed and all individual style rules have an entry each in the editor format selection, which isn't the same as toggling classes separately based on specific type (line-height, font-size, color, align, etc), something you would have to toggle the editor in source code mode to achieve.

With other words, you change the formatting from say mb-1 and loose text-primary for instance.

editor.css also allows you to add your own classes

Again that's for the appearance, these 2 files will allow you to add new formats or edit current ones to use Bootstrap, Material, tailwind, whatever per button/format

Check what HTML tinyMCE produces right now:

What you'll get with my way:

You can try this by editing plugins/editors/tinymce/tinymce.php and adding after line 570 this:

		// Custom formats, styles
		$scriptOptions['style_formats'] =json_decode('{
"0": {
"title": "Headers",
"items": {
"0": {
"title": "Header 1",
"format": "h1"
      },
"1": {
"title": "Header 2",
"format": "h2"
      },
"2": {
"title": "Header 3",
"format": "h3"
      },
"3": {
"title": "Header 4",
"format": "h4"
      },
"4": {
"title": "Header 5",
"format": "h5"
      },
"5": {
"title": "Header 6",
"format": "h6"
      }
    }
  },
"1": {
"title": "Inline",
"items": {
"0": {
"title": "Bold",
"icon": "bold",
"format": "bold"
      },
"1": {
"title": "Italic",
"icon": "italic",
"format": "italic"
      },
"2": {
"title": "Underline",
"icon": "underline",
"format": "underline"
      },
"3": {
"title": "Strikethrough",
"icon": "strikethrough",
"format": "strikethrough"
      },
"4": {
"title": "Superscript",
"icon": "superscript",
"format": "superscript"
      },
"5": {
"title": "Subscript",
"icon": "subscript",
"format": "subscript"
      },
"6": {
"title": "Code",
"icon": "code",
"format": "code"
      }
    }
  },
"2": {
"title": "Blocks",
"items": {
"0": {
"title": "paragraph",
"format": "p"
      },
"1": {
"title": "Blockquote",
"format": "blockquote"
      },
"2": {
"title": "Div",
"format": "div"
      },
"3": {
"title": "pre",
"format": "pre"
      }
    }
  },
"3": {
"title": "Alignment",
"items": {
"0": {
"title": "Left",
"icon": "alignleft",
"format": "alignleft"
      },
"1": {
"title": "Center",
"icon": "aligncenter",
"format": "aligncenter"
      },
"2": {
"title": "Right",
"icon": "alignright",
"format": "alignright"
      },
"3": {
"title": "Justify",
"icon": "alignjustify",
"format": "alignjustify"
      }
    }
  }
}');
$scriptOptions['formats'] = json_decode('{
"alignleft": {
"selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img",
"classes": "left"
  },
"aligncenter": {
"selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img",
"classes": "center"
  },
"alignright": {
"selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img",
"classes": "pull-right"
  },
"alignfull": {
"selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img",
"classes": "full"
  },
"bold": {
"inline": "span",
"classes": "bold"
  },
"italic": {
"inline": "span",
"classes": "italic"
  },
"underline": {
"inline": "span",
"classes": "underline",
"exact": "true"
  },
"strikethrough": {
"inline": "del",
"classes": "something"
  },
"customformat": {
"inline": "span",
"styles": {
"color": "#00ff00",
"fontSize": "20px"
    },
"attributes": {
"title": "My custom format"
    },
"classes": "example1"
  }
}');

Of course, these 2 entries need to be tightly connected to the front end template's JS folder (these are json files so need to be in a public dir)

@dgrammatiko this should be default in Joomla, since both admin and front-end templates are Bootstrap 5 powered. Along with a simple option to switch between these formats in the plugin options, as I've shown above. In addition, the tinymce folder in a template can not only add sample snippets, but also host these JSON files so that tinymce.php can look for. I imagine this should be the default in Joomla.

How can you add context menu similar to table editing? Is it possible to re-edit a "block" similar to tables? Is that customformat in your sample JSON all about? Thanks

@dgrammatiko this should be default in Joomla

Probably it should have been merged 4 years ago

since both admin and front-end templates are Bootstrap 5 powered

I disagree that by default tinyMCE should be tightly coupled to Bootstrap. As I said these 2 files need to live in the JS folder of the front end template, for the simple reason that the output HTML should be coupled to the front end template!
Joomla is not a Bootstrap ONLY CMS. I don't use Bootstrap and many others also

How can you add context menu similar to table editing? Is it possible to re-edit a "block" similar to tables?

There are a gazillions of options for tinyMCE that right now are not utilized in the CMS. Tackle the problems one at a time...

Very important: can the JSON files have translateable Joomla language tags?

Very important: can the JSON files have translateable Joomla language tags?

Yes

$scriptOptions['formats'] = json_decode('{
"customformat": {
"inline": "span",
"styles": {
"color": "#00ff00",
"fontSize": "20px"
    },
"attributes": {
"title": "JTEXT_SOMETHING_TRANSLATABLE"
    },
"classes": "example1"
  }
}');

  /**
   * Method to translate all the labels in the styles object
   * From https://perfectgrid.io
   *
   * @param $obj
   */
  protected function translateJson($obj) {
    if (is_object($obj)) {
      if (isset($obj->labels)) {
        foreach ($obj->labels as $k => $v) {
          $obj->labels[$k] = Text::_($v);
        }
      }

      foreach ($obj as $x => $value) {
        self::translateJson($value, $x);
      }
    }
  }

Probably it should have been merged 4 years ago

You closed it without anyone really commenting :(

now that I fully understand I would absolutely welcome it.

There are a gazillions of options for tinyMCE that right now are not utilized in the CMS. Tackle the problems one at a time...

I've done my best to enable them as they are released #35607, #31911, #31895 or to make old ones actually usable #33130

There is a lot of powerful stuff in there

Oops look what I found in tinymce.php:653

$scriptOptions['rel_list'] = array(
	array('title' => 'None', 'value' => ''),
	array('title' => 'Alternate', 'value' => 'alternate'),
	array('title' => 'Author', 'value' => 'author'),
	array('title' => 'Bookmark', 'value' => 'bookmark'),
	array('title' => 'Help', 'value' => 'help'),
	array('title' => 'License', 'value' => 'license'),
	array('title' => 'Lightbox', 'value' => 'lightbox'),
	array('title' => 'Next', 'value' => 'next'),
	array('title' => 'No Follow', 'value' => 'nofollow'),
	array('title' => 'No Referrer', 'value' => 'noreferrer'),
	array('title' => 'Prefetch', 'value' => 'prefetch'),
	array('title' => 'Prev', 'value' => 'prev'),
	array('title' => 'Search', 'value' => 'search'),
	array('title' => 'Tag', 'value' => 'tag'),
);

No language string tags?

You closed it without anyone really commenting :(

Well, it was sitting there for some months but it was closed when I stepped down from the JS Lead

I've done my best

I wasn't blaming you. More a complaint that only you, @Fedik, and I did anything to move the core tinyMCE forward so people didn't have to rely on an external editor that is using an EOL version of tinyMCE.

Oops look what I found in tinymce.php:653

Might not be true. You have to check if the tinyMCE language files have translations for these strings. It might be covered there

No language string tags?

Using native tinymce trings

As I said these 2 files need to live in the JS folder of the front end template, for the simple reason that the output HTML should be coupled to the front end template!

Heck, why not content modules as well!

It comes to mind that front-end templates/modules could integrate with TinyMCE plugin naturally with those JSON files and template/html/tinymce/ & module/html/tinymce folders.

Basically all can be awesome in their own way, but the template ultimately dictates the tone of the front-end.

template/html

That IS NOT a PUBLIC folder. Public forders are css, js, images. The template/html is only for LAYOUT OVERRIDES and by any stretch it shouldn't be assumed that it should be accessible for SECURITY reasons...

Just saying...

Basically all can be awesome in their own way, but the template ultimately dictates the tone of the front-end.

Yes, the HTML output of the editor SHOULD be specifically for the front end template

Yes, correct, but I'm talking about the template/html/tinymce/ folder which we populate with snippets. End users will only see a selection of these in the editor, nothing else.

Yes, correct, but I'm talking about the template/html/tinymce/ folder which we populate with snippets.

The template/html should not be assumed a public folder so if this is used for XHR from tinyMCE we have a security problem there...

I understand that, however I do want to mention that access to that folder is only granted to editors, and higher ranked users, like staff. Correct?

@dgrammatiko I added your above sample codes after $scriptOptions = array_merge ($scriptOptions, array()) part, around line 570 and it doesn't work. Text align is still added via inline style.

I would do a pr later on

That would be great.

@dgrammatiko I wish:)

The current TinyMCE plugin allows you to configure in the back-end custom button and additional plugins, why not

Template

• template/js/tinymce/formats.json - custom specific formats
• template/js/tinymce/styles.json - custom specific styles
• template/js/tinymce/plugins/ - folder for custom plugins
• template/html/tinymce - custom specific snippets

Site Module

• site_module/js/tinymce/formats.json - custom specific formats
• site_module/js/tinymce/styles.json - custom specific styles
• site_module/js/tinymce/plugins/ - folder for custom plugins
• site_module/html/tinymce - custom specific snippets

This could automatically deprecate the current plugin options for plugins and custom buttons, but I think the end-user will benefit more from less configuration and more power to the developers.

Isn't this more logical and developer friendly? @brianteeman ?

@thednp I didn't created the PR yesterday as I found quite some inconsistencies in the plugin and also I had an epiphany. Will do a PR today or the coming days, the code is ready but I have to also prepare couple more things so that everyone understands what are the benefits of all the changes proposed. So be a little more patient...