web-dev-qa-db-ja.com

貼り付けられたプリフォーマットコードをそのままビジュアルエディタでタブ付きで保存

私は自分の関数phpにマニュアルコードが必要です。タブを削除しないようビジュアルエディタを拡張しますコードブロックを貼り付けるとき.

このサイトで見つけたこのコードを試しましたが、欲しいとしては機能しません。私が得た場合:

add_filter('tiny_mce_before_init', 'tiny_mce_before_init');
function tiny_mce_before_init($init) {
    $init['setup'] = "function(ed) {
        ed.onBeforeSetContent.add(function(ed, o) {
            if ( o.content.indexOf('<pre') != -1) {
                o.content = o.content.replace(/<pre[^>]*>[\\s\\S]+?<\\/pre>/g, function(a) {
                    return a.replace(/(\\r\\n|\\n)/g, '<br />');
                });
            }
        });
    }";
    return $init;
}

そしてビジュアルに貼り付けます、私はこれを得ました:

add_filter('tiny_mce_before_init', 'tiny_mce_before_init');
function tiny_mce_before_init($init) {
$init['setup'] = "function(ed) {
ed.onBeforeSetContent.add(function(ed, o) {
if ( o.content.indexOf('<pre') != -1) {
o.content = o.content.replace(/<pre[^>]*>[\\s\\S]+?<\\/pre>/g, function(a) {
return a.replace(/(\\r\\n|\\n)/g, '<br />');
});
}
});
}";
return $init;
}

私はTinyMCEの設定は「スペースを取る」のでタブを保存することを意図していないことを理解しています...

私は手動のペースト&ゴーソリューションを必要としていますが、他の多くのものを処理するプラグインをインストールするためのリンクは必要ありません。エディタ間の切り替えも何も変更することはできません。出来ますか?

読んで助けてくれてありがとう!

1
cavameta

私の答えは、TinyMCEには解決策はなく、このためのWordpress conversationです。しかし、コーディング素材を扱うためのさまざまなアプローチがあります

私はこれを他の議論で共有しましたが、あなたの質問内のより良いコンテキストかもしれません。

このソリューションは私にとって長年働いていますそして私はそれが大好きです。このアプローチでは、「ミドルハンド」を使用して、エディターとwpautop()課題の間で正しい事前コンテンツと文字を提供します。また、エンティティの文字の問題を処理しますエディター間の切り替え。

Functions.phpに貼り付けるだけです

使用方法:ツールバーのドロップダウンを使用するなど、エディターで既定の書式設定済みテキストブロックを作成します。次に、エディター内でクリックします-画像の場合と同じです。貼り付けまたは編集する領域が表示され、それを送り返します。編集する前のブロックをもう一度クリックするだけです。

重いように見えますが、軽いです。モーダルAPIなどはありません。しかし、jQueryは「グローバルスコープ」内にある必要がありますtinyMCE APIと通信。ドル記号$は使用できません。また、jQueryテキストはコードを混乱させます。その大部分はHTML要素の作成でスペースを取ります。

仕組み:非常にシンプル、「触れない」-TinyMCEはそれを台無しにしないでください。試してみる価値があります!

/**
 * PRE Handler
 * Solves <pre> handle in Wordpress tinyMCE editor
 * TAB support
 * TAB support to TEXT editor
 * Simple cleanup with Undo
 * Push cleanup (experimental)
 * Moves empty code chunks to beginning
**/


function entex_tiny_mce_before_init(){
    add_filter('tiny_mce_before_init', function($mceInit){
        $mceInit['setup'] = 'ua_TinyMCE_setup_callback';
        return $mceInit;
    });
    add_action('before_wp_tiny_mce', 'entex_TinyMCE_javascript');
}
add_action('after_setup_theme', 'entex_tiny_mce_before_init');


function entex_TinyMCE_javascript() {

    echo '<script type="text/javascript">'."\n";
    ?>

    var ua_tinyMCE_invoked = 0;

    function ua_TinyMCE_setup_callback(ed){

        if(ua_tinyMCE_invoked) return;
        ua_tinyMCE_invoked = 1;

        ed.on('init', function(e) {
            jQuery(ed.getBody()).on('click', 'pre', function() {
                ua_TinyMCE_edit_pre(ed, this);
                return false;
            });
        });
    }

    function ua_TinyMCE_helper_cleanBeginnings(str, find, replace){
        return str.replace(new RegExp(find, 'g'), replace);
    }

    function ua_TinyMCE_edit_pre(ed, obj) {
        var jQueryE = jQuery(obj); 
        var jQueryB = jQuery(ed.getBody());
        var content = jQuery('<textarea/>').html(jQueryE.html()).text();
        content = content.replace(/(<br>)/g, '');
        /* add whatever stuff to manipulate here */
        //content = content.replace(/   /g, '\t');
        var data = content;


        var jQueryL = jQuery('<div />').css({
            'position': 'fixed',
            'box-sizing': 'border-box',
            'background-color': 'rgba(255, 255, 255, 0.85',
            'border': '3px solid #ccc',
            'padding': '10px',
            'z-index': '9992',
            'height': 'auto',
            'width': '80%',
            'left': '50%',
            'margin-left': '-40%',
            'top': '5%'
        });

        var jQueryT = jQuery('<textarea />').keydown(function(e){

            if ( e.which != 9 ) return;
            var start = this.selectionStart;
            var end = this.selectionEnd;
            this.value = this.value.substr( 0, start ) + "\t" + this.value.substr( end );
            this.selectionStart = this.selectionEnd = start + 1;
            e.preventDefault();
            return false;

        }).attr('wrap', 'soft').css({
            'height': '98%',
            'width': '88%',
            'min-height': '300px',
            'tab-size': '3',
            'font-family': 'courier new',
            'box-sizing': 'border-box'
        });

        jQuery('#wpcontent').css('position', 'relative').append(jQueryL);
        jQueryL.append(jQueryT);
        jQueryL.append(
            jQuery('<div />').css({
                'width': '10%',
                'height': '100%',
                'position': 'absolute',
                'top': '0px',
                'right': '10px',
                'padding-top': '10px',
                'box-sizing': 'border-box'
            }).append(
                jQuery('<a />').attr('title', 'Send to element').click(function(){

                    var encodedStr = jQueryT.val().replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
                        return '&#'+i.charCodeAt(0)+';';
                    });

                    jQueryE.html(encodedStr);
                    ed.focus();
                    jQueryL.remove();
                    return false;

                }).text('Send').addClass('button button-primary').css({
                    'display': 'block',
                    'width': '100%',
                    'margin-bottom': '5px',
                    'text-align': 'center',
                    'box-sizing': 'border-box'
                }), 

                jQuery('<a />').attr('title', 'Cleanup').click(function(){

                    var data = jQueryT.val();
                    var original = data;
                    data = data.replace(/(\r\n|\n|\r)/gm, "\r\n");
                    var workspace = data.replace(/(\r\n|\n|\r)/gm, '');

                    if(/^\s/.test(workspace)) {
                        var search_string = workspace.replace(/^\s+|\s+$/g, '');
                        if(search_string){
                            var firstChar = search_string[0];
                            var remove = workspace.substr(0, workspace.indexOf(firstChar));
                            remove = "\r\n" + remove;
                            data = ua_TinyMCE_helper_cleanBeginnings(data, remove, "\r\n");
                        }
                        data = data.replace(/   /g, "\t");
                        data = data.replace(/^\s+|\s+$/g, '');
                    } else {
                        data = data.replace(/^\s+|\s+$/g, '');
                    }
                    if(data != original){
                        jQueryT.data('original', original);
                        if(!jQuery('#ua-TinyMCE-btt-undo').get(0)){
                        jQuery(this).after(
                            jQuery('<a />').attr('title', 'Undo').click(function(){
                                jQueryT.val(jQueryT.data('original'));
                                jQuery(this).remove();
                                return false;

                            }).text('Undo').addClass('button').css({
                                'display': 'block',
                                'width': '100%',
                                'margin-bottom': '5px',
                                'text-align': 'center',
                                'box-sizing': 'border-box'
                            }).attr('id', 'ua-TinyMCE-btt-undo')
                        );
                        }
                    }
                    data = data.replace(/   /g, "\t");
                    jQueryT.val(data);
                    return false;

                }).text('Cleanup').addClass('button').css({
                    'display': 'block',
                    'width': '100%',
                    'margin-bottom': '5px',
                    'text-align': 'center',
                    'box-sizing': 'border-box'
                }),

                jQuery('<a />').attr('title', 'Close').click(function(){

                    ed.focus();
                    jQueryL.remove();
                    return false;

                }).text('Close').addClass('button').css({
                    'display': 'block',
                    'width': '100%',
                    'margin-bottom': '5px',
                    'text-align': 'center',
                    'box-sizing': 'border-box'
                }),

                jQuery('<a />').attr('title', 'Remove all data').click(function(){

                    jQueryT.val('').focus();
                    return false;

                }).text('Delete').addClass('button').css({
                    'display': 'block',
                    'width': '100%',
                    'margin-bottom': '0px',
                    'position': 'absolute',
                    'bottom': '10px',
                    'background-color': '#D54E21',
                    'color': '#fff',
                    'text-align': 'center',
                    'box-sizing': 'border-box'
                })
            )
        );
        jQueryT.val(content).focus();
        return false;
    }

    // WP EDITOR
    jQuery(document).ready(function($){
        if($('textarea#content').get(0)){
            $('textarea#content').on('keydown', function(e){
                if ( e.which != 9 ) return;
                var start = this.selectionStart;
                var end = this.selectionEnd;
                this.value = this.value.substr( 0, start ) + "\t" + this.value.substr( end );
                this.selectionStart = this.selectionEnd = start + 1;
                e.preventDefault();
                return false;
            }).css('tab-size', '3');
        }
    });

    <?php
    echo '</script>'."\n";
}

このアプローチハックではありませんまたはコーニーpregマッチソリューション。デフォルトのAPIと同じ変換を生成します。

プッシュクリーンアップは、PHPクラスまたは任意のものからコードを貼り付ける場合に機能します。最初の既存の行に生じるスペースを計算します。

これを作ります:

                    if(search_string){
                        var firstChar = search_string[0];
                        var remove = workspace.substr(0, workspace.indexOf(firstChar));
                        remove = "\r\n" + remove;
                        data = ua_TinyMCE_helper_cleanBeginnings(data, remove, "\r\n");
                    }

これに:

if(search_string){
    var firstChar = search_string[0];
    var remove = workspace.substr(0, workspace.indexOf(firstChar));
    remove = "\r\n" + remove;
    data = ua_TinyMCE_helper_cleanBeginnings(data, remove, "\r\n");
}

、これは非常にRAWです。jQueryを知っていれば、非常に簡単にカスタマイズできます。この関数TABサポートも追加テキストエディター

ヒント:「CSS」タブサイズ:3をすべてのpre/editor/code-elementsに指定して、「視覚的」側面を一致させて同期する必要があります。

それを使用して、コメントしてください、そして、私は改善をガイドしようとします。

1
Jonas Lundman