JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Load các thư viện chung -->
<!-- Load thư viện JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Load thư viện Plugin VOD -->
<script src="https://ims.mediacdn.vn/micro/media/vod/plugins/dist/ims-plugin-media.js"></script>

<!-- Load thư viện riêng cho các kiểu tích hợp -->
<!-- Load thư viện Editor -->
<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"
></script>
<link
        href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css"
        rel="stylesheet"
        type="text/css"
/>

<!-- Các thành phần -->

<!-- Button -->
<h2>Button</h2>
<button id="media" class="test-button">Mở plugin VoD</button>
<hr>

<!-- Editor HTML -->
<h2>Editor</h2>
<div id="froala-editor"></div>

JavaScript

// Thêm Event click vào button "Mở Plugin VOD"
$("#media").off("click").on("click", showPlugin);

// Sửa editor
FroalaEditor.DefineIcon("VoD", {
  NAME: "VoD",
  SRC: "https://docs.bizflycloud.vn/images/icon/vod.svg",
  template: "image",
});
FroalaEditor.RegisterCommand("VoD", {
  title: "Open Plugin VoD",
  focus: true,
  undo: true,
  refreshAfterCallback: true,
  callback: showPlugin,
});

new FroalaEditor("div#froala-editor", {
  toolbarButtons: [
    [
      "bold",
      "italic",
      "underline",
      "paragraphFormat",
      "formatOL",
      "formatUL",
    ],
    ["undo", "redo", "html", "VoD"],
  ],
});




// Hàm lấy plugin VoD token
function getTokenFunction(callback) {
  var xhr = new XMLHttpRequest();
  xhr.withCredentials = true;
  xhr.addEventListener("readystatechange", function () {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      var status = xhr.status;

      if (status === 200) callback(null, this.responseText);
      else callback(new Error("Error2 get token"));
    } else if (xhr.readyState === XMLHttpRequest.ERROR) {
      callback(new Error("Error3 get token"));
    }
  });
  // Cần cài đặt API GET /plugin-vod-token ở CMS Server
  xhr.open("GET", "http://127.0.0.1:5000/plugin-vod-token", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send();
}

// Hàm hiển thị Plugin VoD
function showPlugin() {
  // Khởi tạo Plugin VoD
  IMSWidgetMedia.init({
    locale: "vi",
    plugins: {
      name: "media",
      options: {
        getTokenFunction: getTokenFunction,
      },
      methods: {
        name: "mediaManager",
        options: {
          callback(arrMedia) {
            console.log("Callback =>", arrMedia);

            arrMedia.forEach((media) => {
              $("#preview").append(
                '<div style="width:500px;height:400px;">' +
                media.embedCode +
                "</div>"
              );
            });
          },
        },
      },
    },
 ...