Content losing and Full version CKEditor 5 - javascript

Please share your experience about using CKEditor 5.
Is HTML5 tags also removing like in CKEditor 4? In case yes, what can we do with it?
Show how we can enable all CKEditor 5 buttons and options on toolbar like in CKEditor 4. The following link contain Full Package with all options.
https://ckeditor.com/ckeditor-4/download/
Thanks for you time!

Is HTML5 tags also removing like in CKEditor 4? In case yes, what can we do with it?
CKEditor 5, unlike CKEditor 4, implements a custom data model. This means that every piece of content that you load into the editor needs to be converted to the model and then rendered back to the view.
Since conversion is done by plugins and is explicit (i.e. a feature tells exactly what HTML elements and/or attributes it converts to what model nodes) a piece of HTML which isn't covered by any of the loaded converters is simply dropped.
This means that if you want all of HTML5 to be supported, you need to write plugins to support them. Once you do that, CKEditor 5 won't filter anything out.
You can read more in the CKEditor 5 Framework documentation.
Show how we can enable all CKEditor 5 buttons and options on toolbar like in CKEditor 4. The following link contain Full Package with all options.
Short note about CKEditor 4 – "full" is not "all". The "full" preset has a misleading name unfortunately. There are far more CKEditor 4 plugins than in "full" and you can browse them in the Addons repo.
As for CKEditor 5, existing builds come with a predefined set of features which reflect the use cases described by Editor Recommendations.
There are not many more plugins available right now because the project is in the early alpha version. However, you can check the official list of features and browse npm to find more.
If you want to add or remove plugins from your editor, please read the Creating custom builds guide.

Related

Is it available to change the webviewer button icon of 'annotationStyleEditButton' & ' annotationDeleteButton'

I want to change the icon of 'annotationStyleEditButton' and 'annotationDeleteButton' to a self designed PNG, I would like to know is those buttons are available to change the icon?
I just found a method to change the Tools icon by using updateTool(), but seems we cannot change the 'style' and 'delete' button?
There are ways to change the icons but unfortunately, there are no APIs to do it. This is mainly due to the UI being completely open-source and open to everyone to customize and also contribute to. You are free to clone, download, or fork our repo here: WebViewer UI Repo. You will need some knowledge of React (and maybe some redux) but it should be relatively easy to pick up.
To change the icon, you will have to change the img property of the ActionButton to use your images in the AnnotationPopup component. Alternatively, you could also just use HTML buttons and images if you would like. You can find a guide on advanced customizations here: Advanced Customization. Once you do have the UI built, it will generate a build folder in the root directory. Simply copying this folder and replacing the one under lib/ui should update it to the one you just built.
As a last resort, you could always use some vanilla JavaScript to swap out the icons for your own. A query with the DOM can get you those elements to change:
document.querySelector('iframe[title="webviewer"]').contentDocument.querySelector('div[data-element="annotationStyleEditButton"]');
I would recommend sticking to the WebViewer UI method to avoid any unwanted results. It would also be better to own your UI as opposed to using this intrusive method.
Let me know if this helps!

Is there a way to list the settings for an existing JQuery UI .js file?

I am working on a project that has been going for many years. We currently use jquery 1.7.2 and a custom jqueryUI 1.8.21. I am creating a new feature that requires we upgrade jquery, so I am in the process of upgrading to jquery 1.9.1.
The problem is that 1.9.1 isn't compatible with UI 1.8.21, so I need to upgrade UI too. Alright, not a big deal... except that we have a bunch of custom settings in that UI 1.8.21 file, and I need to carry them forward to the new version.
I could recreate the custom theme from scratch using the new UI 1.12.1 version, but it would be very hard and there is always the chance that I will miss some important setting. I am looking for a way to list out the modified settings in the existing file to easily apply them to a customization of the newer version, or to somehow upgrade or recreate the same setting with the newer version.
Is there a tool or automatic way to do this, or am I out of luck and need to just recreate it by hand?
When you download a theme created with ThemeRoller, one of the files is jquery-ui.theme.css. The comment at the beginning has a line like this:
* To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=custom-theme&bgImgOpacityError=&bgImgOpacityHighlight=&bgImgOpacityActive=&bgImgOpacityHover=&bgImgOpacityDefault=&bgImgOpacityContent=50&bgImgOpacityHeader=&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=%23666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=%23aaaaaa&iconColorError=%23cc0000&fcError=%235f3f3f&borderColorError=%23f1a899&bgTextureError=flat&bgColorError=%23fddfdf&iconColorHighlight=%23777620&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgTextureHighlight=flat&bgColorHighlight=%23fffa90&iconColorActive=%23ffffff&fcActive=%23ffffff&borderColorActive=%23003eff&bgTextureActive=flat&bgColorActive=%23007fff&iconColorHover=%23555555&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgTextureHover=flat&bgColorHover=%23ededed&iconColorDefault=%23777777&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgTextureDefault=flat&bgColorDefault=%23f6f6f6&iconColorContent=%23444444&fcContent=%23333333&borderColorContent=%23dddddd&bgTextureContent=flat&bgColorContent=%23ffffff&iconColorHeader=%23444444&fcHeader=%23333333&borderColorHeader=%23dddddd&bgTextureHeader=flat&bgColorHeader=%23e9e9e9&cornerRadius=10px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif
Follow that link, click the Download Theme button, and you'll be able to download a new version with the same theme.
However, this only specifies the theme. The download page that the button goes to requires you to select the components to include. I don't see any automated way to do that, but there's a comment at the beginning of jquery-ui.js with a line like:
* Includes: widget.js, position.js, data.js, disable-selection.js, focusable.js, form-reset-mixin.js, jquery-1-7.js, keycode.js, labels.js, scroll-parent.js, tabbable.js, unique-id.js, widgets/accordion.js, widgets/autocomplete.js, widgets/button.js, widgets/checkboxradio.js, widgets/controlgroup.js, widgets/datepicker.js, widgets/menu.js, widgets/mouse.js, widgets/progressbar.js, widgets/selectmenu.js, widgets/slider.js, widgets/spinner.js, widgets/tabs.js, widgets/tooltip.js
You may be able to figure out which components to select from this.

How to Suppress Image Description Dialog in TinyMCE 3?

We are using Tiny MCE 3 for a tool that is to be used for internal projects only so mandatory alt attribute on image tags is overkill.
When using the Insert/Edit Image dialogue, there is confirm dialogue (see below) that asks if you want to continue without an Image Description.
How do I suppress this dialogue so we can add images quicker (and dirtier)? I have had no luck with Google or the TinyMCE docs on this one.
Note this is for Tiny MCE 3.x, although we may migrate in the near future to 4.0.
You can do one of two things to change this...
Configuration Setting accessibility_warnings:
There is a setting you can put in the configuration that will turn off all accessibility warnings:
tinyMCE.init({
...
accessibility_warnings : false
});
Modify source code of image.js in the advimage plugin
This file has code to check for the alt attribute. In TinyMCE 3.5.10 I see this on line 104:
if (tinyMCEPopup.getParam("accessibility_warnings", 1)) {
if (!f.alt.value) {
tinyMCEPopup.confirm(tinyMCEPopup.getLang('advimage_dlg.missing_alt'),
function(s) {
if (s)
t.insertAndClose();
});
return;
}
}
If you comment that out it won't check for the alt attribute anymore. Of course you now have to re-do this change if you install an update to TinyMCE.
As a side note TinyMCE 3 is no longer getting any updates (I work for the company that owns TinyMCE). It would be a really good idea to move to TinyMCE 4 (currently at 4.5.3) as that is the codebase that is getting enhancements at this point.

Is this possible to run html/css or JavaScript in CKEditor?

I am using CKEditor asp.net page for allowing client to easily edit/format text. Also i am using tabs option within CKEditor as shown in the fig. attached. But tabs are not working at all. Initially i have created tabs withJS. I thought it’s the JS that not working with CKEditor so i have chosen alternative solution using css3. But tabs are still not working in CKEditor. I have searched on CKEditor forum but unable to get good resource or help.
For css3 I am using checkbox hidden through opacity 0; but checkboxes are not working in CKEditor. What comes finally in my mind is CKEditor doesn’t run html. Is there any solution for this?
CKEditor secures JavaScript code so it's not executed to prevent unexpected editor behavior. Also mouse/keyboard events from form elements are captured for robust editing, making regular manipulation impossible. The conclusion is: editor is for creating rich content, not for rendering layouts.
The simplest advice I have is to put the editor one level down. Namely:
Create tabs.
Make each tab title an inline editor (it must be a block element).
Put an inline instance of CKEditor into each single tab contents.
Serialize your tabs when saving. It's easy.
Bonus: With a little help from ACF (since 4.1) you can prevent the layout from being destroyed by thoughtless users. Basically restrict which plugins are loaded for every editor to manipulate the result of the editing.

Has anyone run into Sitecore removing JavaScript from the page editor?

I've been working on a custom page in Sitecore over the holidays, and I've noticed an issue where Sitecore removes JavaScript lines from the editor.
Here's an overview of my current scenario:
I add Javascript to the page.
I save, check in, and publish.
Changes are there, and everything is working.
I work on it later and those changes are no longer there.
I'm the only one who's edited this page, and it is publishing the current/correct version. It doesn't matter if I add the script through the "Show Editor" or "Edit HTML" features of the content editor. It only removes the JavaScript though; all of my other changes are intact.
Is there something that I'm missing about Sitecore's implementation of JavaScript? I'm not sure what else to do in order to diagnose it, so I was hoping someone here would have an explanation for this.
Removing the script-tags in the RTE in Sitecore is standard behavior when the item is saved.
However, in Sitecore 6.4.1 rev. 120113 and Sitecore 6.5 Update-4 there is a new property added in the web.config:
<setting name="HtmlEditor.RemoveScripts" value="true"/>
Setting this value to false should solve your problem.
If you are using an older version of Sitecore, take a look at this blogpost which shows a workaround for older versions.
Are you adding this javascript in a Rich Text Editor?
I've seen the rich text editor strip out javascript as it saves. We have typically added javascript blocks in as a separate sublayout pulling from a multi-line text field and having it render out directly, rather than editing javascript through the rich text editor.

Categories