How can I add a new element or div to TinyMCE?

Question

I would like to add one of the open source sliders to my TinyMCE project But I can only change the content_style in the React component. How do I add new HTML tags? I want to add a specific class to some tags or I want to easily change the style or script of the specific class, tag, id vs. I couldn't find anything about this in the documentation. Can anyone help?

<Editor
        init={{
          selector: "textarea",
          height: 500,
          plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table paste imagetools wordcount",
            "table",
          ],
          toolbar:
            "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image CustomSlider table",
          content_style:
            "tr {display: flex} td {flex: 1; overflow-wrap: anywhere} td img {width: 100%; height: auto} img {width: auto}",
          file_picker_types: "image",
          file_picker_callback: function (cb, value, meta) {
            var input = document.createElement("input");
            input.setAttribute("type", "file");
            input.setAttribute("accept", "image/*");

            input.onchange = function () {
              var file = this.files[0];

              var reader = new FileReader();
              reader.onload = function () {
                var id = "blobid" + new Date().getTime();
                var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                var base64 = reader.result.split(",")[1];
                var blobInfo = blobCache.create(id, file, base64);
                blobCache.add(blobInfo);

                cb(blobInfo.blobUri(), { title: file.name });
              };
              reader.readAsDataURL(file);
            };

            input.click();
          },
          menu: {
            custom: { title: "Custom Menu", items: "undo redo basicitem" },
          },
          menubar: "file edit format custom",
          image_class_list: [
            { title: "None", value: "" },
            { title: "No border", value: "img_no_border" },
            { title: "Green border", value: "img_green_border" },
            { title: "Blue border", value: "img_blue_border" },
            { title: "Red border", value: "img_red_border" },
          ],
          image_list: [
            { title: "Cat", value: "cat.png" },
            { title: "Dog", value: "dog.jpg" },
          ],
          setup: function (editor) {
            editor.ui.registry.addMenuItem("basicitem", {
              text: "My basic menu item",
              onAction: function () {
                alert("Menu item clicked");
              },
            });
            editor.ui.registry.addButton("CustomSlider", {
              text: "Slider",
              icon: "gallery",
              onAction: function () {
                tinymce.activeEditor.windowManager.open({
                  title: "Dialog Title", // The dialog's title - displayed in the dialog header
                  body: {
                    type: "panel", // The root body type - a Panel or TabPanel
                    items: [
                      // A list of panel components
                      {
                        type: "htmlpanel", // A HTML panel component
                        html: "Panel content goes here.",
                      },
                    ],
                  },
                  buttons: [
                    // A list of footer buttons
                    {
                      type: "submit",
                      text: "OK",
                    },
                  ],
                });
              },
            });
          },
        }}
      />

How can I add a new element or div to TinyMCE?

0 Answers0