Conservez le code préformé collé tel quel - avec onglets - dans l'éditeur visuel
J'ai besoin d'un code manuel à mes fonctions php pour étendre l'éditeur visuel de supprimer les onglets lors du collage de blocs de code.
J'ai essayé ce code, trouvé sur ce site, mais il ne fonctionne pas comme je veux . Si j'ai:
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;
}
et coller dans Visual, j'ai eu ceci:
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;
}
Je comprends que les paramètres de TinyMCE n’entendent pas fonctionner avec la préservation des onglets, car "cela prend de la place" ...
J'ai besoin d'une solution manuelle coller et y aller , pas de liens pour installer des plugins qui gèrent beaucoup d'autres choses. La commutation entre les éditeurs n'est pas autorisée à changer quoi que ce soit. C'est possible?
Merci de lire et d'aider!
Ma réponse est qu'il n'y a aucune solution dans la conversation entre TinyMCE et Wordpress . Mais Il existe différentes approches pour travailler avec du matériel de codage .
J'ai partagé ceci sur une autre discussion, mais cela pourrait être un meilleur contexte dans votre question.
Cette solution fonctionne pour moi depuis de nombreuses années et j'adore . Cette approche utilise un "intermédiaire" pour fournir un pré-contenu et des caractères corrects entre les éditeurs et les problèmes wpautop(). Il gère également les problèmes de caractère d'entité entre les éditeurs.
Il suffit de coller dans functions.php
Comment utiliser: Créez un bloc de texte préformaté par défaut dans l'éditeur, comme si vous utilisiez le menu déroulant de la barre d'outils. Ensuite, dans l'éditeur, cliquez simplement dessus, comme vous le feriez avec des images. Une zone apparaît pour coller ou éditer, la renvoyer. Il suffit de cliquer à nouveau sur le bloc pré pour le modifier.
Il semble lourd, mais sa lumière. Aucune API modale ou autre. Mais jQuery doit être dans "la portée globale" car il parle avec API de tinyMCE . Le dollarign
$ne peut PAS être utilisé et le textejQueryencombrer le code . C'est principalement la création d'éléments HTML qui prend de la place.
Comment ça marche: Assez simple, Sans "toucher" ce -TinyMCE ne plaisante pas avec . Ça vaut le coup d'essayer!
/**
* 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";
}
Cette approche n’est pas un hack ni une solution de correspondance approximative. Il produit les mêmes conversions que l'API par défaut.
Le nettoyage Push fonctionne si vous collez un code d'une classe PHP ou autre, et de la fonction de bloc ou de découpe que vous souhaitez présenter, a beaucoup d'espace ou de tabulations "avant". Il calcule l'espace qui se produit sur la première ligne existante.
Fait ceci:
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");
}
Dans ceci:
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");
}
Remarque , c'est assez brut, il peut être personnalisé très facilement si vous connaissez jQuery. Cette fonction ajoute également le support TAB à l'éditeur de texte .
Conseils: Vous devriez donner à votre administrateur CSS tab-size: 3 à tous vos éléments de pré/éditeur/code-code afin de faire correspondre et de synchroniser l’aspect "visuel".
S'il vous plaît utilisez-le, commentez, et je vais essayer de guider les améliorations.