TinyMCEのセレクタークラスと使用方法

まず最初に、TinyMCEエディターをHTMLの特定の要素に関連付ける方法を見てみましょう。以下の例では、textarea要素をTinyMCEエディターに変換する方法を示します。

<textarea id="myTextarea"></textarea>
<script>
    tinymce.init({
        selector: "#myTextarea"
    });
</script>

上記のコードでは、selectorオプションを使用して、IDがmyTextareaであるtextarea要素を選択しています。このようにすることで、TinyMCEは指定した要素をエディターに変換します。

次に、セレクタークラスを使用してTinyMCEエディター内の要素を操作する方法を見てみましょう。以下の例では、エディター内の内容を取得し、コンソールに出力する方法を示します。

// TinyMCEエディターの内容を取得する
var content = tinymce.activeEditor.getContent();
// コンソールに出力する
console.log(content);

上記のコードでは、tinymce.activeEditorを使用して現在アクティブなエディターのインスタンスを取得し、getContent()メソッドを使用してエディター内の内容を取得しています。取得した内容は、任意の方法で使用できます。

さらに、セレクタークラスを使用してエディター内の特定の要素を操作することも可能です。以下の例では、エディター内の全てのリンク要素にクラスを追加する方法を示します。

// エディター内の全てのリンク要素を取得する
var links = tinymce.activeEditor.dom.select('a');
// 取得したリンク要素にクラスを追加する
for (var i = 0; i < links.length; i++) {
    tinymce.activeEditor.dom.addClass(links[i], 'my-class');
}

上記のコードでは、tinymce.activeEditor.dom.select()メソッドを使用してエディター内の全てのリンク要素を取得し、tinymce.activeEditor.dom.addClass()メソッドを使用して各リンク要素にmy-classクラスを追加しています。

これらはTinyMCEのセレクタークラスを使用する際の基本的な例です。さまざまな方法でセレクタークラスを活用することで、エディター内の要素を操作したり、特定の動作を実現したりすることができます。