TinyMCEカスタムダイアログボックスの例

28491 ワード

もともとhttps://codeanddeploy.com訪問し、サンプルコードをダウンロードしてください
この記事では、Tinymce WYSIWYG HTMLエディタでカスタムダイアログボックスを追加する方法を共有しています.ダイアログボックスを追加すると、TinyMCEを使用してコンテンツエディタに動的なレコードやデータを入力することができます.今私はどのように簡単な手順でそれを行う方法を示します.私たちはさらに行くために私は基本的なhttps://codeanddeploy.com/blog/javascript/tinymce-custom-dialog-box-exampleちょうどあなたがそれを必要と訪問するチュートリアルを持っている.
how-to install TinyMCE

さて、続けましょう.
エディタの使用UITinyMCEのレジストリでは、指定された入力フォームでカスタムダイアログボックスを追加できます.

ダイアログボックスの設定

以下のコードをtinymceの設定に追加します.

setup: function (editor) {

}

tinymceレジストリを追加

次に、setup関数内でコードを追加します.

editor.ui.registry.addButton('custom_dialog', {
    text: 'Open Custom Dialog',
    onAction: function() {
        // Open a Dialog
        editor.windowManager.open({
            title: 'Custom dialog box',
            body: {
                type: 'panel',
                items: [{
                    type: 'input',
                    name: 'custom_data',
                    label: 'Custom data',
                    flex: true
                }]
            },
            onSubmit: function (api) {
                // insert markup
                editor.insertContent('Inserted custom data: ' + api.getData().custom_data);

                // close the dialog
                api.close();
            },
            buttons: [
                {
                    text: 'Close',
                    type: 'cancel',
                    onclick: 'close'
                },
                {
                    text: 'Insert',
                    type: 'submit',
                    primary: true,
                    enabled: false
                }
            ]
        });
    }
});

上記のコードを見ることができるように、私たちは私たちのダイアログの名前であるCustomRangeダイアログを持っています.下記の例を参照ください.

ツールバーでカスタムダイアログを挿入する

ツールバーの設定

toolbar:"undo redo | fontselect styleselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | codesample action section button",

ツールバーの設定

toolbar: "undo redo | fontselect styleselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | codesample action section button | custom_dialog",

上記のように“私たちはあなたのtinymceエディタのツールバーに“オープンカスタムダイアログ”が表示されますが追加されました“Chrn Customanceダイアログ”)を追加することができます.
以下の完全な設定を見てください.

setup: function (editor) {
    editor.ui.registry.addButton('custom_dialog', {
        text: 'Open Custom Dialog',
        onAction: function() {
            // Open a Dialog
            editor.windowManager.open({
                title: 'Custom dialog box',
                body: {
                    type: 'panel',
                    items: [{
                        type: 'input',
                        name: 'custom_data',
                        label: 'Custom data',
                        flex: true
                    }]
                },
                onSubmit: function (api) {
                    // insert markup
                    editor.insertContent('Inserted custom data: ' + api.getData().custom_data);

                    // close the dialog
                    api.close();
                },
                buttons: [
                    {
                        text: 'Close',
                        type: 'cancel',
                        onclick: 'close'
                    },
                    {
                        text: 'Insert',
                        type: 'submit',
                        primary: true,
                        enabled: false
                    }
                ]
            });
        }
    });
}

完全なtinymceの設定

以下の完全なtinymce設定を参照してください.

tinymce.init({
    selector: 'textarea#tinymce',
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table paste codesample"
    ],
    toolbar:
        "undo redo | fontselect styleselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | codesample action section button | custom_dialog",
    font_formats:"Segoe UI=Segoe UI;",
    fontsize_formats: "8px 9px 10px 11px 12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 42px 44px 46px 48px 50px 52px 54px 56px 58px 60px 62px 64px 66px 68px 70px 72px 74px 76px 78px 80px 82px 84px 86px 88px 90px 92px 94px 94px 96px",
    height: 600,
    setup: function (editor) {
        editor.ui.registry.addButton('custom_dialog', {
            text: 'Open Custom Dialog',
            onAction: function() {
                // Open a Dialog
                editor.windowManager.open({
                    title: 'Custom dialog box',
                    body: {
                        type: 'panel',
                        items: [{
                            type: 'input',
                            name: 'custom_data',
                            label: 'Custom data',
                            flex: true
                        }]
                    },
                    onSubmit: function (api) {
                        // insert markup
                        editor.insertContent('Inserted custom data: ' + api.getData().custom_data);

                        // close the dialog
                        api.close();
                    },
                    buttons: [
                        {
                            text: 'Close',
                            type: 'cancel',
                            onclick: 'close'
                        },
                        {
                            text: 'Insert',
                            type: 'submit',
                            primary: true,
                            enabled: false
                        }
                    ]
                });
            }
        });
    }
});

コンプリートティンムス

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Basic on TinyMCE with Custom Dialog Box</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="assets/plugins/tinymce/js/tinymce.min.js"></script>

    <script type="text/javascript">
        tinymce.init({
            selector: 'textarea#tinymce',
            plugins: [
                "advlist autolink lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table paste codesample"
            ],
            toolbar:
                "undo redo | fontselect styleselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | codesample action section button | custom_dialog",
            font_formats:"Segoe UI=Segoe UI;",
            fontsize_formats: "8px 9px 10px 11px 12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 42px 44px 46px 48px 50px 52px 54px 56px 58px 60px 62px 64px 66px 68px 70px 72px 74px 76px 78px 80px 82px 84px 86px 88px 90px 92px 94px 94px 96px",
            height: 600,
            setup: function (editor) {
                editor.ui.registry.addButton('custom_dialog', {
                    text: 'Open Custom Dialog',
                    onAction: function() {
                        // Open a Dialog
                        editor.windowManager.open({
                            title: 'Custom dialog box',
                            body: {
                                type: 'panel',
                                items: [{
                                    type: 'input',
                                    name: 'custom_data',
                                    label: 'Custom data',
                                    flex: true
                                }]
                            },
                            onSubmit: function (api) {
                                // insert markup
                                editor.insertContent('Inserted custom data: ' + api.getData().custom_data);

                                // close the dialog
                                api.close();
                            },
                            buttons: [
                                {
                                    text: 'Close',
                                    type: 'cancel',
                                    onclick: 'close'
                                },
                                {
                                    text: 'Insert',
                                    type: 'submit',
                                    primary: true,
                                    enabled: false
                                }
                            ]
                        });
                    }
                });
            }
        });
    </script>
</head>
<body>
    <div class="container mt-5">
        <form method="post">
            <div class="form-group">
                <label>Title</label>
                <input type="text" name="title" class="form-control">
            </div>
            <div class="form-group mt-4">
                <label>Content</label>
                <textarea id="tinymce"></textarea>
            </div>

            <button class="btn btn-primary mt-4">Submit</button>
        </form>
    </div>

</body>
</html>

今、あなたは既に設定したり、カスタムダイアログボックスを追加する方法のアイデアがあります.
私はこのチュートリアルを助けることを望む.あなたがこのコードをダウンロードしたいならば、親切にをここで訪問してください.
ハッピーコーディング

Reference

この問題について(TinyMCEカスタムダイアログボックスの例), 我々は、より多くの情報をここで見つけました https://dev.to/codeanddeploy/tinymce-custom-dialog-box-example-4m8f

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

おっと、間違いをした?あなたのGitコミットを逆にする方法は、ここにあります

のビデオをキャプチャします