Add Right-to-Left (RTL) support #4569
Comments
|
Isn't it supported already? var DirectionStyle = Quill.import('attributors/style/direction');
DirectionStyle.whitelist = ['ltr','rtl'];
Quill.register(DirectionStyle, true); |
@Juicetan , Thank you for your reply.With above provided configuration:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quill Editor with Direction Control</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet">
<style>
#editor-container {
max-width: 800px;
margin: 20px auto;
}
.ql-direction {
padding: 8px 12px !important;
}
</style>
</head>
<body>
<div id="editor-container">
<div id="toolbar">
<span class="ql-formats">
<select class="ql-header">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
<option selected></option>
</select>
</span>
<span class="ql-formats">
<button class="ql-bold" ></button>
<button class="ql-italic" ></button>
<button class="ql-underline" ></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<button class="ql-blockquote" ></button>
<button class="ql-code-block" ></button>
<button class="ql-indent" value="-1" ></button>
<button class="ql-indent" value="+1" ></button>
</span>
<span class="ql-formats">
<button class="ql-align" value="" ></button>
<button class="ql-align" value="center" ></button>
<button class="ql-align" value="right" ></button>
</span>
<span class="ql-formats">
<select class="ql-color" ></select>
<select class="ql-background" ></select>
</span>
<span class="ql-formats">
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super" ></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered" ></button>
<button class="ql-list" value="bullet" ></button>
</span>
<span class="ql-formats">
</div>
<div id="editor" style="height: 300px;"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>
<script>
var DirectionStyle = Quill.import('attributors/style/direction');
DirectionStyle.whitelist = ['ltr', 'rtl'];
Quill.register(DirectionStyle, true);
var quill = new Quill('#editor', {
modules: {
toolbar: {
container: '#toolbar',
},
},
direction: 'rtl',
theme: 'snow'
});
</script>
</body>
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Issue Description
Request: Add Right-to-Left (RTL) support for text direction in Quill editor.
Details: As a user who works with languages that are written from right to left, such as Arabic or Hebrew, I would like to see RTL text direction support integrated into Quill. This feature would greatly enhance usability and accessibility for users who rely on RTL languages, ensuring a seamless writing experience.
Expected Behavior:
Additional Context:
Impact: Enhancing Quill with RTL support would broaden its accessibility and appeal to a wider audience of users who prefer or require RTL text direction. This update aligns with the goal of making Quill more inclusive and user-friendly across diverse linguistic contexts.
The text was updated successfully, but these errors were encountered: