Sign in

adding custom button to tinymce

  • This topic has 2 replies, 3 voices, and was last updated 1 month ago by .
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #9852
    Avatar photodropcloth

    Hi!

    How would I go about adding my own button that would either prompt for input and then drop a modified text of that into the editor, or modify a selected text?

    I tried the basic example of:

    tinymce.init({
      selector: "textarea",
      setup: function (editor) {
        editor.ui.registry.addButton("customInsertButton", {
          text: "My Button",
          onAction: function (_) {
            editor.insertContent(" It's my button! ");
          },
        });
      },
    });

    to get a button added at all; I’ve put that into the “simple” themes tinymce.script.js and added:

    "extensions": {
        "postEditorConfigOverride": false,
        "postEditorCustomScript": true
    },

    to the config.json in the simple themes config.json, afterwards I restarted publii, but there is no custom button in any of the editors, the docs don’t mention any example for the tinymce.script.js either, so how would I go about doing this?

    Thanks!

    #9884
    Avatar photoinfrancer

    Perhaps you should look at: Template plugin | Docs | TinyMCE. It’s not comfortable like a button, but it’s works

    #9927
    Avatar photoLevi

    I’m curious about this as well. I was able to get JS to execute but wasn’t able to hook into the editor using similar code.

    tinymce.init({
      selector: '#editor',
      toolbar: 'myCustomToolbarButton',
      setup: function (editor) {
        editor.ui.registry.addButton('myCustomToolbarButton', {
          text: 'My Custom Button',
          onAction: function () {
            alert('Button clicked!');
          }
        });
      }
    });

     

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.