TinyMCEからリアルタイムにコンテンツをコピー

 

TinyMCEのエディタ内のコンテンツをコピーする方法とテキストのみを抽出する方法。

 

HTMLタグごと全てコピー

$(function() {
  $("#copy-mce").click(function(){
    const text = tinyMCE.activeEditor.getContent();
    navigator.clipboard.writeText(text);
    $('.success-msg').fadeIn("slow", function () {
      $(this).delay(2000).fadeOut("slow");
    });
  });
});

 

 

プレーンテキストとして全てコピー

 

$(function() {
  $("#copy-planeTxt").click(function(){
    const htmlContent = tinyMCE.activeEditor.getContent();

    // 一時的なDOM要素を作成
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = htmlContent;

    // テキストコンテンツを取得
    const textContent = tempDiv.textContent || tempDiv.innerText || "";

    navigator.clipboard.writeText(textContent);

    $('.success-msg').fadeIn("slow", function () {
      $(this).delay(2000).fadeOut("slow");
    });
  });
});

 

文字数をAlert表示

$(function() {
  $("#mce-length").click(function(){
    const htmlContent = tinyMCE.activeEditor.getContent();

    // 一時的なDOM要素を作成
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = htmlContent;

    // テキストコンテンツを取得
    const textContent = tempDiv.textContent || tempDiv.innerText || "";
    const textLength = textContent.length;

    const message = textLength + "文字";
    alert(message);
  });
});