newbthenewbd/grav-plugin-tinymce-editor

TinyMCE Editor Integration Plugin for Grav

TinyMCE Editor Integration

The TinyMCE Editor Integration is a state-of-the-art plugin, integrating the enterprise-grade TinyMCE WYSIWYG HTML editor with the modern CMS Grav is.

Blabbing aside, this is the plugin that you should use when you're tired of, scared of, or otherwise not comfortable using Markdown to author your pages from within the Grav Admin Plugin. It's vastly configurable, so you should have no issues adapting it to your liking, and its default configuration has been made with consistency and ease of use in mind, significantly reducing the chance that you have to change anything at all.

Installation

There are two methods of installing the TinyMCE Editor Integration plugin, each of them available with the use of the admin plugin or manually.

Installation with the use of the Grav Package Manager

The simplest way to install this plugin is via the Grav Package Manager (GPM). It can be used from within the admin plugin, or as a standalone executable accessible through your system's terminal (also called the command line).

Installation with the use of the admin plugin (Recommended)

In the admin plugin, go to Plugins > Add and enter the plugin's name there. When it is found, click the Install button next to it.

Installation with the use of a terminal

Run the following From the root of your Grav install:

bin/gpm install tinymce-editor

Either of these will install the TinyMCE Editor Integration plugin into your /user/plugins directory within Grav. Its files can be found under /user/plugins/tinymce-editor.

Manual installation

You may also decide that you want to install the plugin manually, which may prove very useful if you want to use the latest, unreleased features of the plugin.

Manual installation with the use of the admin plugin

In the admin plugin, under Configuration > System > Advanced make sure that non-GPM direct installs are allowed, then go to Tools > Direct install, and paste the following into the textbox under Install Package via Remote URL Reference:

https://github.com/newbthenewbd/grav-plugin-tinymce-editor/archive/develop.zip

Manual installation with the use of a file archiver

Download the latest development version of the plugin and unzip it into your /user/plugins/ directory within Grav, then rename the unzipped directory to tinymce-editor.

You should now have all the plugin files under /user/plugins/tinymce-editor.

Configuration

Before configuring this plugin, you should copy the /user/plugins/tinymce-editor/tinymce-editor.yaml file to /user/config/plugins and only edit that copy.

This is the default configuration and an explanation of available options:

enabled: true
apikey: '' # The API key to use with TinyMCE Cloud. If empty, local copy of TinyMCE will be used
plugins: # The plugins to load with TinyMCE
  - advlist
  - anchor
  - autoresize
  - charmap
  - code
  - colorpicker
  - emoticons
  - fullscreen
  - hr
  - image
  - insertdatetime
  - link
  - lists
  - media
  - nonbreaking
  - pagebreak
  - paste
  - print
  - searchreplace
  - table
  - textcolor
  - toc
  - visualchars
  - wordcount
parameters: # Additional parameters to pass to TinyMCE during its initialization
  -
    name: fontsize_formats
    value: '6pt 7pt 8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 32pt 36pt 40pt 44pt 48pt 54pt 60pt 66pt 72pt 80pt 88pt 96pt'
  -
    name: paste_data_images
    value: '1'
menubar: true # If enabled, a menu bar will be present over the toolbar
menu: # The tree of the TinyMCE menu elements, ignored if menu bar is disabled
  -
    title: File
    items: 'newdocument print'
  -
    title: Edit
    items: 'undo redo | cut copy paste pastetext | selectall | searchreplace'
  -
    title: Insert
    items: 'media link image | pagebreak charmap anchor hr insertdatetime nonbreaking toc'
  -
    title: View
    items: 'visualchars visualaid | fullscreen'
  -
    title: Format
    items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'
  -
    title: Table
    items: 'inserttable tableprops deletetable | cell row column'
  -
    title: Tools
    items: code
toolbar: # The toolbar layout for TinyMCE to use
  -
    row: 'newdocument print | cut copy paste | undo redo | searchreplace visualchars | table image media emoticons toc | insertdatetime pagebreak charmap | link unlink anchor | blockquote nonbreaking hr | code'
  -
    row: 'formatselect | fontselect fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | indent outdent | forecolor backcolor | bullist numlist | superscript subscript | removeformat | fullscreen'
branding: false # If enabled, a "Powered by TinyMCE" branding will be present at the bottom of the editor
statusbar: true # If enabled, a status bar will be present at the bottom of the editor

When more customization is desired than the above options allow, you may create a directory called tinymce-editor in /user/data, and copy a subset of /user/plugins/tinymce-editor in there. The changes to the contents of that directory will be reflected in the plugin's behavior, and they will not be affected by updates. Currently supported subsets are the directories blueprints, css, js/tinymce and templates, and their entire contents should, when needed, be copied to /user/data/tinymce-editor/blueprints, /user/data/tinymce-editor/css, /user/data/tinymce-editor/js/tinymce and /user/data/tinymce-editor/templates, respectively.

Usage

NOTE: It is recommended to disable Markdown processing in /user/config/system.yaml or under Configuration > System > Content in the admin plugin to lower the resource usage once this plugin has been installed.

The plugin itself is ready to be used out of the box, set up with a sensible default configuration. It will replace all the Markdown page editor fields in the admin plugin with TinyMCE.

Credits

Many thanks to everyone involved in the creation of TinyMCE, the only FOSS WYSIWYG HTML editor that can actually do just what is expected of it with a little configuration.

Huge thanks to the Grav Chat community for providing help with Grav whenever possible, and to those involved in the creation of Grav, a CMS with an actually beautiful architecture.

Thanks to those the plugin was originally made for – my family with their websites – and to those others who may now use it as well.

Last but not least, three tanks many thanks to the very important person hiding behind this noble nickname on GitHub for keeping sanity staying understanding while I've been unresponsive wasting a huge amount of time creating this plugin.

To Do

• Add more translations to languages.yaml
• ???
• That's it!

Nagging for Donations

Do you perhaps feel awesome,
and happen to sleep on mone?
Drop some, feel more awesome!*

*No, really, there are no perks associated with donating aside from the increased self-awesomeness, though our self-awesomeness will be increased too!

Random Disclaimers

"TINYMCE" is a registered trademark and brand of Moxiecode Systems AB.

grav-plugin-tinymce-editor's Issues

Can't change pagebreak content

How do I change the content that is used as pagebreak? Default value is <!-- pagebreak --> and can be edited in the pagebreak plugin file. Is this or will this be editable via tinymce-editor.yaml?

404 Uncaught ReferenceError: tinymce is not defined

Where does the error take place:

Grav allows you to add extra fields in your site configuration tab:

To do this your have to make an extra yaml file in 'user -> blueprints -> config -> newfile.yaml' (in the preview this file is called pau.yaml)

if you define fields as type: tinymce you get the error Uncaught ReferenceError: tinymce is not defined
(next: Preview of the defined fields. Last field is defined as tinymce)

(next: Preview of how the tinymce field renders in admin)

What did i already try

• updated Grav and the plugin to latest version
• clean install with only the tinymce plugin added
• Tinymce plugin does work when used for 'Pages / templates' blueprints, but not in config

(Preview installed plugins and versions:)

Disable for specific pages

This plugin makes the plugin lightslider unusable, because the lightslider needs exactly the written markdown code, without html around it.
Suggestion: Disable tinymce-editor for specific pages.

languages.yaml contains a double key and crashes

The file languages.yaml contains a double key WHITELIST_HELP and crashes grav.

    WHITELIST_HELP: The collection of pages to enable TinyMCE on.
    BLACKLIST: "Blacklist"
    WHITELIST_HELP: The collection of pages to disable TinyMCE on, even if they are whitelisted.

Delete first line and everything works again.

Language URL not loading

I have my user account language set to something other than english. But the TinyMCE javascript doesn't refer to the correct language file in the language_url field. The value becomes "/" on the source of the edit page.

I'm not familiar enough with twig and grav to understand what's happening exactly. But wouldn't it be easier to set the language in the "language" field?

How to add HTML5 tags in the editor?

I try to add HTML5 tags in the editor, by following this example: https://www.tinymce.com/docs/demo/format-html5/.

In the plugin option page I added «visualblocks» in plugins section, then created new row and paste «section | article», but these options did not appear in the editor.

What have I done wrong?

Use Grav native media system

Hi, I'm currently looking on how to fallback on native Grav media system to allow the user to use action like crop, cropresize etc ... (https://learn.getgrav.org/content/media)

I have 2 idea on that :

• create à tinymce plugin that extent the image one and who will insert an markdown img tag (instead of the html one)

or

• extend Parsedown to parse the img tag from the current tinymce.

I let you know if I have a working POC

Preview for blog items not working when adding images with TinyMC

When using Grav with Gantry 5 previews for images in blog posts fails to load, but just using the standard markdown editor they load just fine. I can't figure out why
Attached screenshot of the problem.

From blog posts

From the full post

I can't seem to figure out why

TinyMCE editor not active in list element

So, if you add editors dynamically via a list, the Markdown editor isn't replaced by the TinyMCE editor.

From the page blueprint:

            header.contentlist:
              type: list
              btnLabel: Add content block
              controls: both
              style: vertical
              fields:
                .title:
                  type: text
                  label: Title
                .content:
                  type: editor

404 Error when loading tinymce files

After updating the plugin to version 1.2.1 and Grav to 1.5.3, the plugin stops working. If you open the console you can see some 404 errors, as it's trying to load the tinymce.js files from /user/data instead of /user/plugins as it did on previous versions. I have rolled back the plugin to version 1.1.8 and it's working fine.

An invalid form control with name='data[field][name]' is not focusable.

This happens when i set the validate required to true.

Use Media

Hi, first just want to thank you for your great work on this !

The only thing I can't get to work is using the media system ?

How is it suppose to work ?

When I upload a img then I click on the "+" but it's a link popup wich appear,

I thinks it's a problem with the js include in the template file but before digging could you tell me if i'm doing everything the right way ?

Thanks

Question more than an issue.

How do I add the TinyMCE to a custom text field in Grav?

API key warning

The following warning pops up everytime TinyMCE editor is loaded

The API key you have entered is invalid. Please review your API key here

Floating elements?

Hey there,

is it possible to align pictures as floating elements next to the text without having them stick directly together? I haven't found an option to add some margin between both, yet.
I am also concerned with the responsibility for mobile devices with such elements.

Is there an elegant way to solve that issue? :)

Yours sincrely,
KBE.

position image (bug?)

Hello!
How can I position the text to the right of the image and at the top so that the text is indented from the image.
Thnx!

Incorrect Image Path on Non-Routable Modular Page Component

I have a modular page with non-routable (e.g., 06._mycontent) components. When I click a page media image to insert it, TinyMCE populates the relative path of "_mycontent/my-attached-image.png". That displays in TinyMCE but fails to load on the rendered site page.

The Markdown version of this operation inserts "" in the editing field but renders the absolute path "/user/pages/01.home/06._mycontent/my-attached-image.png". Is there a way for TinyMCE to determine the required path type?

tinymce does not replace all markdown fields

Well, if I define a editor form field within my theme blueprints it will not replace that with tinymce but still use the regular markdown. It's a pitty because I hardly use the regular content field.

Or maybe I am missing something?

Error: Required jwt token provider not defined. (0)

Hi, when i upload an image i get this error.

I know it has something to do with JWT authentication to ensure the security of my images, and from what I read I have to insert a token generated in my Tiny Cloud account somewhere, I just don't know where. Can you help me?

Select default font family

Hi!
The font selector is a interesting function. It helps me alot in my posts.
But I wanna change "default font" into "Tahoma", currently it's "Verdana"
If can, also change the others default parameter : font size, color , bold/ italic .......
Thank you!

Error Trying to Change Folder Name

Hi,

I get the following error when trying to change the folder name for a copied page using the Admin:

 Whoops \ Exception \ ErrorException (E_WARNING)
Use of undefined constant LIBXML_HTML_NODEFDTD - assumed 'LIBXML_HTML_NODEFDTD' (this will throw an Error in a future version of PHP)

Pointing to /user/plugins/tinymce-editor/tinymce-editor.php:17.

Bug in TinyMCE Editor Integration v1.2.0 with Grav 1.5.1 + Gantry v5.4.26

GRAV: 1.5.1
GANTRY: 5.4.26
TinyMCE Editor Integration: 1.2.0

My site works well, not problem. Today, i updated TinyMCE Editor Integration to 1.2.0 version, and after this, the Recompile CSS option of Gantry not works, say this:

500 Internal Server Error
Oops, UniformResourceLocator: Absolute stream path with relative lookup not allowed ().

I tried disabling the TinyMCE plugin, and works again. I tried in another site in another hosting, and the same situation. Before uptade, works well, after update, nots works.

[QUESTION] TinyMCE on modular section

Hi,
is it possibile to enable the editor on the modular section and in the admin pages?

Thanks ✌

Distraction Free Mode

Hi, i'm trying to implement the "quickbars" plugin to simulate the "distraction free mode", but it throws this error.

Can you help me?

This is the configs that im using:

Remove default paragraph

Hi guys,

What would be the equivalent in YAML for removing the default paragraph tag?

According to this post: https://community.tiny.cloud/communityQuestion?id=90661000000MrbVAAS I need to use these parameters:

forced_root_block : '', force_br_newlines : true, force_p_newlines : false,

However, I'm struggling to make it work.

Thanks!

Images URL aren't dynamic

When developing a website, we sometimes have to fill the pages with content and images.

Actually, the TinyMCE image feature (the manager opening in popup) forces the developer or user to type the entire path to the media, including the host URL.

But doing this, the HTML generated code will not be dynamic, and when moving the website to the production environment, or when migrating from a prod site to an other, all the images (and possibly <a> links) URLs will have to be rewritten.

Solution

TinyMCE should convert URL in TWIG (and use {{ base_url }}{{ page.url }}/ as a prefix), or apply a basic markdown syntax (see my Markdown mode request).

Image browse option not in grav-plugin-tinymce-editor

Can you possible to add Image browse option in this plugin ?

Currently in that insert image dialogue section have option to add the src , there is no option to browse the image file.

[BUG] Boolean values in plugin admin config page are saved and treated as strings

To reproduce - add some config setting to parameters section, and type in value field : false or 0
After that, on page editing we can see in developer tools, this value in object tinyMCE.editors[0].settings. is set to string 'false' or string '0'
String 'false' (or '0') evaluates to true in js, so we get undesired behavior.

As workaround, to make parameter false - you can leave empty field, which transforms in '' (empty string), which evaluates to false later.

Browser SpellCheck disabled with tinymce plugin

Something's not set up right for Chrome
Browser spell check is not enabled with tinymce

Configuration options for customised formats

[Confession: I've never used this plugin, though I plan to one day, and will be interested in heavily customising what content editors can do]

I'm passing on a post from Grav Forums as a feature request.

Probably best to read about it there, but here's a summary: the poster wants to add elements to the toolbar with custom classes, which is supported, and which I would also want to do (to provide alternatives for content editors, thereby discouraging custom inline styling).

I think I have provided a working solution by augmenting the base template, but this seems heavy handed. It would be great if certain options like this could be set in plugin configuration, and then iterated in the base template JS init.

What do you reckon? Happy to have a go at this and submit a PR if I get sufficiently encouraged/motivated.

Drag & Drop from page media not working

I've added paste_data_images parameter but when dragging and dropping an image from page media it only creates a markdown image link. Drag & Drop from elsewhere works fine otherwise.

Keeps changing my urls

I have a folder with subpages and cant get the links working.

Tried using the absolute URL "/folder/page" the url is converted to ../page
Tried using the relative path from the folder "page" but it also gets converted to ../page
I have added relative_urls=false to the config but it has had no effect

TinyMCE in a list

My setup I'm running Grav 1.7. I've placed a TinyMCE field in a list field.

Problem one:
If I'm making multiple rows and fills them with placeholder text only the last field will get saved, first time saving.

Problem Two:
After making multiple rows. If i move the rows up/down the placeholder text will be removed.

If I change the field type from tinymce to editor the problems are solved. So it seems like a JS problem related to tinymce.

Call to a member function folder() on null"

Call to a member function folder() on null"

Issue saving modular page

I seem to have trouble getting this plugin to play nice with Grav+Gantry on modular pages. Content is not saved to the file of the modular content under specific conditions.

My setup:
Grav v1.5.5
Admin v1.8.14
Gantry v5.4.26
TinyMCE v1.2.3

Theme:
Helium v5.4.26

Steps to reproduce:

1. Create main modular page.
2. Use the "Add Modular" button to add subfolder for modular content.
3. Set Page Template to "Text".
4. Make sure page editing mode is "Normal" and not "Expert".
5. Write something in the content text field and save the file.
6. Observe how the content is not saved to the file.

Notes:

• Disabling Gantry and using a different theme that doesn't rely on Gantry makes it work.
• Changing page template to something other than "Text" makes it work.
• Changing to "Expert" editing mode makes it work, even with "Text" page template.

Please let me know if you need more information.

Thank you.

[Request] Markdown mode

In order to :

• Provide a workaround for any problem with the generated code
• And allow the user to increase its markdown with things like <table>, but not necessarily convert all other elements in HTML

The idea would be to make a "compatibility mode" or "markdown mode", in wich the plugin would use the markdown syntax, and would just improve it with HTML on specific elements like :

• Some of the text formatting (color, size).
• Special caracters (exponent, etc).
• Tables (<table>, <tr>, <td>, etc)

But it would use a regular markdown syntax on these elements :

• New line (no <p> neither <div> or <br />, just a new line).
• Bold
• Italic
• Bullet lists
• Titles (h1, etc)

... and especially, for correct integration with the GRAV engine (urls, etc) :

• Links
• Images

Actual problems that such a mode could fix

Image sliding in the editor doesn't work : the plugin accept the native markdown injection but wraps it with <div>, this resulting in a rendering failure.

Image popups force the user to type the entire URI to the media (this forcing him to master HTML knowledge and to know exactly the path to the media ; not mentioning the laborious uselessness of such a task when it should basically know the path to the actual page and automatically fill it). Also, it results in a fixed URL, that can cause problem when moving from a development environment to a production environment, or to a production site to an other production site (all the content added during development in order to fulfill the application, will have to be rewritten to respect the new host URL).

Constant HTML replacing of the markdown can result in possible glitches in some contexts or complex structure, or can bring CSS issues because of unexpected HTML nesting.

And finally, the final client using the editor, cannot visualize nor master those problems, this causing the developer to dive in complex explanations on what to do or not to do with TinyMCE, and in painful manipulations for novices (like checking the generated code, removing some HTML elements for cleaning purpose, etc).

A last argument

If the main interests in using TinyMCE are to add the ability of creating <table>, and to colorize the text or to resize it (the rest can be done in Markdown), it should not systematically convert Markdown in HTML neither increase potential problems.

Image sizing, or CSS classes definition on an element, is natively supported by GRAV's markdown integration. Examples can be found in the online documentation : ![Sample Image](sample-image.jpg?resize=400,200)

Suggestion

If creating a "Markdown mode", the WYSIWYG edition should be kept. Markdown editors are pretty disappointing for non-professional users, and TinyMCE should still provide an interesting improvement by avoiding user to deal with the strange markdown display.

[Request] Image popup : pre-fill the URI to the media

In the context of HTML generation of images (<img>) and replacing of the native markdown syntax, the actual image manager looks like this :

Typing directly a media name doesn't work : we have to type the entire path to it.

Desired behavior

When opening the popup, several solutions could be feasible :

1. The popup automatically fill the source field, with the page's URI as a prefix. The user could finish the job by typing a resource name.
2. The popup propose to browse the actual page's medias, allowing the user to select a file.
3. The user just type the name of the media, and the plugin will add the prefix during the generation of the src="" attribute.

And even, a last feature would be appreciated :

4. The user can click'n'drag from the editor media library and dump it in the source field (wich isn't feasible for now, given that the popup send all the rest of the editor in background). Any of the n°1 or n°3 solution could terminate the job.

Open the sources

To allow people to improve the code, it would be useful to see the js code e.g. in js/tinymce/plugins/image/plugin.min.js unminified.
With each release, the code could be minified for use in production.

Incorrect Image Path on Modular Page Component

Images of blog items (partials/blog_item.html.twig) are not visible in the blog, but when viewing a single blog item:
A blog, images not visible
A blog item, images visible

This is because the generated html by this plugin is relative, e.g. <img src="my-blog-item/an-image.png" />.
The html generated from markdown (without this plugin) has an absolute path to an image folder.

Steps to reproduce:

1. Install Grav with Admin Plugin
2. Install this plugin
3. Create a site of type Blog
4. Create a site of type Item below the Blog
5. Add an image to the the blog item

Use twig-y paths (page://, theme:// etc.) for images

I'm using Grav in a project for a client, so the markdown editor's not suitable, and I'd like to let him add images but with relative paths. With TinyMCE, clicking the "plus" icon next to an image in the media tray autofills the absolute path.
Since I'll often be working on my local copy during development and maintenance, I really can't do with the absolute paths. Grav's twig-y paths would be ideal, but I suppose relative paths will do (though they're quite subpar given how ModRewrite works out -- you have to include the current page's name in the portion after the dot, so no changes to the page name allowed for the client) Now when I semi-automatically change all the paths to relative, this shows up correct online, in my local copy and in my local copy's editor, but on the online editor, the images turn up blank, which won't do.
I'm synchronising the two versions via git.

Error Changing Folder Name of Markdown Page

I've run into a new error when trying to change a page folder name. In this case, it's a Markdown page (i.e., TinyMCE is not enabled on this custom blueprint). The error:

 Whoops \ Exception \ ErrorException (E_WARNING)
DOMDocument::loadHTML(): Tag section invalid in Entity, line: 1

/user/plugins/tinymce-editor/tinymce-editor.php:17 

The page contains:

<section class="offs-xxl">
	<div class="container">
    	<div class="item-content">
        	<div class="lead">Genuine Mackie replacement parts.</div>
			<p>[ti file=Thump-Series-MACKIE-THUMP-SERIES.csv class="table table-hover"]</p>
		</div>
   	</div>
</section>

How to add image_class_list

Hi I want users to be able to chose a predefined image class set in a css file.
Is it possible to do this by adding an image_class_list to the parmeters in tinymce-editor.yaml. If so how can I do this?

Thanks
Claudio

Height Parameter Ignored?

First off, thanks - this will make clients very happy!

I'd like to change the default height of the editing area, but adding 'height: 600' to my tinymce-editor.yaml file has no effect. I'm able to toggle the existing 'statusbar' on and off, so the .yaml file is being read.

I tried adding 'elementpath: false', and that also had no effect. Should this plugin support all of the TinyMCE appearance parameters, or only those in the default tinymce-editor.yaml file that comes with the plugin?

convert from Markdown to TinyMCE html (and vice versa)

Hi,
I am just testing Grav with TinyMCE (as Markdown is not an option for end users). I can see a potential problem: it seems there's no way to convert from Markdown to HTML. So if one already starts using Grav, it's going complicated to start using TinyMCE.
In the same line of thought, if one decides to stop using TinyMCE, is there a way to switch back the pages to Markdown ?

I could not find any mention about that, which I find surprising as it is quite critical, so I might have missed something.

Not loading images when inserting from page media

After uploading a new image to page media, when using the insert option, I get a popup and all, but then the image doesn't appear in the tinymce until I save the document.
Alternatively, I have to upload, save and then insert. Any way around this?

Unresizable columns

Here's a recurrent bug I encounter in the editor, that I solve by a manual editing of the markdown :

• When pasting a content (ex : a table coming from LibreOffice), columns of the table become not resizable.
• I discover two mechanisms that can explain that :

1. First, there may have (sometimes) some "width" attribute created (or pasted ?) directly in the <td>, wich conflict with the "style" attribute that TinyMCE is supposed to manage in order to let the user to resize the columns in the editor (TinyMCE defines dynamic width for <td>, in percent, and the "width" attribute contradict the percentage). This result in rigid columns in the editor, wether we try to move them. Strangely, I don't manage to reproduce the bug with the same table I copied from the same file. It seems that the bug depends on non-predictible actions, like : do we create a blank table before pasting, what's the number of rows of the blank table (is it the exact same number), etc... But for sure, I had to delete some "width" attribute in order to fix the bug.

2. Even by removing all the "width" HTML attributes, the bug persist if we don't add this to the "style" attribute : table-layout: fixed;. It's a CSS property that change the algorithm used by browsers for dynamically calculating the rows/columns of a table. When added to a CSS sheet, it works for the generated page but not for the editor ; thus, it is absolutely necessary to manually add it to the HTML <table> tag in the markdown.

3. Also, I noticed that sometime, for the plugin config to be correctly applied (all the filters supposed to rewrite the code), I need to save at least two or three times the page to have a correctly rewritten HTML.

Now, for fixing this, I looked at the plugin YAML and TinyMCE content filters in order to find a solution.
Here's what I actually have (and wich is not enough) to "filter" the HTML elements :

  -
    name: extended_valid_elements
    value: 'td[style|rowspan|colspan],b/strong,i/em'

As you can see, I rewritten the <td> and limited it in order to wipe any "width" or "height" HTML attribute in it. But it's not enough, and sometimes, the "width" attribute reapears. It may be due to the mechanism n°3 I talked about.

I will test some other restrictions, like :

  -
    name: invalid_elements
    value: 'td[width]'

But I'm not sure that this filter accept these kind of options.

Goals for fixing the bug

1. Find the correct set of filters in the plugin's config in order to remove any "width" attribute in <td> and <th>.
2. Automatically add table-layout: fixed; in the style="" attribute of the table, in the TinyMCE editor. This has to be done by the plugin directly (so it implies a fix/patch).

Intermittent Blank Editing Field on 1.7.0-rc.13

Just updated a site to the latest 1.7 RC and the TinyMCE editing field often shows up blank whether or not there is any content in it. Inspecting, it shows an empty <body> tag. It isn't possible to click or tab into the editing region when this happens. It might get restored by re-saving the page or leaving and returning, sometimes multiple times. Replicated on Firefox and Chrome latest.

Examples below.

Blank textarea even though content was inserted and saved previously

Same page after saving (or leaving and returning) with no changes applied

Upload unminified code

The heart of this plugin is the JavaScript code in line 22 of the file tinymce.html.twig.
Please share an unminified version of it, so other people are able to read and extend it.

Retain image upload feature?

I'm looking at implementing this plugin for a site I'm transitioning from WordPress to Grav, and so far I am liking it. However, it seems to disable the built-in Grav Admin image uploader. That's kinda an issue for me because my theme makes use of {{ page.media.images|first }} to display a sort of "hero image", and without that uploader, there's no way to do that. Is it possible to retain the image uploader with TinyMCE enabled?

Thanks!

{{ "lol" }}

there is {{ "lol" }} in the code...

2480b23

templates/forms/fields/tinymce/tinymce.html.twig