How to force cursive display in ckeditor while typing

Question

<!DOCTYPE html>
<html>
  <head>
    <script src="http://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
  </head>

  <body>
 <textarea name="editorUrdu"></textarea>
 <script>
  CKEDITOR.plugins.addExternal( 'easykeymap', '/ckeditor/plugins/easykeymap', 'plugin.js' );
  CKEDITOR.replace( 'editorUrdu',{
   extraPlugins: 'easykeymap',
   contentsLangDirection: 'rtl'
  });
 </script>
  </body>
</html>

/**
 * This work is mine, and yours. You can modify it as you wish.
 * @Author: Roni Saha<roni.cse@gmail.com>
 *
 * This source file is subject to the MIT license that is bundled
 * with this source code in the file LICENSE.
 */

CKEDITOR.plugins.add('easykeymap',
    {
        requires : ['wysiwygarea'],
        init: function (editor) {

            //var keyMaps = CKEDITOR.tools.extend({}, editor.config.easykeymaps || {}, true);
            //Not using keymap specification from config variables, but using internally defined ones from param below

            function isRegisteredKeystroke(code) {
                if(typeof editor.keystrokeHandler.keystrokes[code] != 'undefined') {
                    console.warn("the keystroke : " + code + " is being attached to another event")
                    return true;
                }
                return false;
            }
            
            var sm1 = [];   var en1 = [];
            sm1[192]="؏";   en1[192]="~";
            sm1[49]="۱";    en1[49]="1";
            sm1[50]="۲";    en1[50]="2";
            sm1[51]="۳";    en1[51]="3";
            sm1[52]="۴";    en1[52]="4";
            sm1[53]="۵";    en1[53]="5";
            sm1[54]="۶";    en1[54]="6";
            sm1[55]="۷";    en1[55]="7";
            sm1[56]="۸";    en1[56]="8";
            sm1[57]="۹";    en1[57]="9";
            sm1[48]="۰";    en1[48]="0";
            sm1[189]="-";   en1[189]="-";
            sm1[187]="=";   en1[187]="=";
            //sm1[8]="";    en1[8]="";//BACKSPACE
                
            var sm2 = [];   var en2 = [];
            sm2[9]="";      en2[9]="";//TAB
            sm2[81]="ق";    en2[81]="Q";
            sm2[87]="و";    en2[87]="W";
            sm2[69]="ع";    en2[69]="E";
            sm2[82]="ر";    en2[82]="R";
            sm2[84]="ت";    en2[84]="T";
            sm2[89]="ے";    en2[89]="Y";
            sm2[85]="ء";    en2[85]="U";
            sm2[73]="ی";    en2[73]="I";
            sm2[79]="ہ";    en2[79]="O";
            sm2[80]="پ";    en2[80]="P";
            sm2[219]="'";   en2[219]="{";
            sm2[221]="ﷲ";   en2[221]="}";
            sm2[220]="÷";   en2[220]="\\";
            
            var sm3 = [];   var en3 = [];
            //sm3[20]="";   en3[20]="";//CAPSLOCK
            sm3[65]="ا";     en3[65]="A";
            sm3[83]="س";    en3[83]="S";
            sm3[68]="د";     en3[68]="D";
            sm3[70]="ف";    en3[70]="F";
            sm3[71]="گ";    en3[71]="G";
            sm3[72]="ح";    en3[72]="H";
            sm3[74]="ج";    en3[74]="J";
            sm3[74]="ک";    en3[75]="K";
            sm3[76]="ل";    en3[76]="L";
            sm3[186]="؛";    en3[186]=":";
            sm3[222]=",";   en3[222]="\"";
            sm3[13]="";     en3[13]="";//ENTER
            
            var sm4 = [];   var en4 = [];
            //sm4[16]="";   en4[16]="";//SHIFT
            sm4[90]="ز";    en4[90]="Z";
            sm4[88]="ش";    en4[88]="X";
            sm4[67]="چ";    en4[67]="C";
            sm4[86]="ط";    en4[86]="V";
            sm4[66]="ب";    en4[66]="B";
            sm4[78]="ن";    en4[78]="N";
            sm4[77]="م";    en4[77]="M";
            sm4[188]="،";    en4[188]="<";
            sm4[190]="۔";    en4[190]=">";
            sm4[191]="/";   en4[191]="?";
            sm4[16]="";     en4[16]="";//SHIFT
                
            var keyBoard = {};
            keyBoard.Row1 = { "sm" : sm1, "en" : en1 };
            keyBoard.Row2 = { "sm" : sm2, "en" : en2 };
            keyBoard.Row3 = { "sm" : sm3, "en" : en3 };
            keyBoard.Row4 = { "sm" : sm4, "en" : en4 };

            function getMappedCharacter(code) {
                console.info(code);
                if (typeof keyBoard.Row1.sm[code] != 'undefined')
                    return keyBoard.Row1.sm[code] 
                else if (typeof keyBoard.Row2.sm[code] != 'undefined')
                    return keyBoard.Row2.sm[code]
                else if (typeof keyBoard.Row3.sm[code] != 'undefined')
                    return keyBoard.Row3.sm[code]
                else if (typeof keyBoard.Row4.sm[code] != 'undefined')
                    return keyBoard.Row4.sm[code]
                else
                    return false;
            }

            editor.on( 'key', function( event ) {
    var t = event.target;
                var mappedCode = getMappedCharacter(event.data.keyCode);
                if (mappedCode !== false && !isRegisteredKeystroke(event.data.keyCode)) {

                    event.cancel();

                    if(typeof mappedCode == 'function') {
                        return mappedCode.call(editor, editor);
                    }
                    editor.insertText(mappedCode);
                }
            } );
        }
    });

I'm using ckeditor for allowing my users to input Urdu text. Like Arabic, Urdu is cursive, and uses distinct ligatures when joined.

I'm using the

 editor.on( 'key', function( event ))

event to intercept the

event.data.keyCode

and replace it using

 editor.insertText()

function.

So, e.g. if the user types L and A, I replace it with the Urdu

ا (U+0627)

and

ل (U+0644).

Now, after being typed, they both appear as distinct characters, separate from each other. I can press space, or enter, and they both remain as they are. But I would like them to be replaced with their proper equivalent ligature ﻻ which is FEFB in this unicode chart

I see that ckeditor automatically correct this if I switch to Source view. There, inside the <p> block, it shows the separate, disjointed letter's already replace with proper cursive ligature. And it keeps it that way when I switch back from Source view. But whatever is causing this to happen, how can I trigger that to happen while typing?

Attaching images also.

After typing After going to source view After returning from source view

if you share your source on jsfiddle, it will be helpful to debug — Pavan Kumar Jorrigala, Feb 18 '17 at 01:20
and here is the plugin which this page uses: http://test-asifshiraz.c9users.io/ckeditor/plugins/easykeymap/plugin.js — Asif Shiraz, Feb 18 '17 at 06:34
Added code separately as snippets. One file needs to be saved as plugin.js and then included with respect to the path specified in the html file. Doesn't work on filesystem, so need to be http published for the page to find the plugin script file. — Asif Shiraz, Feb 18 '17 at 17:47

Pavan Kumar Jorrigala · Accepted Answer · 2017-02-19T22:36:54.370

When ever you type L and A , editor.insertText() is just append it as two separate stings, instead of combining into one.

<p>"ل"
     "ا"
<br>
</p>

that why its not producing desired output.

Added these two line

var $pTag = editor.getSelection().getRanges()[0].startContainer.$; // accessing the p tag
$pTag.innerText = $pTag.innerText+mappedCode; // modifing the inner text

replacing

editor.insertText(mappedCode); // in editor.on( 'key', function( event )

will output as "لا"

above fix has some issues to deal with like linebeak(new line)

Updated

replace the below snippet

var $pTag = editor.getSelection().getRanges()[0].startContainer.$;
var innerText =$pTag.innerText; // accessing the p tag data
$pTag.innerText = ""; // removing the existing data
editor.insertHtml(innerText+mappedCode); // concat with new string

with

editor.insertText(mappedCode); // in editor.on( 'key', function( event )

Example: codepen

Interesting solution... but other than the line breaks, it also changes the way different text insertion scenarios work. E.g. when I keep adding text and click line breaks, or new paragraphs, the cursor and text insertion points change, and in some cases, it enters a state where no more typed text appears. — Asif Shiraz, Feb 19 '17 at 18:06
`I tried to solve why It is not combining those symbols into FEFB`, there is cursor issue too, it is always on right side. — Pavan Kumar Jorrigala, Feb 19 '17 at 22:14

How to force cursive display in ckeditor while typing

1 Answers1

Updated