Textarea escribe caracteres especiales

En un área de texto, quiero que el usuario pueda presionar las letras en su teclado y escribir 𝒜ℬ𝒞𝒟 etc. (para escribir los caracteres especiales & ascr; & bscr;)

¿Hay alguna forma de hacer esto? Y haga que el usuario pueda editar libremente los caracteres como en un área de texto normal.

El usuario podrá hacer clic para seleccionar un estilo (que establece mi entero de estilo var ) y las letras tendrán un estilo diferente como 𝔄𝔅ℭ𝔇 (& Afr; & Bfr; & Cfr; etc.)

Lo que quiero lograr al final es que el usuario escriba un párrafo, luego el texto aparecerá formateado de esa manera en el área de texto, podría cambiar de estilos entre ellos. Luego, podrán copiar el texto / guardarlo como un archivo .html.

¡Cualquier método es bienvenido! 🙂

¡Gracias!

.

Ejemplo de lo que el usuario podría escribir: Hola, mi nombre es Friedpanseller.

Lo que el área de texto podría mostrar: ℋℯ𝓁𝓁ℴ ℳ𝓎 𝒩𝒶𝓂ℯ 𝔉𝔯𝔦𝔢𝔡𝔭𝔞𝔫𝔰𝔢𝔩𝔩𝔢𝔯 𝔉𝔯𝔦𝔢𝔡𝔭𝔞𝔫𝔰𝔢𝔩𝔩𝔢𝔯!

Entonces el usuario puede eliminar algunas palabras en el medio / editarlas como un área de texto normal

Ejemplo de lo que el usuario podría escribir: ¡Mis nombres son Friedpanseller!

Lo que el área de texto podría mostrar: ℳ𝓎 𝒩𝒶𝓂ℯ𝓈 𝒜𝓇ℯ 𝔉𝔯𝔦𝔢𝔡𝔭𝔞𝔫𝔰𝔢𝔩𝔩𝔢𝔯!

Trate de usar las herramientas de terceros (principalmente prefiero usar CKEditor ) porque es gratis

Aquí hay un ejemplo de lo que podrías hacer. Escriba “a” (sin comillas) en ese área de texto. No es exactamente rápido , pero es lo que pude reunir. No aborda todas sus solicitudes, pero es un comienzo.

$("textarea").bind("keyup", function() { var cursorPosition = $('textarea').prop("selectionStart"); var text = $(this).val(); if (text.indexOf('a') > -1) { text = text.replace(/a/g, '𝒶'); $(this).val(text); $('textarea').prop("selectionStart", cursorPosition - 1); $('textarea').prop("selectionEnd", cursorPosition - 1); } }); 

Podría tratar de aplicar esto sistemáticamente para los personajes que desea sustituir. Buena suerte.

Cuando agregue el código en html en blanco, agregue document.ready para jquery event bind.

 $(document).ready(function(){ $("textarea").bind("keyup", function() { var cursorPosition = $('textarea').prop("selectionStart"); var text = $(this).val(); if (text.indexOf('a') > -1) { text = text.replace(/a/g, '𝒶'); $(this).val(text); $('textarea').prop("selectionStart", cursorPosition - 1); $('textarea').prop("selectionEnd", cursorPosition - 1); } }); }); 

Funciona de esta manera, si usamos el mismo código en una página HTML separada.