question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is custom button functionality for TinyMCE supported in piranha 7.0?

See original GitHub issue

In Piranha 7, now that TinyMCE editor is easily configurable with a JSON file or through code in Startup.cs (a welcome improvement, by the way!), it seems a side-effect is that using an inline function to define custom button behavior with tinymce’s addButton function no longer works. For example, here’s something I did in Piranha 6 to get a toolbar button for inline code block formatting:

tinymce.init({
    ...
    toolbar: "code | bold italic customcodeformat | bullist numlist hr | alignleft aligncenter alignright | formatselect | piranhalink piranhaimage",
    ...
    setup: function (editor) {
        editor.addButton('customcodeformat', {
            icon: "codesample",
            onclick: function () { tinymce.execCommand("mceToggleFormat", false, "code") },
            tooltip: "Inline code"
        })
    }
});

I could just define the function somewhere in my JavaScript, give it a name, and then reference that name, like setup: myEditorSetupFunction, but is there still a way to do it inline?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
tidyuicommented, Aug 24, 2019

If you need to make bigger changes in the editor you can override the entire init like in 6.0, you can read about how to do it in the docs on “Changing the editor”.

http://piranhacms.org/docs/components/html-editor

I can not guarantee that your code work since the editor is updated to 5.0 and a lot has changed, for example we had to rewrite our plugins to work.

0reactions
tidyuicommented, Aug 29, 2019

Well I didn’t know you could add a button for a style formatting either 😁

Read more comments on GitHub >

github_iconTop Results From Across the Web

Supported Versions and Platforms | Docs
TinyMCE uses advanced JavaScript techniques to normalize inconsistencies among browsers to ensure a uniform user experience. The primary focus is on: Google ...
Read more >
Custom toolbar button | Docs
This example shows you how to add a custom button to the toolbar. This example shows you how to add a custom button...
Read more >
Toolbar buttons | Docs
The methods for adding custom toolbar buttons are in the UI Registry part of the editor API editor.ui.registry . The API has four...
Read more >
TinyMCE 5.0.7 | Docs
The Image Tools plugin includes a new imagetools_fetch_image setting, which allows a custom function to be used to fetch the image content in...
Read more >
Creating custom Basic toolbar buttons
Sets the button's enabled state. NOTE: This feature is only available for TinyMCE 6.4 and later. Sets the text label to display. Sets...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found