CKeditor-4, how to disable Font-Symbol? - utf-8

My online CMS (that now is using CKEditor v4.2.2) not supports <font face="Symbol">, so online edit tool must preserve the "purity" of the UTF-8 of the online editions.
The problem arises when a user copy/paste from a external text to the CKeditor box,
<p><font face="Symbol">• </font>blabla
<font face="Symbol">S</font> blabla;</p>
Can CKEditor transform these <font face="Symbol"> into "free UTF-8"? That is, can CKEditor save
<p>• blabla Σ blabla;</p>
There are some configuration to enforce only UTF8 characters, without font-symbol?
EDITED: my configurations for test contextualization,
CKEDITOR.on( 'instanceCreated', function( event ) { // contenteditable
var editor = event.editor;
// ...
editor.on( 'configLoaded', function() {
editor.config.skin = '...';
// ...
});
});

First of all, if you want to solve this, you need to find a dictionary of these characters which will allow you to translate original characters to their UTF-8 representation.
To apply this transformation to all font elements use the dataProcessor. The dataFilter is applied to all data loaded or inserted into editor.
editor.dataProcessor.dataFilter.addRules( {
elements: {
font: function( el ) {
// el will be an instance of CKEDITOR.htmlParser.element
// el.children[ 0 ] will be an instance of CKEDITOR.htmlParser.text
// You'll need to read a value of that text, replace
// all characters with their UTF-8 representatives
// and return:
return new CKEDITOR.htmlParser.text( text );
// That will replace font tags with returned text nodes.
}
}
} );
Here you can find more complex exampled of dataProcessor usage: http://ckeditor.com/forums/CKEditor/Create-new-dom-elements-using-dataProcessor.htmlFilter

Related

How to dynamically switch text direction in CKEditor

On my current project, users can type text in English and Hebrew languages.
Would be great to define direction automatically, according to the current text. For example, if the text contains Hebrew symbols, the direction should be RTL. But if the text doesn't contain Hebrew, then the direction is LTR.
Text can be changed at any moment, and I think that the best solution is to switch the direction dynamically like it works in the Google Translate service.
I didn't find already done solution and I want to propose my own.
It works pretty simply. Each time, when text has been changed, I'm checking it for Hebrew symbols and I change the text direction if need. To apply changes in config (in my case it's direction of the text), I should destroy and init CKEditor with updated config.
How you can test it:
Try to type something in English
Try to type something in Hebrew, for example, "שם"
Try to remove Hebrew symbols
You will see how the direction in editor will be changed according to current text
Here is the code:
var CKEditorConfig = {
contentsLangDirection: 'ltr',
forcePasteAsPlainText: true
},
editorInstance;
(function () {
// Initialise editor.
function initEditor() {
editorInstance = CKEDITOR.replace('editor', CKEditorConfig);
editorInstance.on('contentDom', function () {
var body = this.document.getBody();
// These listeners will be deactivated once editor dies.
// Input event to track any changes of the content
this.editable().attachListener(body, 'input', function () {
editorOnChange();
});
});
}
// On change callback.
function editorOnChange() {
var text = CKEDITOR.instances['editor'].getData(),
direction = isHebrew(text) ? 'rtl' : 'ltr',
currentDirection = CKEditorConfig.contentsLangDirection;
// Direction was changed -> reinit CKEditor.
if (currentDirection && currentDirection != direction) {
CKEditorConfig.contentsLangDirection = direction;
CKEDITOR.instances['editor'].destroy();
editorInstance = initEditor();
}
}
// Checks is current text uses hebrew language or not.
function isHebrew (text) {
const HebrewChars = new RegExp("[\u05D0-\u05FF]+");
if (!HebrewChars.test(text)) {
return false;
}
return true;
}
// Init editor.
initEditor();
})();
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.ckeditor.com/4.7.1/basic/ckeditor.js"></script>
<body>
<textarea id="editor" cols="50" rows="20"></textarea>
</body>
Seems CKEditor cannot be launched here. I see some error.
You can try to launch it right on JSFiddle
One problem: strange but event "input" is not launched for operations like copy-paste in this example, but work in my current application. Seems versions of libraries are the same. But it's not very important for this example.
I hope it will be useful for somebody.

How to disable automatic style to img in ckeditor?

There is one problem when I work with ckeditor. I press on icon for adding images, then modal window appears and I put direct image link in the special field, in this moment width and height detected automatically and it writes to style for ex:
<img src='#some images direct link' style='width:SOME WIDTH;height:SOME HEIGHT'>
Can I disable this automatic function? Or I have to delete this style by myself every time?
You could write a rule for your config that would remove the style tag on elements.
var editorRulesObject = {
elements: {
img: function( el ) {
if(el.attributes.style) {
el.attributes.style = '';
}
}
}
};
CKEDITOR.on('instanceReady', function( e ) {
// Ensures that any non-styled text, or text input without any tags will be correctly styled.
CKEDITOR.instances[e.editor.name].dataProcessor.dataFilter.addRules( editorRulesObject );
CKEDITOR.instances[e.editor.name].dataProcessor.htmlFilter.addRules( editorRulesObject );
});
In 2020, since version 4.5.0, it is much easier to switch off the annoying automatic filling in of height and readiness.
New there is the config option "image_prefillDimensions".
config.image_prefillDimensions = false;
Documentation: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-image_prefillDimensions
The user still has the possibility to fill in the height and width automatically by clicking on the button [Reset size (circle arrow)].

CKEditor Prevent block elements ? like (`div,p,h1,h2, etc`)

How can prevent block elements in ckeditor?
I want to don't let to ckeditor to accept block elements.
With prevent enter key i can do this but if i paste some text that's include enter key or several paragraph in ckeditor everything down.
In other word i want a textbox with ckeditor.
Quoting an official weekly blog post:
CKEditor core developer, Olek Nowodziński, was hacking the editor a bit in his spare time and here is the result...
Editable header that does not break with Enter key or pasted multi–line content: https://jsfiddle.net/540ckczt/
var editor = CKEDITOR.inline( 'editor', {
plugins: 'clipboard,floatingspace,toolbar,undo,basicstyles,link',
toolbar: [ [ 'Undo', 'Redo' ], [ 'Bold', 'Italic' ], [ 'Link', 'Unlink' ] ],
// Enter mode ill be set to BR automatically if editor was enabled on some element
// which cannot contain blocks (like <h1 for instance).
// If you want to enable editor on different elements, set BR mode here.
// Read the note below to learn why.
enterMode: CKEDITOR.ENTER_BR,
on: {
instanceReady: function() {
// Remove all "br"s from the data being inputted into the editor.
editor.dataProcessor.dataFilter.addRules( {
elements: {
br: function() {
return false;
}
}
} );
this.editable().on( 'keydown', function( evt ) {
var keystroke = evt.data.getKeystroke();
if ( keystroke == CKEDITOR.SHIFT + 13 || keystroke == 13 ) {
evt.data.preventDefault();
}
} );
}
}
} );
Note that the crucial part of this code is that the ACF filters out the rest of block tags (other than <br>). In the case above the ACF works in an automatic mode where it's configured by the enabled features. And since there's no Format dropdown or any other feature creating blocks, none of them is allowed. Read more in the Advanced Content Filter guide.
I expect that one could ask now: "Why can't we configure ACF to filter out <br>s too?"
The answer is that ACF must be able to normalise blocks which are not allowed to some content, and as CKEditor does not support "no enter" mode officially, it choses between normalising to <p>, <div> or <br>. The decision is made based on the enter mode, so that's why it's important to configure such editor to enter mode BR.

Set default font/text size in RTF Control

I found this answer Default font for Rich Text field but it doesn't help me. I need to be able to set it in the application as this is an XPiNC (Xpages in Notes Client for those reading this in the CKEditor forum) app and I have no control over what is on the system beyond IBM Notes 8.5.3FP4. Because the config.js is server side for the CKEditor, I need to do this in the code or css somehow.
Is this even possible?
Add the following script block to your XPage. It will set the initial font and text size in CKEditor field.
<xp:scriptBlock
id="scriptBlock1">
<xp:this.value>
<![CDATA[XSP.addOnLoad(function() {
try{
CKEDITOR.on( 'instanceReady', function( ev ) {
if (ev.editor.getData() === "") {
ev.editor.setData('<span style="font-family: Comic Sans MS, cursive; font-size:36px;">­</span>');
}
});
}catch(e){
console.log(e);
}
})]]></xp:this.value>
</xp:scriptBlock>
The trick is to set an initial value to field with a style when field is empty.
(Unfortunately, all attempts to set config.font_defaultLabel and config.fontSize_defaultLabel don't work like:
CKEDITOR.editorConfig = function( config ) {
config.font_defaultLabel = 'Comic Sans MS, cursive';
config.fontSize_defaultLabel = '36px';
};
)
Knut's solutions works great except you have to use ​ instead of ­ as you lose the font styling when clicking into the field and start typing.

How can I strip all html formatting from text when pasting into KendoUI Editor?

I want to use KendoUI editor to basically only allow users to format text into paragraphs. Possibly allow bold and underline.
I'm struggling with 2 things:
I want to strip all html formatting from text when pasting
I want to disable keyboard shortcuts for bold, underline etc - they seem to work even when toolbar element is not there.
Thanks!
For pasting the only the text you might define a paste handler that remove all but text. This is as simple as:
$("#editor").kendoEditor({
paste: function (ev) {
ev.html = $(ev.html).text();
}
});
The paste handler receives as argument an event that has in html the text being parsed. We can use jQuery for getting only the text using $(ev.html).text()
For removing the shortcuts, and as far as I could test it with latest Kendo UI version, if you define only the tools that you want, only those shortcut are active. So if you say something like:
$("#editor").kendoEditor({
tools: [
"italic"
],
paste: function (ev) {
ev.html = $(ev.html).text();
}
});
Only italic shortcut <ctrl>+i is available. If you leave tools array empty then you do not have any.
This can be easily achieved now with pasteCleanup option.
See here: http://docs.telerik.com/kendo-ui/controls/editors/editor/pasting
Kendo MVC has also extension for this purpose. Example of usage:
.PasteCleanup(x => x.KeepNewLines(false))
false in this case means that you want to clear everything except new lines.
for me this is the complete solution
pasteCleanup: {
custom: function (html)
{
html = html.replace(/<\s*br\/*>/gi, '');
html = html.replace(/<\s*a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link - $1) ");
html = html.replace(/<\s*\/*.+?>/ig, '');
html = html.replace(/ {2,}/gi, '');
html = html.replace(/\n+\s*/gi, '');
html = html.replace(" ", '');
html = html.replace(/<.*?>/g, '');
return html;
}
}

Resources