我想知道，如何为RTL设置CKeditor 5？ 我无法在他们的网站上找到这个。
如果不可能，rtl会有什么好的编辑器？
谢谢你！答案 0 :(得分：1)
目前，不支持RTL。我们只为开发人员预览发布了alpha版本。然而，RTL是我们的想法，我们将在最终的1.0.0版本中支持它。
有了这个机会，我想问你到底是什么意思＆＃34;支持RTL＆＃34;。我们需要用户反馈才能正确确定功能的优先级。当然，我们有自己的想法，但我们很乐意听取用户希望在CKE5中看到的内容。
我们很感激任何反馈。如果您愿意，可以在此处提供，或在our GitHub repository
上创建问题答案 1 :(得分：0)
我遇到了2个星期的问题，最后，我按照自己的经验在ckeditor.js中进行编码来解决它，添加CKEditor 5组件的最佳方法是，首先，您应该https://ckeditor.com/ckeditor-5/online-builder/并通过5个简单的步骤。 然后应将其添加到您的项目中。同样，可以向此构建组件添加rtl方向。但是，主要问题是它仅将rtl方向添加为默认值，并且无法根据需要在文本中对其进行更改。因此，您必须自己进行一些编码。我做到了，它在Angular 8中完美地工作了
如果您认真执行以下步骤，那么方向选择将轻松添加到您的项目中。
转到@ ckeditor / ckeditor5-build-classic / build并打开ckeditor.js文件
然后尝试从min js文件中提取它-您可以通过谷歌搜索找到太多在线工具。
然后您首先需要找到下面的区块代码
class Ak extends ok {
static get requires() {
return [pk, xk];
}
static get pluginName() {
return "Alignment";
}
}
// Removes the direction attribute from blocks.
// @private
function removeDirectionFromSelection(blocks, writer) {
for (const block of blocks) {
writer.removeAttribute(DIRECTION, block);
}
}
// Sets the direction attribute on blocks.
// @private
function setDirectionOnSelection(blocks, writer, direction) {
for (const block of blocks) {
writer.setAttribute(DIRECTION, direction, block);
}
}
const DIRECTION = 'direction';
class DirectionCommand extends sk {
refresh() {
const firstBlock = ck(this.editor.model.document.selection.getSelectedBlocks());
// As first check whether to enable or disable the command as the value will always be false if the command cannot be enabled.
this.isEnabled = !!firstBlock && this._canBeAligned(firstBlock);
this.value = (this.isEnabled && firstBlock.hasAttribute('direction')) ? firstBlock.getAttribute('direction') : 'rtl';
}
execute(options = {}) {
const editor = this.editor;
const model = editor.model;
const doc = model.document;
const value = options.value;
model.change(writer => {
// Get only those blocks from selected that can have direction set
const blocks = Array.from(doc.selection.getSelectedBlocks()).filter(block => this._canBeAligned(block));
const currentDirection = blocks[0].getAttribute('direction');
// Remove direction attribute if current direction is:
// - default (should not be stored in model as it will bloat model data)
// - equal to currently set
// - or no value is passed - denotes default direction.
const removeDirection = isDefault(value) || currentDirection === value || !value;
if (removeDirection) {
removeDirectionFromSelection(blocks, writer);
} else {
setDirectionOnSelection(blocks, writer, value);
}
});
}
_canBeAligned(block) {
return this.editor.model.schema.checkAttribute(block, DIRECTION);
}
}
const supportedOptions = ['ltr', 'rtl'];
class DirectionEditing extends ok {
constructor(editor) {
super(editor);
editor.config.define('direction', {
options: [...supportedOptions]
});
}
init() {
const editor = this.editor;
const schema = editor.model.schema;
// Filter out unsupported options.
const enabledOptions = editor.config.get('direction.options').filter(isSupported);
// Allow direction attribute on all blocks.
schema.extend('$block', { allowAttributes: 'direction' });
editor.model.schema.setAttributeProperties('direction', { isFormatting: true });
const definition = _buildDefinition(enabledOptions.filter(option => !isDefault(option)));
editor.conversion.attributeToAttribute(definition);
editor.commands.add('direction', new DirectionCommand(editor));
}
}
function isSupported(option) {
return supportedOptions.includes(option);
}
function _buildDefinition(options) {
const definition = {
model: {
key: 'direction',
values: options.slice()
},
view: {}
};
for (const option of options) {
definition.view[option] = {
key: 'style',
value: {
'direction': option
}
};
}
return definition;
}
function isDefault(direction) {
// Right now only LTR is supported so the 'ltr' value is always the default one.
return direction === 'rtl';
}
class DirectionUI extends ok {
get localizedOptionTitles() {
const t = this.editor.t;
return {
'ltr': t('چپ چین کردن متن'),
'rtl': t('راست چین کردن متن'),
};
}
static get pluginName() {
return 'DirectionUI';
}
init() {
const editor = this.editor;
const componentFactory = editor.ui.componentFactory;
const t = editor.t;
const options = editor.config.get('direction.options');
options
.filter(isSupported)
.forEach(option => this._addButton(option));
componentFactory.add('direction', locale => {
const dropdownView = jw(locale);
// Add existing direction buttons to dropdown's toolbar.
const buttons = options.map(option => componentFactory.create(`direction:${option}`));
Fw(dropdownView, buttons);
// Configure dropdown properties an behavior.
dropdownView.buttonView.set({
label: t('چپ چین راست چین'),
tooltip: true
});
dropdownView.toolbarView.isVertical = true;
dropdownView.extendTemplate({
attributes: {
class: 'ck-direction-dropdown'
}
});
// The default icon is align left as we do not support RTL yet (see #3).
const defaultIcon = alignLeftIcon;
// Change icon to reflect current selection's direction.
dropdownView.buttonView.bind('icon').toMany(buttons, 'isOn', (...areActive) => {
// Get the index of an active button.
const index = areActive.findIndex(value => value);
// If none of the commands is active, display either defaultIcon or the first button's icon.
if (index < 0) {
return defaultIcon;
}
// Return active button's icon.
return buttons[index].icon;
});
// Enable button if any of the buttons is enabled.
dropdownView.bind('isEnabled').toMany(buttons, 'isEnabled', (...areEnabled) => areEnabled.some(isEnabled => isEnabled));
return dropdownView;
});
}
_addButton(option) {
const editor = this.editor;
editor.ui.componentFactory.add(`direction:${option}`, locale => {
const command = editor.commands.get('direction');
const buttonView = new Ew(locale);
buttonView.set({
label: this.localizedOptionTitles[option],
icon: icons.get(option),
tooltip: true
});
// Bind button model to command.
buttonView.bind('isEnabled').to(command);
buttonView.bind('isOn').to(command, 'value', value => value === option);
// Execute command.
this.listenTo(buttonView, 'execute', () => {
editor.execute('direction', { value: option });
editor.editing.view.focus();
});
return buttonView;
});
}
}
const alignLeftIcon = '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M 10 0.199219 C 7.292969 0.199219 5.101562 2.394531 5.101562 5.101562 C 5.101562 7.804688 7.292969 10 10 10 L 10 19.800781 L 12.449219 19.800781 L 12.449219 2.648438 L 14.898438 2.648438 L 14.898438 19.800781 L 17.351562 19.800781 L 17.351562 2.648438 L 19.800781 2.648438 L 19.800781 0.199219 Z M 0.199219 13.675781 L 5.101562 8.777344 L 0.199219 3.875 Z M 0.199219 13.675781"/></svg>';
const alignRightIcon = '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M 5.101562 0.199219 C 2.394531 0.199219 0.199219 2.394531 0.199219 5.101562 C 0.199219 7.804688 2.394531 10 5.101562 10 L 5.101562 19.800781 L 7.550781 19.800781 L 7.550781 2.648438 L 10 2.648438 L 10 19.800781 L 12.449219 19.800781 L 12.449219 2.648438 L 14.898438 2.648438 L 14.898438 0.199219 Z M 19.800781 3.875 L 14.898438 8.777344 L 19.800781 13.675781 Z M 19.800781 3.875"/></svg>';
const icons = new Map([
['ltr', alignLeftIcon],
['rtl', alignRightIcon],
]);
class Direction extends ok {
static get requires() {
return [DirectionEditing, DirectionUI];
}
static get pluginName() {
return 'Direction';
}
}
恭喜。您现在将在工具栏中看到“方向”按钮。 享受
答案 2 :(得分：0)
使用这个 css 类，它是内置的 ckeditor 类。
.ck.ck-editor__editable_inline {
direction: rtl;
text-align: right;
}