Consider an original bilingual delivery note. The first paragraph contains an Arabic instruction and the next gives the English reference Loading bay B-12. Staff need to set each paragraph's direction separately while keeping the reference legible. Setting the entire application to right-to-left would also affect surrounding controls and English content.
Add direction controls to the existing note editor
For an application with current TinyMCE already loaded, merge these options into its initialization:
tinymce.init({
selector: '#delivery-note',
plugins: 'directionality',
toolbar: 'undo redo | bold italic | ltr rtl'
});
Keep the application's existing loading, license configuration, other plugins, and setup callbacks. If plugins already contains entries, add directionality to that list. Replacing the list would remove those other features.
The toolbar identifiers are ltr and rtl. The official plugin also exposes mceDirectionLTR and mceDirectionRTL for application controls. After your application has restored the intended editor selection, an action can call:
deliveryEditor.execCommand('mceDirectionRTL');
Here deliveryEditor is the initialized instance for this note. A global active-editor reference can target a different note when several editors are on the page. Check the selected paragraph before executing the command from an external button.
Keep direction, alignment, and language separate
Start with this illustrative content through the application's normal data-loading path:
<p lang="ar" dir="rtl">يرجى الانتظار عند البوابة.</p>
<p lang="en" dir="ltr">Loading bay B-12</p>
The first paragraph asks the reader to wait at the gate. These attributes describe the expected saved content; they are not a claim about the exact serialization of every configured TinyMCE installation. Inspect what your editor exports and what your server preserves.
lang identifies the language. dir establishes the base reading direction. Alignment controls where a line sits within its available space. None of those choices substitutes for the others. The HTML direction guide explains mixed-direction numbers, punctuation, and isolated names when you build the reader's markup.
For the delivery note, place the cursor in the Arabic paragraph and choose RTL. Then move into the English reference and choose LTR. Do not select the entire document unless both paragraphs should receive the same direction.
Diagnose a change that disappears after saving
First inspect the current editor output through the application's existing content-capture path. If the expected direction is absent there, check the target selection, plugin loading, and any content filters configured in the editor. If the editor output contains it but the reopened record does not, inspect server sanitization and storage.
When the saved HTML retains direction but the reader view looks wrong, inspect inherited CSS and the actual markup delivered to that view. A stylesheet forcing physical alignment can make correctly directed text appear misleading. Avoid reversing the text string to imitate RTL; that changes the content itself.
The TinyMCE content extraction guide covers reading the current editor instance rather than an older textarea value. Capture the two paragraphs together so their different directions stay attached to the same saved note.
Read both paragraphs in the delivered note
In your integration, save and reopen the note after setting the two directions. Read the Arabic sentence with its punctuation, then read Loading bay B-12 as a separate English reference. Check a narrow reader view as well as the authoring surface. The task is complete when the recipient can distinguish the gate instruction from the bay reference without the authoring toolbar present.