Asp.net Keyman web with ckEditor

Just when you think it’s safe to go back in the water… :shark:
After creating an MVC project using Keyman, I am now tasked with an ASP.NET project using ckEditor text editor. (https://ckeditor.com/)
I can embed a textarea within the HTML, and Keyman is available.
The question is, how can I point Keyman at the ckEditor text “area”?
Any thoughts are appreciated.
Rusty

It should ‘just work’ I hope. It worked with CKEditor in the distant past and we do support ‘designMode’ documents which is what CKEditor works with. I haven’t looked recently. Let us know how you go.

Thanks Marc,
I’ve got the Keyman loading and showing the “selector”, but when I “show keyboard” (a valid one), then click within the CKEditor text area, the keyboard doesn’t show.
I’m not clear on how to point the Keyman keyboard at the CKEditor text area such that the keyboard will “appear” upon click.
Any suggestions?
Thanks,
Rusty

I’ve just run through a quick test and in default settings for both KeymanWeb and CKEditor, it does automatically integrate as you’d expect. Can you give some example code of how you are setting up both KeymanWeb and CKEditor?

Also: if you put a textarea onto the page, does KeymanWeb show?

I managed to get the keyboard to show…
I have two editors on the same screen, one in English and the other in i.e. Hebrew or Hindi etc.
When I click into the CKeditor text area, the keyboard shows, but it is always the last one loaded.
I’ve tried using the setDefaultKeyboardForControl given each CKeditor has a unique ID and these seem to have no effect.
script>
var kmw = keyman;
/* SetupDocument: Called when the page finishes loading /
function SetupDocument() {
confirm(“Setting of doc”)
/
Make sure that Keyman is initialized (we can’t guarantee initialization order) */
kmw.init();

        kmw.setDefaultKeyboardForControl('#CKSource', 'en', 'Eng');
        kmw.setDefaultKeyboardForControl('#CKTarget', 'hi', 'hin');
        kmw.show;
    }
/script>

Would you please advise?
Also, is there an event “Keyman shown” or a way to detect when the Keyman keyboard becomes visible?
Thanks,
Rusty

Yes, if i put a textarea on the page, keyman does come up with focus.
However, the ckeditor, when clicked does not invoke Keyman…

         div id="KeymanWebControl" >/div>

       //THIS WORKS, BUT KEYMAN WON'T APPEAR UPON CLICK/ENTRY
         CKEditor:CKEditorControl 
		 ID="SourceEditor" 
		 BasePath="/ckeditor/" 
		 runat="server" 
		 Height="150px">CKEDITOR/CKEditor:CKEditorControl>
            
       //THIS, TOO, WORKS, BUT NO KEYMAN
        textarea name="CKTarget"
                                  class="ckeditor"
                                  cols="50"
                                  rows="5">CKTARGET
                        /textarea>

//THIS WILL NOT DISPLAY THE CKEDITOR, BUT THE TEXTAREA
WILL INVOKE THE KEYMAN KEYBOARD
textarea
id=“txtMessage”
runat=“Server”
rows=“5”
cols=“40”
value=“Enter message here!”>/textarea>
script type=“text/javascript” language=“javascript”>
CKEDITOR.replace(‘txtMessage’, {
extraPlugins: ‘bidi’,
// Setting default language direction to right-to-left.
contentsLangDirection: ‘rtl’,
width: ‘115%’,
height: 110
});
/script>
Your advice is greatly appreciaated.
Rusty

PS If, while the web page is up, I bring up the keyman desktop On Screen Keyboard, the typed characters do appear within all textareas (selected individually)

Okay, I think we might need a minimal reproducible example to be able to investigate this. I can’t do it from snippets of code, sorry – there are too many variables I don’t know.

If you can follow the steps on that link above to create the example and share it with us (preferably as a zip file), then I can dig into it.

Sorry Marc, I re-read my post… :nauseated_face:
ckEditor sample code
Let me know if you have an problems compiling etc.
Thanks for your support!
Rusty

Note: it may take me some time to setup a development environment capable of working with your sample

ASP․NET is not my area of expertise so I don’t really know how to solve this, but the issue is in two parts:

  1. The CKEditor control is not yet initialised when onload is run, so KeymanWeb does not find the editor. You need to tell Keyman to attach to the editor with keyman.attachToControl(editorIframe) once it has been initialised.
  2. You need to find a reference for the CKEditor’s IFrame in order to pass it to attachToControl.

As a rudimentary proof of concept I added the following test link which worked (but this is not production ready):

<a href="javascript:keyman.attachToControl(document.getElementById('cke_contents_CKEditor1').firstChild.nextSibling);">Attach</a>
1 Like

This topic was automatically closed after 14 days. New replies are no longer allowed.