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.
Related
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.
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)].
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
I have a problem. I'd like to show CKEditor without toolbar, and still keep colors on it. This is my code.
$(document).ready(function() {
var textAreaName = 'description';
CKEDITOR.replace( textAreaName, {
removePlugins: 'toolbar,elementspath',
readOnly: true
} ) ;
var oCKeditor = CKEDITOR.instances[textAreaName];
});
The problem is text color doesn't show. It seems that CKEditor disable color as well.
Assuming (because it's still unclear) that you want to keep text color in editor's contents (BTW. editor's contents is not rendered using textarea - it is only used for easier data submitting) this is a solution:
config.extraAllowedContent = 'span{!color}';
This will allow span elements with color style. Read more about Advanced Content Filter.
use this config.uiColor = '#AADC6E';
Where config is object of that component.
Do you know how to add watermark in CKEditor (visual word processor)?
I want the behavior like this: When the CKEditor is loaded, it has text by default. When I click on it, text must disappear.
Below are the steps to add water mark in CKEditor
Generally when you set default text in Ck Editor through java script on page load. JavaScript event get fired before the control actually load so if possible set the text for code behind.
Attaching Events in Javascript for OnFocus and OnBlur
$(document).ready(function() {
var myeditor = CKEDITOR.instances['EditorId'];
myeditor.on("focus", function(e) {
RemoveDefaultText();
});
myeditor.on("blur", function(e) {
setDefaultText();
});
});
Define your default text in this function
function setDefaultText() {
if (CKEDITOR.instances['EditorId'].getData() == '') {
CKEDITOR.instances['EditorId'].setData('Your Message Here');
}
}
function RemoveDefaultText() {
if (CKEDITOR.instances['EditorId'].getData().indexOf('Your Mesage Here') >= 0) {
CKEDITOR.instances['EditorId'].setData('');
CKEDITOR.instances['EditorId'].focus();
}
}
You can also define styles to the water mark by adding classes to the default text and place the class into you ck editor content css otherwise it will not work
A ready to use plugin can be tested here. It allows to customize the default text and it takes into acount, dialogs as well as reading the data from an external script.
You might want to try this jQuery plugin:
https://github.com/antoineleclair/ckwatermark