CKEditor does nothing inside WinJS framework

0
votes

I have a web app that is made using WinJS. It is a single-page navigation style app, meaning it has a root view and I'm navigating between a few different HTML fragments loaded into a div on the root page.

In any case, I'm trying to add the rich text editor, CKEditor, on one of the pages. As far as I can tell, as long as the main javascript file is loaded and I declare one of my divs as 'content-editable', I should get the CKEditor popup showing up. However, nothing shows up on my web app and I am positive the ckeditor javascript file is loading. I've tried this in both Chrome and Edge.

I've tried manually making CKEditor load with the editable div using the code below and it still doesn't work. (questionDiv is the id for my div)

CKEDITOR.disableAutoInline = !0;
CKEDITOR.inline('questionDiv');

I even tried to load a classic editor using a textarea and using CKEditor's built-in commands to replace the textarea with their iframe. That doesn't seem to do anything, either. It looks just like a textarea.

Has anyone had any experience integrating CKEditor with a WinJS app? What can I be doing wrong?

Followup The same code running on Firefox actually works, but does not work in Chrome and Edge. You can temporarily see it running here:

https://labsjs.blob.core.windows.net/sdk/LabsJS-1.0.4/labshost.html?lab=https://chemapps.azurewebsites.net/index.html?PostMessageLabHost

The editor should be the box under the 'Question' heading.

1
web-applicationsckeditorwinjs

1 Answers

0
votes

Seems that the WinJS.UI.Pages.render function for rendering html content into divs does something funny that disallows any of the WYSIWYG editors I've tried (CKEditor, TinyMCE, NicEdit). I've even tried the fragment only renderer WinJS.UI.Fragments.render and it works the same way.

However, if you use divs on the main html page (the one that is loaded directly in the browser), then you can get the editors to work.

This means I've had to change the way my web app works. I can no longer switch between html pages. My own workaround was to use a Pivot control and put all of my content into the different PivotItems. Not the UI I wanted to use, but it will work now. (I'd rather use the SplitView)