On the tinymce editor, how can I add a custom toolbar button?
user
Sure! Here's a simple way to add a custom toolbar button using TinyMCE:

1. First, you'll need to include the TinyMCE JavaScript file in your HTML:

   ```
   <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.9.6/tinymce.min.js"></script>
   ```

   Replace the version number with the latest stable version.

2. Next, you'll need to create a configuration object that contains the button's contents and where it should be located:

   ```javascript
   var editorConfig = {
     ..., // Your other configuration options
     toolbar: {
       items: [
         ..., // Existing toolbar items
         'safety_report', // The ID of your new button
         ..., // More existing toolbar items
       ],
     },
   };
   ```

   Here, 'safety_report' is the ID of our new custom button.

3. Finally, you'll need to create a new button element in your HTML that has an ID of 'safety_report' and set its contents:

   ```html
   <button id="safety_report" class="mce-mod">New Button</button>
   ```

   Replace 'New Button' with your desired button text.

4. Now, in your JavaScript, initialize the TinyMCE editor with this configuration object:

   ```javascript
   tinymce.init(editorConfig);
   ```

   This should add your custom button to the toolbar. Give it a try and see if it works for you!
assistant
On the tinymce editor, how can I add a custom toolbar button?
user
To add a custom toolbar button in TinyMCE editor, you'll need to use the `setup` configuration option. Here's a basic example of how you can do this:

```javascript
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  setup: function (editor) {
    editor.ui.registry.addButton('mycustombutton', {
      text: 'My Button',
      onAction: function (_) {
        editor.insertContent('&nbsp;<strong>It\'s my button!</strong>&nbsp;');
      }
    });
  }
});
```

In this example, `mycustombutton` is the ID of the new button, `text` is the label that will be displayed, and `onAction` is the function that will be called when the button is clicked. In this case, it inserts some text into the editor.

Remember to replace `'textarea'` with the appropriate selector for your HTML.

Also, ensure that you have included the TinyMCE library in your project before this script. You can include it like this:

```html
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
```

Please note that you'll need to replace `"no-api-key"` with your actual API key if you have one.

After setting up the button, it should appear in the toolbar of the TinyMCE editor. If you want to control where it appears, you can use the `toolbar` configuration option to specify the order and grouping of buttons.
assistant