Fck Text (Rich Text Editor) toolbar isn't loading.

[Seanny37]

We've recently noticed the toolbar for the Fck Text web part isn't loading. We're still able to copy/paste text into the web part from Word and styling is retained, just the toolbar won't load.

I've ensured the latest version of SPfx 40 is loaded on the site, but no joy. Here's what it looks like for us:

[bubbleswap]

Thank you for this awesome pack of web parts! It makes SP Online 1000x better.

Just installed the package today and wanted to report also that the rich text editor/toolbar isn't appearing for Tabs and Accordion for us. Maybe it's something on our end, please let me know if there's anything I can check on to help troubleshoot and I'll grab a screen cap?

Thanks again for getting ahead of the game with this package!

[DavNeos]

We have the same issue. I tried on different O365 tenant and different browser (IE, Edge & Chrome). The toolbar doesn't appear, also in "inline" mode. It doesn't work with v 1.0.3 or v1.0.4.

[haroldvandekamp]

Same issue here for the Tabs and Accordion web parts

[Seanny37]

Regarding this outstanding issue, I had one of our developers look at this a bit closer and here's what he found in case it helps you:

i found that all the html elements used for the pop-up toolbar exist in the DOM, but when you click on the textbox the div removes the attribute "display:none". therefore the div should display, but it does not. I am assuming that there are other style sheets causing problems. i noticed that the height and width were set to "auto" instead of fixed size. that might cause problems.

[dhavalshah01]

So here is the scenario, When you do a gulp serve and load the webpart in the local workbench it works fantastic. But when we add the webpart in SharePoint site it displays only text and toolbar for rich bar editing is not loaded as @Seanny37 mentioned.

[dhavalshah01]

Ok, I might have figured out the temporary workaround for this.

We will have to set the display property to block back for the 'cke_top' element. I am using the instanceReady event of the component which will wait till the instance is ready and will set the display property to block.

Replace the following snippet of the code in FckTextWebPart.ts file

          CKEDITOR.instances[i].on('change', (elm?, val?) => {
            //CKEDITOR.instances[i].updateElement();
            elm.sender.updateElement();
            var value = ((document.getElementById(this.guid + '-editor')) as any).value;
            if (this.onPropertyPaneFieldChanged && value != null) {
              this.properties.text = value;
            }
          });
          CKEDITOR.instances[i].on('instanceReady', function () {
            //console.log("instance ready ");
            let ckElments = document.getElementsByClassName("cke_top") as HTMLCollectionOf<HTMLElement>;
            ckElments[0].style.display = "block"

          })
        }

[AzureDevOpsDemo]

Hi,

Toolbar is not visible when we have multiple editors on the same page.

How to have it visible for all editors on the page.

Please let me know if you need more information

Thanks & Regards, Arun

[AltruisticNerd]

Same issue here.

[AltruisticNerd]

Note, I applied dhavalshah01 fix above, but now I don't see the toolbar images. Looks like it's referencing files in the CDN which don't exist

Here is the css file reference: https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-05-04.012/sp-ckeditor/skins/moono-lisa/editor_ie.css?t=HBDF

Here is the icons.png image file it's looking for which is missing: https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-05-04.012/sp-ckeditor/skins/moono-lisa/icons.png?t=HBDF

It's also interesting to note that this css file is also missing: https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-05-04.015/sp-ckeditor/plugins/tableselection/styles/tableselection.css

[AltruisticNerd]

Some more troubleshooting:

I identified a file named 2.sp-canvas-sp-ckeditor_aba5107588a0d5e7bb48.js which seems to be a copy of ckeditor.js (version 4.8.0) and is calling the missing files from the MS CDN.

The odd thing is I overrode the location in FckTextWebPart.ts to my own hosted version of ckeditor.js yet it still loads the MS CDN version. var ckEditorCdn: string = 'https://myname.sharepoint.com/sites/TESTSITE/SiteAssets/apps/ckeditor/ckeditor.js';

Maybe CKEDITOR is being loaded elsewhere for some reason (even though it's broken)?

Here is the MS CDN url to the broken 4.8.0 version. https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-05-04.015/2.sp-canvas-sp-ckeditor_aba5107588a0d5e7bb48.js

[AltruisticNerd]

So, since it looks like Microsoft broke this, I have opened a support ticket with Microsoft.

Ticket 10276876

Please feel free to open your own Office 365 Support tickets and reference my ticket until they fix this.

[AltruisticNerd]

I have found a workaround by renaming the references to CKEDITOR. I don't have time to track down which reference is the right one so I renamed them all. I then deployed a local copy of CKEditor script library, renamed all references within those source files and voila it's all working again.

Microsoft deployed a broken release of the CKEditor to the entire O365 deployment, breaking this package everywhere it's referenced as CKEditor. Please open additional support tickets with Microsoft because their support team won't even recognize this as an issue they caused.

[AltruisticNerd]

Hi all, I added a UserVoice post for this as well. Please upvote if this affects you: https://office365.uservoice.com/forums/264636-general/suggestions/34566250-don-t-break-open-source-spfx-code-ckeditor-fail

[bendorge]

@rrfreeman, thank you for submitting the UserVoice post. Any chance you can provide a link to a sppkg file that includes your workarounds?

[AltruisticNerd]

Here is the adapted CKEditor CDN that you must deploy to your SharePoint instance: You must replace the CompanyName and CompanySiteName instances in the CKEDITORspfxFORTY.js file

All files should then be copied here: CompanyName.sharepoint.com/sites/CompanySiteName/SiteAssets/apps/ckeditorspfxforty/ ckeditorspfx40.zip

Package Download: https://votematrix-my.sharepoint.com/:u:/p/rfreeman/EZtNrAxuisRDo-t5uocT9LAB_e_oDHQokhSJZHXg8ap15Q?e=hMoT5w

[AltruisticNerd]

Next you'll need to Edit the SPFX 40 library, rebuild, and deploy the files as follows:

First: Replace the CompanyName and CompanySiteName instances in all files.
I used Visual Studio 2017 to do this since the VS Code Replace in Files feature is broken (only looks in open files).

Second: Package the project using VS Code. gulp bundle --ship gulp package-solution --ship

Third: Copy the \sharepoint\solution\spfx-fantastic-40.sppkg file to the app catalog.

Fourth: Copy the 333 files from temp\deploy* to SiteAssets\apps\SPFX40

Package Download: https://votematrix-my.sharepoint.com/:u:/p/rfreeman/EYrTr7B3G6JKh0R6hoKLOo4B28x5Pxobtm9BY_BADhkOiA?e=NmaND7

[AltruisticNerd]

Note that I'm not sure if the renames in the CKEditor package or in the SPFX libraries were the solution. If someone wants to deploy the CKEditor package above to a public CDN, then they could update the main spfx-40-fantastics code with the public CDN urls and generate a standard sppkg file for everyone.

However the easiest fix is for Microsoft to fix their code.

[sravankumar1107]

Hi rrfreeman .. Thanks for the fixes.. But still there are bugs .. like.. image buttons and table buttons are not working.. Still it is calling the external references like and getting logged.. for example. if you click on table icon .. getting error like "Uncaught Error: [CKEDITOR.dialog.openDialog] Dialog "table" failed when loading definition." and failed to load "https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-06-22.004/sp-ckeditor/plugins/table/dialogs/table.js?t=HBDF" .

[AHCFMELO]

any updates on this? The only workaround i have is to use a different text editor to create the content then copy and past it into the current fck editor. anyone have a better way to do this?

[akt2006]

Ok, I might have figured out the temporary workaround for this.

We will have to set the display property to block back for the 'cke_top' element. I am using the instanceReady event of the component which will wait till the instance is ready and will set the display property to block.

Replace the following snippet of the code in FckTextWebPart.ts file

          CKEDITOR.instances[i].on('change', (elm?, val?) => {
            //CKEDITOR.instances[i].updateElement();
            elm.sender.updateElement();
            var value = ((document.getElementById(this.guid + '-editor')) as any).value;
            if (this.onPropertyPaneFieldChanged && value != null) {
              this.properties.text = value;
            }
          });
          CKEDITOR.instances[i].on('instanceReady', function () {
            //console.log("instance ready ");
            let ckElments = document.getElementsByClassName("cke_top") as HTMLCollectionOf<HTMLElement>;
            ckElments[0].style.display = "block"

          })
        }

Hi dhavalshah01,

After applying your change still I am getting following error.

Failed to load resource: the server responded with a status of 404 () in filecdn.ckeditor.com/4.4.3/full-all/skins/moono-lisa/editor.css?t=H0CGeditor.css:1.

Any feedback. I guess some css file is missing or renamed in the CDN.

If anyone has any solution for this editor or can we use some other editor in the solution?

[akt2006]

Here is error which I am getting in the stand web part.

GET https://cdn.ckeditor.com/4.4.3/full-all/skins/moono-lisa/editor.css?t=H0CG net::ERR_ABORTED 404 in VM2365 ckeditor.js:94 file.

Any suggestion?

[akt2006]

Here is the code which worked for me. Please note that I have changed the skin type to moono because for moono-lisa skin some file is missing.

for (var i in CKEDITORspfxFORTY.instances) { CKEDITORspfxFORTY.instances[i].on("change", (elm?, val?) => { elm.sender.updateElement(); var value = (document.getElementById(elm.sender.name) as any) .value; var id = elm.sender.name.split("-editor-")[1]; this.properties.tabs[id].Content = value; }); }

      CKEDITORspfxFORTY.instances[i].on("instanceReady", function() {
        let ckElments = document.getElementsByClassName(
          "cke_top"
        ) as HTMLCollectionOf<HTMLElement>;
        //ckElments[0].style.display = "block";
        //debugger;
        for (let k = 0; k < ckElments.length; k++) {
          //ckElments[0].style.display = "block";
          ckElments[k].style.display = "block";
        }
      });

[rramdeo]

Here is the code which worked for me. Please note that I have changed the skin type to moono because for moono-lisa skin some file is missing.

for (var i in CKEDITORspfxFORTY.instances) { CKEDITORspfxFORTY.instances[i].on("change", (elm?, val?) => { elm.sender.updateElement(); var value = (document.getElementById(elm.sender.name) as any) .value; var id = elm.sender.name.split("-editor-")[1]; this.properties.tabs[id].Content = value; }); }

      CKEDITORspfxFORTY.instances[i].on("instanceReady", function() {
        let ckElments = document.getElementsByClassName(
          "cke_top"
        ) as HTMLCollectionOf<HTMLElement>;
        //ckElments[0].style.display = "block";
        //debugger;
        for (let k = 0; k < ckElments.length; k++) {
          //ckElments[0].style.display = "block";
          ckElments[k].style.display = "block";
        }
      });

I am stuck...do I need to change this using visual studios. Where do I get to the FckTextWebPart.ts?

[akt2006]

Here is the code which worked for me. Please note that I have changed the skin type to moono because for moono-lisa skin some file is missing. for (var i in CKEDITORspfxFORTY.instances) { CKEDITORspfxFORTY.instances[i].on("change", (elm?, val?) => { elm.sender.updateElement(); var value = (document.getElementById(elm.sender.name) as any) .value; var id = elm.sender.name.split("-editor-")[1]; this.properties.tabs[id].Content = value; }); }

      CKEDITORspfxFORTY.instances[i].on("instanceReady", function() {
        let ckElments = document.getElementsByClassName(
          "cke_top"
        ) as HTMLCollectionOf<HTMLElement>;
        //ckElments[0].style.display = "block";
        //debugger;
        for (let k = 0; k < ckElments.length; k++) {
          //ckElments[0].style.display = "block";
          ckElments[k].style.display = "block";
        }
      });

I am stuck...do I need to change this using visual studios. Where do I get to the FckTextWebPart.ts?

Yes you have to download the source file and then you will find FckTextWebPart.ts file in the this path /src/webparts/fckText/FckTextWebPart.ts. Here you have to change the code.

[rramdeo]

Here is the code which worked for me. Please note that I have changed the skin type to moono because for moono-lisa skin some file is missing. for (var i in CKEDITORspfxFORTY.instances) { CKEDITORspfxFORTY.instances[i].on("change", (elm?, val?) => { elm.sender.updateElement(); var value = (document.getElementById(elm.sender.name) as any) .value; var id = elm.sender.name.split("-editor-")[1]; this.properties.tabs[id].Content = value; }); }

      CKEDITORspfxFORTY.instances[i].on("instanceReady", function() {
        let ckElments = document.getElementsByClassName(
          "cke_top"
        ) as HTMLCollectionOf<HTMLElement>;
        //ckElments[0].style.display = "block";
        //debugger;
        for (let k = 0; k < ckElments.length; k++) {
          //ckElments[0].style.display = "block";
          ckElments[k].style.display = "block";
        }
      });

I am stuck...do I need to change this using visual studios. Where do I get to the FckTextWebPart.ts?

Yes you have to download the source file and then you will find FckTextWebPart.ts file in the this path /src/webparts/fckText/FckTextWebPart.ts. Here you have to change the code.

Is there anyway you can provide the updated spfx.sppkg file?

[eldoro80]

Hi all, I would also love to have the updated spfx.sppkg file. I really need a proper accordion and tab Webpart for my communication site. I'm afraid I'm not experienced enough to compile it myself (if compiling is the right term). Hopefully someone can help..

[rramdeo]

Here is the code which worked for me. Please note that I have changed the skin type to moono because for moono-lisa skin some file is missing. for (var i in CKEDITORspfxFORTY.instances) { CKEDITORspfxFORTY.instances[i].on("change", (elm?, val?) => { elm.sender.updateElement(); var value = (document.getElementById(elm.sender.name) as any) .value; var id = elm.sender.name.split("-editor-")[1]; this.properties.tabs[id].Content = value; }); }

      CKEDITORspfxFORTY.instances[i].on("instanceReady", function() {
        let ckElments = document.getElementsByClassName(
          "cke_top"
        ) as HTMLCollectionOf<HTMLElement>;
        //ckElments[0].style.display = "block";
        //debugger;
        for (let k = 0; k < ckElments.length; k++) {
          //ckElments[0].style.display = "block";
          ckElments[k].style.display = "block";
        }
      });

I am stuck...do I need to change this using visual studios. Where do I get to the FckTextWebPart.ts?

Yes you have to download the source file and then you will find FckTextWebPart.ts file in the this path /src/webparts/fckText/FckTextWebPart.ts. Here you have to change the code.

Do I modify rrfreeman code or the orginial one provided.

[akt2006]

Here is the code which worked for me. Please note that I have changed the skin type to moono because for moono-lisa skin some file is missing. for (var i in CKEDITORspfxFORTY.instances) { CKEDITORspfxFORTY.instances[i].on("change", (elm?, val?) => { elm.sender.updateElement(); var value = (document.getElementById(elm.sender.name) as any) .value; var id = elm.sender.name.split("-editor-")[1]; this.properties.tabs[id].Content = value; }); }

      CKEDITORspfxFORTY.instances[i].on("instanceReady", function() {
        let ckElments = document.getElementsByClassName(
          "cke_top"
        ) as HTMLCollectionOf<HTMLElement>;
        //ckElments[0].style.display = "block";
        //debugger;
        for (let k = 0; k < ckElments.length; k++) {
          //ckElments[0].style.display = "block";
          ckElments[k].style.display = "block";
        }
      });

I am stuck...do I need to change this using visual studios. Where do I get to the FckTextWebPart.ts?

Yes you have to download the source file and then you will find FckTextWebPart.ts file in the this path /src/webparts/fckText/FckTextWebPart.ts. Here you have to change the code.

Do I modify rrfreeman code or the orginial one provided.

My solution is working on rrfreeman code and you have to upload the CKEditor resource files in your own CDN path i.e. your company O365 CDN.

[yazzouu]

Hi Everyone.

I'm a not a developer and I wanted to know if someone could propose his .sppkg file package fixed. I'm really interesting on using those WPs. Thanks very much for all of you for your help on that matter

[mmartain]

guys, i have fixed it myself using my own jsdelivr cdn.

Package with working editors can be found here:

spfx-fantastic-40-fckeditor fixed.zip

Could somebody validate that it is indeed working for them?

[Artocol]

guys, i have fixed it myself using my own jsdelivr cdn.

Package with working editors can be found here:

spfx-fantastic-40-fckeditor fixed.zip

Could somebody validate that it is indeed working for them?

WORKED!! Both on test and production! For the accordion web part to work I just had to add the RichText Editor web part to the page the accordion web part was on:

For the color palette to work, I had to turn off the "Inline" option:

Thank you so much!

[mmartain]

guys, i have fixed it myself using my own jsdelivr cdn. Package with working editors can be found here: spfx-fantastic-40-fckeditor fixed.zip Could somebody validate that it is indeed working for them?

WORKED!! Both on test and production! For the accordion web part to work I just had to add the RichText Editor web part to the page the accordion web part was on:

For the color palette to work, I had to turn off the "Inline" option:

Thank you so much!

Oh yeah, I only fixed the rich text editor. I will upload a new package with the fix for accordion tomorrow.

[Sumitrpareek]

hi @mmartain thanks for fix, Can you please provide project solution(code) for this web part.

[mmartain]

I have uploaded the full solution package including the built package to my dropbox:

https://www.dropbox.com/s/4dr0v6nnzb30085/spfx-40-fantastics-mmartain.zip?dl=0

hi @mmartain thanks for fix, Can you please provide project solution(code) for this web part.

[Artocol]

I have uploaded the full solution package including the built package to my dropbox:

https://www.dropbox.com/s/4dr0v6nnzb30085/spfx-40-fantastics-mmartain.zip?dl=0

hi @mmartain thanks for fix, Can you please provide project solution(code) for this web part.

This new package fixed the previously mentioned issues concerning the presence of the RichTextEditor for the Accordion to work, as well as the colorpicker that didn't want to show when 'inline' was on.

Some users had to clear their browser cache for the editor to show up correctly again btw.

[Ryujin-Jakka]

@mmartain Could you tell us what changes you made and for which files?

[shuklabond]

Hi rrfreeman .. Thanks for the fixes.. But still there are bugs .. like.. image buttons and table buttons are not working.. Still it is calling the external references like and getting logged.. for example. if you click on table icon .. getting error like "Uncaught Error: [CKEDITOR.dialog.openDialog] Dialog "table" failed when loading definition." and failed to load "https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-06-22.004/sp-ckeditor/plugins/table/dialogs/table.js?t=HBDF" .

Hi, Do you find any solution for the image button, table?

[FWolterink66]

Hi, uploaded the zip file to the app catalog, but it give me a error