ejemplos - jquery selector
Pegue texto enriquecido en div editable por contenido y mantenga solo el formato de negrita y cursiva (3)
Quiero pegar un texto enriquecido que tiene diferentes fuentes, tamaños de fuente, pesos de fuente, etc. en un div editable por el contenido y SOLO mantenga la negrita y la cursiva. ¿Alguna idea de cómo hacer esto?
El siguiente código convierte el texto enriquecido en texto sin formato cuando se pega en div editable por contenido.
$(''[contenteditable]'').on(''paste'',function(e) {
e.preventDefault();
var text = (e.originalEvent || e).clipboardData.getData(''text/plain'') || prompt(''Paste something..'');
document.execCommand(''insertText'', false, text);
});
He intentado ver la variable de text en el código anterior, pero no parece estar formateada.
Aquí hay una demostración de trabajo: http://jsfiddle.net/SJR3H/7/
$(document).ready(function(){
$(''[contenteditable]'').on(''paste'',function(e) {
e.preventDefault();
var text = (e.originalEvent || e).clipboardData.getData(''text/html'') || prompt(''Paste something..'');
var $result = $(''<div></div>'').append($(text));
$(this).html($result.html());
// replace all styles except bold and italic
$.each($(this).find("*"), function(idx, val) {
var $item = $(val);
if ($item.length > 0){
var saveStyle = {
''font-weight'': $item.css(''font-weight''),
''font-style'': $item.css(''font-style'')
};
$item.removeAttr(''style'')
.removeClass()
.css(saveStyle);
}
});
// remove unnecesary tags (if paste from word)
$(this).children(''style'').remove();
$(this).children(''meta'').remove()
$(this).children(''link'').remove();
});
});
Edición posterior: http://jsfiddle.net/SJR3H/8/
Agregué las siguientes líneas:
$item.replaceWith(function(){
return $("<span />", {html: $(this).html()});
});
En realidad reemplaza todas las etiquetas html con span s. Allí puede optar por dejar algunas etiquetas como estaban en el texto original ( h1 , p , etc.), diseñándolas como desee.
Comencemos con su código:
//on paste
var text = (e.originalEvent || e).clipboardData.getData(''text/plain'')
//html in clipboard are saved as Plain Unicode string ,
getData(''text/plain'') //return data as string,
//if MIME TYPE ''text/html'' is used you will get data as html with style attributes
// insert text
document.execCommand(''insertText'', false, text);
//this will simply insert the text to contenteditable div.
//so there is no chance of knowing recieved text is bold / italics.
(1) debemos obtener datos como html, para obtener propiedades de estilo: fontWeight, fontStyle.
(2) reducir html para el formato de estilo necesario,
(3) añadir a div divisible
! importante ::
Dependemos de la API del portapapeles, para obtener datos.
no es totalmente compatible con los navegadores más nuevos, por favor verifique los enlaces a continuación:
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/paste
así que en el navegador IE no funcionará como se esperaba.
El argumento del formato de datos que pasamos en getData () es diferente en el navegador IE:
http://msdn.microsoft.com/en-us/library/ie/ms536436(v=vs.85).aspx
así que solo obtenemos una cadena simple del método getData (), verifiqué en IE 9.0.8112.16421 (no actualizado),
No tengo conocimiento de la versión IE 10, 11.
Codifiqué de una manera, si getData ("Html") es compatible con el código 10,11, los requisitos se cumplirán.
El código funciona: como hizo @Cristi, obtén todos los elementos html.
iterar a través de ellos, en lugar de cambiar los atributos de estilo usamos etiquetas.
Etiquetas para negrita y etiqueta para cursiva.
Las iteraciones se realizan de forma asíncrona, porque pegar contenido de texto grande puede bloquear el navegador.
Había probado en Chrome, Firefox.
pasteArea.addEventListener(''paste'', function(e) {
// prevent pasting text by default after event
e.preventDefault();
var clipboardData = {},
rDataText,
rDataHTML;
clipboardData = e.clipboardData;
rDataHTML = clipboardData.getData(''text/html'');
rDataPText = clipboardData.getData(''text/plain'');
if (rDataHTML && rDataHTML.trim().length != 0) {
//Function Call to Handle HTML
return false; // prevent returning text in clipboard
}
if (rDataPText && rDataPText.trim().length != 0) {
//Function Call to Handle Plain String
return false; // prevent returning text in clipboard
}
}, false);
// Handle Plain Text
function PlainTextHandler(pText) {
// Remove Line breaks
// append to contenteditable div - using range.insertNode()
// document.execCommand(); had issue in ie9 so i didn''t used it
}
// Handle HTML
function formatHtml(elem, complete) {
var flag_italic = false;
var flag_weight = false;
var fontStyle;
var fontWeight;
if (elem.nodeType == 1) { // only pass html elements
// get style in css
var CSSStyle = window.getComputedStyle(elem);
fontStyle = CSSStyle.fontStyle;
fontWeight = CSSStyle.fontWeight;
// get style defined by inline
var InlineStyle = elem.style;
inlineFontStyle = InlineStyle[''font-style''];
inlineFontWeight = InlineStyle[''font-weight''];
if (inlineFontStyle && inlineFontStyle.trim() != '''') fontStyle = inlineFontStyle;
if (inlineFontWeight && inlineFontWeight.trim() != '''') fontWeight = inlineFontWeight;
// get style defined in MSword
var msStyle = elem.getAttribute(''style'');
if (/mso-bidi/.test(msStyle)) {
var MSStyleObj = {};
var styleStrArr = msStyle.split(";");
for (i = 0; i < styleStrArr.length; i++) {
var temp = styleStrArr[i].split(":");
MSStyleObj[temp[0]] = temp[1];
}
fontStyle = MSStyleObj[''mso-bidi-font-style''];
fontWeight = MSStyleObj[''mso-bidi-font-weight''];
}
if (fontStyle && fontStyle == ''italic'') flag_italic = true; // flag true if italic
if (fontWeight && (fontWeight == ''bold'' || 600 <= (+fontWeight))) flag_weight = true; // flag true if bold - 600 is semi bold
// bold & italic are not applied via style
// these styles are applied by appending contents in new tags string & bold
if (flag_italic && flag_weight) {
var strong = document.createElement(''strong'');
var italic = document.createElement(''i'');
strong.appendChild(italic);
newtag = strong;
} else {
if (flag_italic) {
newtag = document.createElement(''i'');
} else if (flag_weight) {
newtag = document.createElement(''strong'');
} else {
// remove un wanted attributes & element
var tagName = elem.tagName;
// strong are not skipped because, by creating new unwanted attributes will be removed
if (tagName == ''STRONG'' || tagName == ''B'') {
newtag = document.createElement(''strong'');
} else if (tagName == ''I'') {
newtag = document.createElement(''i'');
} else {
newtag = document.createElement(''span'');
}
}
}
// content appended
var elemHTML = elem.innerHTML;
if (flag_italic && flag_weight) {
newtag.childNodes[0].innerHTML = elemHTML;
} else {
newtag.innerHTML = elemHTML;
}
// curr element is replaced by new
elem.parentNode.insertBefore(newtag, elem);
elem.parentNode.removeChild(elem);
}
complete() // completed one iteration
}
Utilicé esto en mi sitio web durante mucho tiempo
$(document).on(''paste'',''#tesc'', function() {
setTimeout(function() {
asd = strip_tags( $(''#tesc'').html(), ''<b><b/><i></i>'');
$(''#tesc'').html( asd );
},100);
});
function strip_tags (input, allowed) {
/* http://kevin.vanzonneveld.net*/
if ( input == undefined ) { return ''''; }
allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
var tags = /<//?([a-z][a-z0-9]*)/b[^>]*>/gi,
commentsAndPhpTags = /<!--[/s/S]*?-->|</?(?:php)?[/s/S]*?/?>/gi;
return input.replace(commentsAndPhpTags, '''').replace(tags, function ($0, $1) {
return allowed.indexOf(''<'' + $1.toLowerCase() + ''>'') > -1 ? $0 : '''';
});
}