web-dev-qa-db-ja.com

カスタムHTMLタグを追加する小さなMCE

MODxにTiny4.3.3を使用しています。追加する必要があります。

<p class="classname">
 <em class="openImg"></em>
  Some randome Input text by the user
 <em class="closeImg"></em>
</p>

追加のメニュー項目であるか、段落ドロップダウンメニューにあるかは問題ではありません。時間のかからない回避策が可能な限り必要です。

私はこれを試しました http://alexzag.blogspot.co.uk/2009/12/custom-tags-in-tinymce.html しかし、どういうわけかこれは機能しません。

誰かが私に良いチュートリアルを教えてもらえますか、または適切なクラスでpタグとemタグを自動的に作成するドロップダウンメニューにアイコンまたは名前を追加する方法を教えてもらえますか？ありがとう

tinymcemodx
15
Jonathan Thurft

質問されて久しぶりですが、今はまったく同じことをやっているので、この問題に関する発見と解決策を共有したいと思いました。 :)

私は仕事中のテストプロジェクトのためにTinyMCEを拡張しており、私たちのソリューションにはカスタムタグが必要です-それらのいくつかでは、ユーザーは1行しか入力できないはずですが、他の場合（emとして）多くのテキスト。

目的のソリューションを実現するために実行する手順：

  • tinyMCEエディターに、2つの構成キーワードextended_valid_elementsおよびcustom_elementsを使用して要素がgoodであることを伝えます。

    tinymce.init({ selector: "textarea#editor", // ... extended_valid_elements : "emstart,emend", custom_elements: "emstart,emend", content_css: "editor.css" });

  • 開始タグと終了タグの2つの画像を作成します。私は例のために私の名前を付けましたemstart.pngとemend.png。

  • カスタム要素のカスタムCSSスタイルを作成し、それらをカスタムCSSファイル（私の場合はTinyMCE構成で指定されているものeditor.cssに配置します。 -））：:

    emstart { background: url(emstart.png) no-repeat; background-position: left -3px top -3px; padding: 10px 10px 5px 10px; background-color:#aabbcc; border:1px dotted #CCCCCC; height:50px; width:100px; }

    emend { background: url(emend.png) no-repeat; background-position: left -3px bottom -3px; padding: 5px 10px 10px 10px; background-color:#aabbcc; border:1px dotted #CCCCCC; height:50px; width:100px; }

  • 新しいタグを入力するカスタムプラグインを作成し、プラグインディレクトリに配置します。私は私のcustomemと呼んだ：

プラグインコード：

tinymce.PluginManager.add('customem', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('customEmElementButton', {
        text: 'Custom EM',
        icon: false,
        onclick: function() {
            // Open window
            editor.windowManager.open({
                title: 'Please input text',
                body: [
                    {type: 'textbox', name: 'description', label: 'Text'}
                ],
                onsubmit: function(e) {
                    // Insert content when the window form is submitted
                    editor.insertContent('<emstart>EM Start</emstart><p>' + e.data.description + '</p><emend>EM End</emend>');
                }
            });
        }
    });

    // Adds a menu item to the tools menu
    editor.addMenuItem('customEmElementMenuItem', {
        text: 'Custom EM Element',
        context: 'tools',
        onclick: function() {
            editor.insertContent('<emstart>EM Start</emstart><p>Example text!</p><emend>EM End</emend>');
        }
    });
});

最後のステップは、カスタムプラグインをエディターにロードし（pluginおよびtoolbar構成オプションを使用）、結果を楽しむことです。

    tinymce.init({
        selector: "textarea#editor",
        height: "500px",
        plugins: [
                 "code, preview, contextmenu, image, link, searchreplace, customem"
           ],
        toolbar: "bold italic | example | code | preview | link | searchreplace | customEmElementButton",
        contextmenu: "bold italic",
        extended_valid_elements : "emstart,emend",
        custom_elements: "emstart,emend",
        content_css: "editor.css",
     });

エディターは次のようになります。

enter image description here

あなたの例のようなソース：

enter image description here

46
pasty

まず最初に、tinymce設定を変更する必要があります valid_elements および valid_children 必要に応じて（emをvalid_elementsおよびemに追加します必要なタグ（おそらくp）からvalid_childrenへの子。

次に、このコードを挿入するには、独自のドロップダウンまたはボタンを備えた独自のプラグインが必要になります。

5
Thariama