从HTML切换到可视编辑器时,保留<pre><code>中的制表符和换行符

时间:2012-03-16 作者:Aram Kocharyan

放置在中的选项卡<pre><code></code></pre> 删除块并删除换行符,只留下一行连续的文本。从html切换到可视化编辑器时会发生这种情况。TinyMCE是否有避免这种情况的设置?

之前:

enter image description here

之后:enter image description here

在这里,它甚至会弄乱代码并将部分代码吐出<pre>...

EDIT:

我觉得最好的选择是删除<code> 完全标记并离开pre。这仍然存在删除重复空行的问题,但即使在编辑器之间切换时,也会保持pre不变。

4 个回复
SO网友:OzzyCzech

添加到函数。php

add_filter(\'tiny_mce_before_init\', \'tiny_mce_before_init\');
和函数tiny\\u mce\\u before\\u 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;
}
http://core.trac.wordpress.org/ticket/19666 - 这是已知的错误,有解决方法,但不修复选项卡,只有新行字符

SO网友:Donna

我还为函数添加了自定义短代码。php,以避免从html切换到可视化编辑器时出现问题。主要是我把它用于iFrame,但也许它在这里也会有帮助。

SO网友:Martin York

这个插件似乎保留了<pre> 标签。

Preserve Code Formatting

SO网友:Jonas Lundman

对于任何struggles 具有pasting 或使用formatted <pre> code 在里面Visual editor. 这个解决方案已经为我工作了很多年,and I love it. 这种方法使用“中间人”在编辑和wpautop() 前端。

只需粘贴到函数中即可。php

这看起来很重,但这就是为什么jQuery在与tinMCE API对话时必须在全局范围内的原因。多拉设计$ 无法使用和the jQuery text clutter the code down. 主要是创建占用空间的HTML元素。

How it works: 非常简单,不用“触摸”它-不要弄乱它。值得一试!

/**
 * 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_focusbutton(){
        if(jQuery(\'ua-id-mce-focusbutton\').get(0)) return;
        var jQueryE = jQuery(\'<a />\').addClass(\'button ua-id-mce-focusbutton\').css(\'float\', \'right\').on(\'click\', function(){
            jQuery(\'html, body\').stop().animate({ scrollTop: (jQuery(\'#wp-content-wrap\').offset().top) - 20 }, 500);
            tinymce.activeEditor.focus();
            return false;
        }).attr(\'title\', \'Scroll and focus the editor Toolbar in view\').text(\'Toolbar focus\').css(\'margin\', \'5px\');
        jQuery(\'.mce-statusbar .mce-flow-layout\').prepend(jQueryE);
    }

    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;
            });
            ua_tinyMCE_focusbutton();
        });
    }

    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, \'\');
        //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";
}
这种方法is not a hack 或者一种陈腐的preg match解决方案。它生成与默认API相同的转换。

The PUSH cleanup 如果粘贴来自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");
}
B.T.W, 它有一个方便的focus button, 显示在编辑器的右下角,在处理大量<pre> 代码块。关闭屏幕设置“启用全高编辑器和无干扰功能”为了更好的UI。

结束

相关推荐

在管理区域中是否有一个钩子可以将样式表和/或JS放入iframe(厚框或tinyMCE)中

我正在处理我的管理区主题,我想对thickbox和tinyMCE的外观进行一些修改。我可以通过使用将自定义样式表和JS添加到我的管理区域来进行大部分更改wp_enqueue_script() 和wp_enqueue_style(), 但我很难做出其他一些改变。这是因为包含元素的iframe要么无法通过我自己的样式访问,要么在它们的头部有一些其他样式表和JS覆盖了我的样式表和JS。我使用一些JavaScript和CSS或多或少地绕过了这个问题!important 声明,但我想知道是否有任何挂钩允许我调用wp