Textarea type special characters

Question

In a textarea I want the user to be able to press the letters on their keyboard and type 𝒜ℬ𝒞𝒟 etc. (so typing the &ascr ; &bscr ; special characters)

Is there anyway to do this? And have the user freely being able to edit the characters like in a normal textarea.

The user will be able to click to select a style (which sets my var style integer) and the letters will be a different style like 𝔄𝔅ℭ𝔇 (&Afr ; &Bfr ; &Cfr ; etc.)

What I want to achieve at the end is the user typing a paragraph, then the text will appear formatted in that way in the textarea, they could switch styles in between. Then they will be able to copy the text / save it as a .html file.

Any method is welcome! :)

Thanks!

.

Example of what the user could type: Hello my name is Friedpanseller!

What the textarea could display: ℋℯ𝓁𝓁ℴ ℳ𝓎 𝒩𝒶𝓂ℯ ℐ𝓈 𝔉𝔯𝔦𝔢𝔡𝔭𝔞𝔫𝔰𝔢𝔩𝔩𝔢𝔯!

Then the user can delete some words in the middle / edit them like a normal textarea

Example of what the user could type: My names are Friedpanseller!

What the textarea could display: ℳ𝓎 𝒩𝒶𝓂ℯ𝓈 𝒜𝓇ℯ 𝔉𝔯𝔦𝔢𝔡𝔭𝔞𝔫𝔰𝔢𝔩𝔩𝔢𝔯!

Answer 1

尝试使用第三方工具（我更喜欢使用CKEditor ），因为它是免费的

Answer 2

Here is an example of what you could do. Type "a" (without quotes) into that text area. It's not exactly fast , but it's what I could gather. It doesn't address all of your requests but it's a start.

$("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);
    }
});

You could try to apply this systematically for the characters you want to substitute. Good luck.

Answer 3

When you are adding the code in blank html, please add document.ready for 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);
    }
});
});

It works this way, if we use the same code in separate HTML page.