[Rich Content Editor] Add RCE HTML Editor Function

[jared_reynolds]

Currently, if your institution has a theme style sheet, the styles are not viewable/applied in the Rich Content Editor while in Edit mode.  Only upon saving are you able to see styles applied from the theme style sheet.  I would like to propose that the RCE reflect the theme's style sheet while within the Rich Content Editor.  Here is the solution as provided by our IT personel:

"We believe the external CSS provided by the Customer via the Canvas Theme Editor within the context of a given Account/Sub-Account, as affecting the styles of a published Page, should also be included in the content_css array (https://www.tiny.cloud/docs/configure/content-appearance/#usingmultiplestylesheetsasarrayexample) of the TinyMCE editor upon initialization to accurately reflect within the Editor itself, the true styling of the resulting published Page."

[Stef_retired]

@jared_reynolds 

Thanks for sharing these ideas. The first idea in the description is beautifully developed; however, everything after "Also, can we have..." needs to be submitted as its own idea so our members can evaluate it separately. Would you please take a moment to edit the idea to remove the second idea and then submit that one as new?

[sepehr_malek]

We would like to see a CSS editor within Canvas theme editor where we can edit the custom style as opposed to uploading it each time we make changes to it.

[TimJensenUSC]

@jared_reynolds - thanks, I agree - it would be great to have the Theme CSS automatically loaded into the TinyMCE Editor.

[TimJensenUSC]

hey @jared_reynolds  - did you work out a solution for this?

[jared_reynolds]

@TimJensenUSC, to answer your question, no, nothing has been done to apply the style sheet while in edit mode.  I haven't looked into it further, sorry!

[TimJensenUSC]

@jared_reynolds - I have been able to get the theme stylesheet loaded into the TinyMCE editor so you can see Theme CSS while editing a page.

I've put together template items for our Academics to use. I can talk you through the solution if you like.

[sepehr_malek]

@TimJensenUSC  would you mind sharing your solution with the community?

[TimJensenUSC]

Hi @sepehr_malek (and @jared_reynolds)... here is the code I wrote to get the Theme CSS loading into the WYSIWIG editor.

Just replace 'YOUR_CUSTOM_THEME_CSS_FILE' with the name of your Theme CSS file and place this code in your Theme Javascript file.

(function(){'use strict';const pageRegexCSEV=new RegExp('/edit$');const pageMatchesCSEV=pageRegexCSEV.exec(window.location.pathname);if(pageMatchesCSEV){console.log('Init- CSEV');async function getBits(){function elemLoaded(type){return new Promise(function(resolve,reject){let i=20,t=setInterval(function(){let elem=(type==='frame')?((document.getElementById('wiki_page_body_ifr')||document.getElementById('assignment_description_ifr'))||document.getElementsByClassName('tox-edit-area__iframe')[0]):document.head.querySelector('link[href*="YOUR_CUSTOM_THEME_CSS_FILE"]');console.log('CSEV- checking for:',type);let l=((elem!==null)&&(elem!==undefined))?true:false;if(l){clearInterval(t);console.log('CSEV- '+type+' elem found.');resolve(elem)}else if(i>=3000){clearInterval(t);console.log('CSEV- '+type+' elem not found.');reject()}i+=15},i)})}function getIFrame(){return elemLoaded('frame')}function getCSS(){return elemLoaded('css')}const cssFile=await getCSS();const editorFrameHead=await getIFrame();return{editorFrameHead:editorFrameHead,cssFile:cssFile}}async function loadCSS(bits){console.log('CSEV- append CSS to FRAME');let cssLinkTag=document.createElement('link');cssLinkTag.rel='stylesheet';cssLinkTag.media='screen';cssLinkTag.crossorigin='anonymous';cssLinkTag.href=bits.cssFile.href;bits.editorFrameHead.contentDocument.head.appendChild(faLinkTag);bits.editorFrameHead.contentDocument.head.appendChild(cssLinkTag)}function failureCallback(e){console.log('failureCallback: '+e)}getBits().then(bits=>loadCSS(bits)).catch(failureCallback)}})();

[sepehr_malek]

Thanks @TimJensenUSC , I will give this a go.