javascript - ejemplos - contenteditable react
Evita agregar editable<div> en ENTER-Chrome (19)
Tengo un elemento contenteditable , y cada vez que escribo algunas cosas y presiono ENTER , crea un nuevo <div> y coloca el texto de la nueva línea allí. No me gusta esto un poco.
¿Es posible evitar que esto suceda o al menos simplemente reemplazarlo con un <br> ?
Aquí está la demo http://jsfiddle.net/jDvau/
Nota: Esto no es un problema en Firefox.
Agregar display:inline-block; estilo display:inline-block; para contenteditable , no generará div , p y span automáticamente en Chrome.
Es posible evitar este comportamiento por completo.
$(''<div class="temp-contenteditable-el" contenteditable="true"></div>'').appendTo(''body'').focus().remove();
Este es un editor HTML5 dirigido por navegador. Puede envolver su texto con <p>...</p> , y cada vez que presione ENTER obtendrá <p></p> . Además, el editor funciona de esta manera cada vez que presiona MAYÚS + ENTRAR, inserta <br /> .
<div contenteditable="true"><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor veniam asperiores laudantium repudiandae doloremque sed perferendis obcaecati delectus autem perspiciatis aut excepturi et nesciunt error ad incidunt impedit quia dolores rerum animi provident dolore corporis libero sunt enim. Ad magnam omnis quidem qui voluptas ut minima similique obcaecati doloremque atque!
<br /><br />
Type some stuff, hit ENTER a few times, then press the button.
</p>
</div>
Mira esto: http://jsfiddle.net/ZQztJ/
Impedir la creación de una nueva div en div editable de contenido en cada tecla enter: la solución que he encontrado es muy simple:
var newdiv = document.createElement("div");
newdiv.innerHTML = "Your content of div goes here";
myEditablediv.appendChild(newdiv);
Esto --- el contenido de innerHTML previene la creación de una nueva div en div editable de contenido en cada tecla de enter.
Intenta usar ckeditor. También proporciona un formato como este en SOF.
La forma en que se comporta contenteditable al presionar enter depende de los navegadores, el <div> ocurre en webkit (chrome, safari) e IE.
Luché con esto hace unos meses y lo corregí de esta manera:
//I recommand you trigger this in case of focus on your contenteditable
if( navigator.userAgent.indexOf("msie") > 0 || navigator.userAgent.indexOf("webkit") > 0 ) {
//Add <br> to the end of the field for chrome and safari to allow further insertion
if(navigator.userAgent.indexOf("webkit") > 0)
{
if ( !this.lastChild || this.lastChild.nodeName.toLowerCase() != "br" ) {
$(this).html( $(this).html()+''<br />'' );
}
}
$(this).keypress( function(e) {
if( ( e.keyCode || e.witch ) == 13 ) {
e.preventDefault();
if( navigator.userAgent.indexOf("msie") > 0 ) {
insertHtml(''<br />'');
}
else {
var selection = window.getSelection(),
range = selection.getRangeAt(0),
br = document.createElement(''br'');
range.deleteContents();
range.insertNode(br);
range.setStartAfter(br);
range.setEndAfter(br);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}
}
});
}
Espero que ayude, y lo siento por mi inglés si no es tan claro como sea necesario.
EDITAR : Corrección de la función jQuery eliminada jQuery.browser
Otra forma de hacerlo
$(''button'').click(function(){
$(''pre'').text($(''div'')[0].outerHTML)
});
$("#content-edit").keydown(function(e) {
if(e.which == 13) {
$(this).find("div").prepend(''<br />'').contents().unwrap();
}
});
Primero debemos capturar cada usuario clave para ver si se presiona enter, luego evitamos la creación de <div> y creamos nuestra propia etiqueta de <br> .
Hay un problema: cuando lo creamos, nuestro cursor permanece en la misma posición, por lo que usamos la API de selección para colocar el cursor al final.
No olvides agregar una etiqueta <br> al final de tu texto porque si no lo haces, la primera vez que ingreses no hará una nueva línea.
$(''div[contenteditable]'').on(''keydown'', function(e) {
var key = e.keyCode,
el = $(this)[0];
// If Enter
if (key === 13) {
e.preventDefault(); // Prevent the <div /> creation.
$(this).append(''<br>''); // Add the <br at the end
// Place selection at the end
// http://.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
});
Prueba esto
$(''div[contenteditable]'').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13) {
// insert 2 br tags (if only one br tag is inserted the cursor won''t go to the next line)
document.execCommand(''insertHTML'', false, ''<br><br>'');
// prevent the default behaviour of return key pressed
return false;
}
});
Prueba esto:
$(''div[contenteditable="true"]'').keypress(function(event) {
if (event.which != 13)
return true;
var docFragment = document.createDocumentFragment();
//add a new line
var newEle = document.createTextNode(''/n'');
docFragment.appendChild(newEle);
//add the br, or p, or something else
newEle = document.createElement(''br'');
docFragment.appendChild(newEle);
//make the br replace selection
var range = window.getSelection().getRangeAt(0);
range.deleteContents();
range.insertNode(docFragment);
//create a new range
range = document.createRange();
range.setStartAfter(newEle);
range.collapse(true);
//make the cursor there
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
return false;
});
Puede envolver sus párrafos con la etiqueta <p> por ejemplo, apper en una nueva línea en lugar de div Ejemplo:
<div contenteditable="true"><p>Line</p></div>
Después de insertar una nueva cadena:
<div contenteditable="true"><p>Line</p><p>New Line</p></div>
Puede tener etiquetas <p> separadas para cada línea en lugar de utilizar etiquetas <br> y obtener una mayor compatibilidad de navegador de fábrica.
Para hacer esto, ponga una etiqueta <p> con un texto predeterminado dentro de la div contenida.
Por ejemplo, en lugar de:
<div contenteditable></div>
Utilizar:
<div contenteditable>
<p>Replace this text with something awesome!</p>
</div>
Probado en Chrome, Firefox y Edge, y el segundo funciona igual en cada uno.
El primero, sin embargo, crea divs en Chrome, crea saltos de línea en Firefox, y en Edge crea divs y el cursor se vuelve a colocar al principio del div actual en lugar de pasar al siguiente.
Probado en Chrome, Firefox y Edge.
Puedes hacer esto solo con un cambio de CSS:
div{
background: skyblue;
padding:10px;
display: inline-block;
}
pre{
white-space: pre-wrap;
background: #EEE;
}
Tuve el mismo problema y encontré la solución (CHROME, MSIE, FIREFOX), sigo mi código en el enlace.
$(document).on(''click'',''#myButton'',function() {
if (navigator.userAgent.toLowerCase().indexOf(''chrome'') > -1)
var str = $(''#myDiv'').html().replace(/<br>/gi,'''').replace(/<div>/gi,''<br>'').replace(/<//div>/gi,'''');
else if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1)
var str = $(''#myDiv'').html().replace(/<//br>/gi,'''').replace(/<br>/gi,''<br>'').replace(/<//br>/gi,'''');
else if (navigator.userAgent.toLowerCase().indexOf("msie") == -1)
var str = $(''#myDiv'').html().replace(/<br>/gi,'''').replace(/<p>/gi,''<br>'').replace(/<//p>/gi,'''');
$(''#myDiv2'').removeClass(''invisible'').addClass(''visible'').text(str);
$(''#myDiv3'').removeClass(''invisible'').addClass(''visible'').html(str);
});
Usaría el estilo (Css) para solucionar el problema.
div[contenteditable=true] > div {
padding: 0;
}
Firefox de hecho agrega una ruptura del elemento de bloque
, mientras que Chrome ajusta cada sección en una etiqueta. Usted css da a los divs un relleno de 10 px junto con el color de fondo.
div{
background: skyblue;
padding:10px;
}
Alternativamente, puede replicar el mismo efecto deseado en jQuery:
var style = $(''<style>p[contenteditable=true] > div { padding: 0;}</style>'');
$(''html > head'').append(style);
Aquí hay un tenedor de tu violín http://jsfiddle.net/R4Jdz/7/
Utilice shift + enter en lugar de enter para colocar solo una etiqueta <br> o envolver su texto en etiquetas <p> .
agregar un prevenir predeterminado a la div
document.body.div.onkeydown = function(e) {
if ( e.keycode == 13 ){
e.preventDefault();
//add a <br>
div = document.getElementById("myDiv");
div.innerHTML += "<br>";
}
}
document.execCommand(''defaultParagraphSeparator'', false, ''p'');
Sobreescribe el comportamiento predeterminado para tener un párrafo en su lugar.
En Chrome, el comportamiento predeterminado en enter es:
<div>
<br>
</div>
Con ese comando va a ser
<p>
<br>
</p>
Ahora que es más lineal, es fácil tener solo lo que necesita.
if (navigator.userAgent.toLowerCase().indexOf(''msie'') > -1) {
var range = document.getSelection();
range.pasteHTML(range.htmlText + ''<br><br>'');
}
else if(navigator.userAgent.toLocaleLowerCase().indexOf(''trident'') > -1) {
var range = document.getSelection().getRangeAt(0); //get caret
var nnode = document.createElement(''br'');
var bnode = document.createTextNode(''/u00A0''); //
range.insertNode(nnode);
this.appendChild(bnode);
range.insertNode(nnode);
}
else
document.execCommand(''insertHTML'', false, ''<br><br>'')
Donde this es el contexto real que significa document.getElementById(''test''); .