求助：CKEditor点击LTR按钮未设置文本LTR方向的解决方法

Got it, let's break down how to solve both of these CKEditor direction problems you're dealing with—they're manageable once you tweak the editor's default behavior.

1. Setting Default LTR Direction in Source Code #

By default, CKEditor might not explicitly add dir="ltr" to your content source because many environments assume LTR as the default. To force this into the source, try either of these:

• Global Editor Config: When initializing CKEditor, set the content language direction directly:

  CKEDITOR.replace('your-editor-id', {
    contentsLangDirection: 'ltr' // Forces the entire content area to use LTR by default
  });
  

  This ensures the editor's editable area starts with dir="ltr", and this attribute will show up in your source code.

• Pre-Set Container Attribute: If you're using a textarea or a div as the editor's base, add dir="ltr" to that element before initializing CKEditor:

  <textarea id="your-editor-id" dir="ltr"></textarea>
  

  The editor will inherit this direction and include it in the output source.

2. Making the LTR Button Actively Set LTR Direction #

The default LTR button often only removes RTL styling instead of explicitly setting dir="ltr". To fix this, you can override the default command or create a custom button that forces the attribute to be added.

Option 1: Override the Default Direction Command #

Modify the existing direction command to actively set dir="ltr" when the button is clicked:

CKEDITOR.replace('your-editor-id', {
  contentsLangDirection: 'ltr',
  on: {
    instanceReady: function(evt) {
      const editor = evt.editor;
      const originalDirectionCmd = editor.getCommand('direction');
      
      // Rewrite the execute method to handle LTR explicitly
      originalDirectionCmd.execute = function(direction) {
        const selection = editor.getSelection();
        const ranges = selection.getRanges();
        const ltrStyle = new CKEDITOR.style({ element: 'div', attributes: { dir: 'ltr' } });

        if (direction === 'ltr') {
          // Apply LTR to the entire document or selected range
          ltrStyle.apply(editor.document);
          // For selected content, set dir on the common ancestor element
          ranges.forEach(range => {
            const parent = range.getCommonAncestor();
            if (parent) parent.setAttribute('dir', 'ltr');
          });
        } else {
          // Keep the original RTL behavior
          originalDirectionCmd._.execute.call(this, direction);
        }
      };
    }
  }
});

Option 2: Create a Custom LTR Button #

If you prefer a clean separation, build a custom plugin to replace the default LTR button:

// Define the custom plugin
CKEDITOR.plugins.add('customltr', {
  init: function(editor) {
    // Add a custom command to set LTR
    editor.addCommand('customLtr', {
      exec: function(editor) {
        const selection = editor.getSelection();
        const ranges = selection.getRanges();
        
        // Set LTR on the editable area first
        editor.editable().setAttribute('dir', 'ltr');
        
        // Apply LTR to selected content
        ranges.forEach(range => {
          const element = range.getCommonAncestor();
          if (element) {
            element.setAttribute('dir', 'ltr');
            // Wrap inline elements in a block with LTR if needed
            if (element.isInline()) {
              const div = editor.document.createElement('div');
              div.setAttribute('dir', 'ltr');
              range.moveContentsToElementStart(div);
              range.selectNodeContents(div);
            }
          }
        });
      }
    });
    
    // Replace the default LTR button with our custom one
    editor.ui.addButton('Ltr', {
      label: 'Left to Right',
      command: 'customLtr',
      toolbar: 'bidi,10'
    });
  }
});

// Initialize editor with the custom plugin
CKEDITOR.replace('your-editor-id', {
  plugins: 'customltr',
  contentsLangDirection: 'ltr'
});

After implementing either option, test clicking the LTR button—you should now see dir="ltr" explicitly added to your content source instead of just removing RTL styles.

内容的提问来源于stack exchange，提问作者Guy Korland