这个问题我花了两个星期的时间，最后，我用ckeditor.js编码解决了它。添加CKEditor 5组件的最好方法是，首先，你应该使用https://ckeditor.com/ckeditor-5/online-builder/并通过5个简单的步骤。然后，你应该将它添加到你的项目中。另外，可以将rtl direction添加到这个构建组件中。然而，主要的问题是它只是添加了rtl方向作为默认值，并且不可能在文本中根据您的需要更改它。因此您必须自己做一些编码。我做了它，它在Angular 8中工作得很完美
如果你仔细按照下面的步骤，方向选择将很容易地添加到你的项目中。
1.转到@ckeditor/ckeditor 5-构建-经典/构建并打开ckeditor.js文件
1.然后尝试从min js文件中提取它-你可以通过谷歌搜索找到太多的在线工具。
1.那么首先你需要找到下面的块代码

class Ak extends ok {
        static get requires() {
          return [pk, xk];
        }
        static get pluginName() {
          return "Alignment";
        }
      }

1.现在在这个块代码之后你应该添加下面的代码（只是从这里复制到你的文件）

// 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';
        }
      }

1.现在你需要找到“EL.builtinPlugins[....]”代码块，然后你应该将“Direction”添加到它的数组中。
1.在ckeditor配置中添加工具栏项的组件中，需要在项中添加“direction”（注意区分大小写）。
祝贺你.你将看到这方向按钮现在在你的工具栏.享受

目前，RTL还不被支持。我们只发布了alpha版本供开发者预览。然而RTL在我们的脑海中，我们将在最终的1.0.0版本中支持它。
在这个场合，我想问你“支持RTL”到底是什么意思。我们需要用户的反馈，以便能够正确地优先考虑功能。当然，我们有自己的想法，但我们很乐意听取感兴趣的用户希望在CKE5中看到什么。
我们将非常感谢您的反馈。如果您愿意，可以在此处提供反馈或在our GitHub repository上创建问题

使用这个css类，它是内置的ckeditor类。

.ck.ck-editor__editable_inline {
        direction: rtl;
        text-align: right;
    }

我知道这是很晚的答案，但如果有人仍然需要这个，来到这个职位：）
使用Angular ，我可以通过将以下内容添加到CKEditor配置中来实现：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // This is the part you need regardless
        // of using Angular or not
        language: {
            // The UI will be English.
            ui: 'en',

            // But the content will be edited in Arabic.
            content: 'ar'
        }
    } )

如果你也想使用RTL UI，只需将其设置为

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // This is the part you need regardless
        // of using Angular or not
        language: {
            // The UI will be Arabic.
            ui: 'ar',

            // And the content will be edited in Arabic.
            content: 'ar'
        }
    } )

您可以在CKEditor UI语言文档中找到更多相关信息

考虑confgi prop ：

<ckeditor v-model="..." :editor="..." :config="{contentsLangDirection> : 'rtl', language: 'fa'}" />

对于波斯语（波斯语）使用fa并且对于阿拉伯语使用ar，