ckeditor bidi force use direction rtl or ltr - ckeditor

i'm using ckeditor 4 and would like to allow my customers to use rtl or ltr directions - but since i'm going to send the output as email message i want to always have the direction attribute to be used.
for some reason, if i'm using the hebrew or arabic version of ckeditor - it simply omit the rtl instead of writing it. is there a way to force ckeditor to write the direction?
i tried this settings:
config.language = 'he';
config.contentsLangDirection = 'ltr';
i've looked in the ckeditor documentation but found nothing about forcing direction tag.

You should use config.contentsLangDirection = 'rtl'; or config.contentsLangDirection = 'ltr'; in your config file.
Or:
CKEDITOR.replace( 'instance-name', {
contentsLangDirection: 'rtl'
} );
You can find documentation here
You can also use a BIDI plugin.

onkeypress for textarea please call this function
function checkArabic( character ) {
var arabic = /[\u0600-\u06FF]/;
return arabic.test(character);
}
then if true set dir='rtl' for html iframe.

The question is pretty old, and I needed the same functionality so I did the following and it solved the issue, so maybe it will still help someone.
You can do it by checking the dir attribute of the "p" element for example.
If it empty - then its RTL - so force it by writing this code :
CKEDITOR.on( 'instanceReady', function ( event ) {
event.editor.dataProcessor.htmlFilter.addRules( {
elements: {
p: function( element ) {
if(element.attributes.dir=="" || element.attributes.dir==null)
element.attributes.dir = 'rtl';
}
}
});
} );

Related

CKEditor 5 custom plugin not disabled in read mode

Right now I'm integrating custom plugins into the ckeditor 5. I created and added plugins using the ckeditor 5 documentation.
I also have a custom "super" build (similar to this example) that I use in my web application.
Now my problem is that my plugins will not be disabled in the ckeditor read mode (as showcased in the image at the button). The ckeditor documentation mentions that this should be the "default" behaviour for plugins / buttons.
If someone has an idea where I'm going wrong that'd be greatly appreciated!
Here is a skeleton example of my custom plugin class.
import { Plugin } from 'ckeditor5/src/core';
import { ButtonView } from 'ckeditor5/src/ui';
import ckeditor5Icon from './icons/insertvariable.svg';
export default class HWInsertVariable extends Plugin {
static get pluginName() {
return 'HWInsertVariable';
}
init() {
const that = this;
const editor = this.editor;
const model = editor.model;
let labelTxt = 'Variable einfügen';
editor.ui.componentFactory.add( 'hwInsertVariableButton', locale => {
const view = new ButtonView( locale );
view.set( {
label: labelTxt,
icon: ckeditor5Icon,
tooltip: true,
affectsData: true
} );
this.listenTo( view, 'execute', () => {
model.change( writer => {
that.buttonClicked();
} );
editor.editing.view.focus();
} );
return view;
} );
}
buttonClicked() {
//code
}
}
Im not sure what the correct method to resolve this is, as I also am facing the same. But what I have found so far, is that there might be a hacky way to get around this.
Checkout the docs regarding "disabling commands", "read-only" mode, and notice the CSS class "ck-disabled"
if/when I find a working way, I will try to come back here and post a better solution
Update:
I fixed this for me when I found that I was missing the section of the code in my my_plugin_ui.js where
const command = editor.commands.get('nameOfCommand');
// Execute the command when the button is clicked (executed).
buttonView.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');

How to change group of CSS items in jqGrid

I want to change group of CSS items in jqGrid. Documentation is saying
Of course if we want to change not only one CSS item from a group, but two or more we can use jQuery extend to do this:
var my_col_definition = {
icon_move : 'ui-icon-arrow-1',
icon_menu : "ui-icon-pencil"
}
$.extend( $.jgrid.styleUI.jQueryUI.colmenu , my_col_definition );
And this is working partially. But I want to override all icons in my Bootstrap with next code:
$.extend($.jgrid.styleUI.Bootstrap, {
common: {
icon_base: "fa"
},
inlinedit: {
icon_edit_nav: "fa-edit"
},
navigator: {
icon_edit_nav: "fa-edit"
},
// ...
});
and my grid stops working and does not respond to any commands. There are no errors in console.
Do anybody know how to fix the problem in an elegant way and do not override every group separately?
It is unknown which versions of Guriddo jqGrid and Bootstrap are used.
I see you try to use the fontAwesome.
With the last release you can use fontAwesome with ths following settings:
<script>
$.jgrid.defaults.styleUI = 'Bootstrap4';
$.jgrid.defaults.iconSet = "fontAwesome";
</script>
And point to the needed css files as described in this documentation
You can change the icons the way you do in your code without problems - I have tested this and it works.
In any case, please prepare a simple demo which reproduces the problem, so that we can look into it.

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.

ckeditor how to allow for .insertHtml("<customTag myAttr='value'"></customTag>")

var currentDialog = CKEDITOR.dialog.getCurrent();
currentDialog._.editor.insertHtml("<customTag myAttr='var'></customTag>");
Throws an error, TypeError: Cannot read property 'isBlock' of undefined
If I try .insertHtml("<span>hello</span>") it works just fine.
How can I change ckeditor to allow me to specify my own custom html tags via .insertHtml()? I'd love to just change it to be something like <span class='custom'... or something like that, but I'm having to deal with legacy CMS articles. Using latest ckeditor. Thanks.
You need to modify CKEDITOR.dtd object so editor will know this tag and correctly parse HTML and process DOM:
CKEDITOR.dtd.customtag = { em:1 }; // List of tag names it can contain.
CKEDITOR.dtd.$block.customtag = 1; // Choose $block or $inline.
CKEDITOR.dtd.body.customtag = 1; // Body may contain customtag.
You need to allow for this tag and its styles/attrs/classes in Advanced Content Filter:
editor.filter.allow( 'customtag[myattr]', 'myfeature' );
Unfortunately, due to some caching, in certain situations you cannot modify DTD object after CKEditor is loaded - you need to modify it when it is created. So to do that:
Clone the CKEditor repository or CKEditor presets repository.
Modify core/dtd.js code.
And build your minified package following instructions in README.md - the only requirements are Java (sorry - Google Closure Compiler :P) and Bash.
PS. That error should not be thrown when unknown element is inserted, so I reported http://dev.ckeditor.com/ticket/10339 and to solve this inconvenience http://dev.ckeditor.com/ticket/10340.
I worked around this issue with a combination of createFromHtml() and insertElement()
CKEDITOR.replace('summary', { ... });
var editor = CKEDITOR.instances.summary;
editor.on('key', function(ev) {
if (ev.data.keyCode == 9) { // TAB
var tabHtml = '<span style="white-space:pre"> </span>';
var tabElement = CKEDITOR.dom.element.createFromHtml(tabHtml, editor.document);
editor.insertElement(tabElement);
}
}

How to place the caret at the end in CKEditor 4?

I'd like to place the caret at the end of the text after focus().
There are a lot of solutions for CKEditor 3, I tried around three of them, but they don't seem to work for CKEditor 4.
Note: I'm using inline-editing with contenteditable="true".
This should do the job (it WFM on themed and inline editors):
CKEDITOR.inline( 'editable', {
on: {
focus: function( evt ) {
setTimeout( function() {
var editor = evt.editor,
range = editor.createRange();
range.moveToElementEditEnd( editor.editable() );
range.select();
range.scrollIntoView();
}, 100 );
}
}
} );
Note that the timeout is required because on focus selection is automatically placed at the beginning or in place which was clicked, so you need to wait a while to overwrite that behaviour. You can check shorter timeouts of course.

Resources