Cambiar el color del texto en div contentable

Demo está aquí

Tengo una div contenida. Quiero la funcionalidad en el div de la siguiente manera:

Cuando hago clic en la etiqueta de anclaje roja, el nuevo texto que escribiré será de color rojo, y cuando haga clic en azul, el texto debería comenzar a escribir con color azul.
Nota: Al hacer clic en el ancla de color azul, el contenido escrito en color rojo no debe ponerse azul y viceversa. Esto significa que en el div, tendremos texto escrito en rojo y azul por fin. Puedo escribir texto en cualquier lugar de la div.

$("#red").click(function () { $("div").addClass("red"); $("div").removeClass("blue"); }); $("#blue").click(function () { $("div").addClass("blue"); $("div").removeClass("red"); }); 

Problema: el problema en mi código es que cuando hago clic en rojo, cambia todo el color del div en rojo y lo mismo que en azul.

Puede utilizar las API de edición de HTML para tales casos de uso. Referencia aquí: https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html

En resumen, use el execCommand junto con styleWithCSS para lograr lo que desea. styleWithCSS le permitirá controlar si el método execCommand debe generar formato CSS o HTML en el documento. Pase true para usar el estilo CSS en lugar de generar la etiqueta de fuente.

Pruébelo abajo …

Fragmento de ejemplo :

 var red = document.getElementById("red"), blue = document.getElementById("blue"), reset = document.getElementById("reset") ; red.addEventListener("click", function() { setColor("#f00"); }); blue.addEventListener("click", function() { setColor("#00f"); }); reset.addEventListener("click", function() { setColor("#000"); }); function setColor(color) { document.execCommand('styleWithCSS', false, true); document.execCommand('foreColor', false, color); } 
 Red | Blue | Reset | 

this is some text

Por favor, intente esto

 $("#red,#blue").click(function () { $new = $("
", { class: $(this).attr('id'), contenteditable : 'true' }) $("#my-contenteditable-div") .append($new) .children('div:last').focus(); });

MANIFESTACIÓN

Aquí hay algo que cansé. No estoy seguro de lo que estás tratando de lograr.

Lo que hice: 1. Lo que hice fue un tramo editable creado con color rojo y azul cuando se hizo clic en el botón. 2. margen negativo para span para reducir el espacio creado por ‘  

Verifica el código. VIOLÍN

 $("#red").click(function () { $('') .attr('contenteditable','true') .attr('class','red') .html(' ') .appendTo('#my-contenteditable-div') }); $("#blue").click(function () { $('') .attr('contenteditable','true') .attr('class','blue') .html(' ') .appendTo('#my-contenteditable-div') }); 
 .red { color:red; } .blue { color:blue; } div { height:100px; border:1px solid red; } span{margin-left:-4px;} 
 Red Pen
Blue Pen


Prueba este. Funciona perfectamente para mí

 $("#red").click(function () { $('#my-contenteditable-div').html($('#my-contenteditable-div').html() + ' '); }); $("#blue").click(function () { $('#my-contenteditable-div').html($('#my-contenteditable-div').html() + ' '); }); 

Demostración aquí: https://jsfiddle.net/Saneesharoor/ftwbx88p/

Esto es lo que hice:

 $("#red").click(function () { $("div").html($("div").html() + ""); }); $("#blue").click(function () { $("div").html($("div").html() + ""); }); $("div").keypress(function (e) { e.preventDefault(); $("div > span:last-child").text($("div > span:last-child").text() + String.fromCharCode(e.which)); }); 

Aquí está el JSFiddle