Joomla JCE editor removes <canvas> element on save - joomla

I use html 5 canvas with some javascript in joomla articles - JCE editor.
When I save the article, the editor removes the canvas element, only javascript remains.
I disabled all cleanup in jce:
Editor global configuration: validate html: no
Editor profiles -> Default -> Editor Parameters -> Cleanup & Output: Validate html: no
In Advanced options all is allowed (javascript, css, php, xhtml)
Joomla text filter: no filtering
and JCE stil removes this canvas line:
<canvas id="name" width="1170" height="400"></canvas>
I currently use Sourcerer plugin, but I don't like it because no code is highlighted.
Joomla 3.4, JCE 2.4.6

Try the following.
Go to
Extensions >> Plugin Manager >> TinyMCE >> Valid Elements
The add canvas to the textarea.

Related

CKEditor 5 - Toggle between dark and light theme/background for the editor on external action/event

I'm using CKEditor5 in a React app and trying to implement a toggle to switch between dark and light theme for CKEditor5.
From their documentation I came across this: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/theme-customization.html
The documentation mainly describes styling the editor theme from scratch and building the ckeditor package which essentially defines the default style theme for the editor.
But what I'm trying to figure out is a way to manipulate the editor background and plugins color via. CSS on-the-fly based on event trigger (when user toggles the UI theme for the entire site via. toggle button) i.e. toggling between light and dark theme for the editor. Is there any way/pointers on how this can be done?
Right now, in my React component I invoke the CKEditor component in the following way to render it on the UI:
<div>
<CKEditor
editor={Editor}
config={editorConfiguration}
disabled={isReadOnlyMode}
data={fieldValue}
onReady={(editor) => {
if (isReadOnlyMode) {
const toolbarElement = editor.ui.view.toolbar.element;
toolbarElement.style.display = "none";
}
}}
/>
</div>

CKEditor Strips Styles When Editing Link

By changing the href via right-clicking a link and choosing to "Edit Link" in CKEditor, all of the inline styles in the <a> tag are stripped.
I have already set allowedContent: true in config.js to no avail.
How do I configure CKEditor to avoid stripping these styles after changing the link URL?
Edit: Before changing the link I could have:
test
And after changing the link target it becomes:
test

How to retain style tags saved in the contents in JCE?

On my Joomla 3.3.0 site, I'm trying to write custom css rules in my article editor (JCE 2.3.4.4). I have disabled the 'html filtering' and now this is possible.
So now I get the desired output when I write something like:
<p>test</p>
<style>#t123{color:red}</style>
<div id="t123">red font</div>
However when I try to edit the article again, the style tag is missing. I can only see:
<p>test</p>
<div id="t123">red font</div>
How can I configure the editor to also show the style tag when editing?
There are two places where you need to disable filtering. One is the Global Configuration -> Text Filtering and another is JCE Editor Profiles -> Plug-in Parameters -> Media Support.
The answer to my question is to enable the Allow CSS option in Components > JCE Editor > Editor Profiles > Editor Parameters > Advanced
Thanks to #Apurv for giving me a hint on where to look for

CKEditor: Bold, Italic, Underline can only be applied to already written text on Chrome

I am using ckeditor 0.4 v plugin for my grails application (Grails 1.3.7).
In Chrome and Safari browser Bold, Italic and Underline button only works for already written text (only selected text), it doesn't work for the text you are about to write.
It works fine on FireFox and IE. I can click on the Bold button and type bold text and also select the already written text and click on bold will make it bold.
This issue has been resolved in latest version but as I cant upgrade the version of ckeditor plugin I want the patch for this issue for ckeditor 0.4v
you can also see #
http://dev.ckeditor.com/ticket/5982
The only solution for you - update CKEditor Grails plugin. That patch is huge and landed in the main code line looong after the CKEditor 3.2.1 (to be precise - in CKEditor 3.5.3) which is used in the very old CKEditor Grails plugin 0.4.
BTW. do not confuse CKEditor 4.0 with CKEditor Grails plugin 0.4 - these are completely separate projects.

How to use ckeditor with dexterity custom type in Plone 4.1 / 4.2?

I'm trying to use ckeditor instead TinyMCE in my custom dexterity type, but I'm always getting the empty editor textarea.
I changed the default editors to ckeditor and already installed z3c.formwidget.ckeditor.
This is a snippet of my code:
text = RichText(title=_(u"Foo"))
What am I doing wrong?

Resources