Dynamically change the text direction in ace editor
I am trying to update the text direction dynamically in the ace editor to "LTR" or "RTL" depending on what is entered by the user.
I am listening to change event on the ace editor and writing the following code after going through the ace.js
scope.editor.session.$bidiHandler.setTextDir(_isNewValueRTL);
scope.editor.session.$bidiHandler.updateBidiMap();
_isNewValueRTL is a boolean. I don't see it working.
Any help will be appreciated
ace-editor
edited Nov 13 '18 at 18:47
Harsha pps
94611122
asked Nov 13 '18 at 10:21
Raviteja AvvariRaviteja Avvari
137212
add a comment |
I am trying to update the text direction dynamically in the ace editor to "LTR" or "RTL" depending on what is entered by the user.
I am listening to change event on the ace editor and writing the following code after going through the ace.js
scope.editor.session.$bidiHandler.setTextDir(_isNewValueRTL);
scope.editor.session.$bidiHandler.updateBidiMap();
_isNewValueRTL is a boolean. I don't see it working.
Any help will be appreciated
ace-editor
edited Nov 13 '18 at 18:47
Harsha pps
94611122
asked Nov 13 '18 at 10:21
Raviteja AvvariRaviteja Avvari
137212
add a comment |
I am trying to update the text direction dynamically in the ace editor to "LTR" or "RTL" depending on what is entered by the user.
I am listening to change event on the ace editor and writing the following code after going through the ace.js
scope.editor.session.$bidiHandler.setTextDir(_isNewValueRTL);
scope.editor.session.$bidiHandler.updateBidiMap();
_isNewValueRTL is a boolean. I don't see it working.
Any help will be appreciated
ace-editor
edited Nov 13 '18 at 18:47
Harsha pps
94611122
asked Nov 13 '18 at 10:21
Raviteja AvvariRaviteja Avvari
137212
I am trying to update the text direction dynamically in the ace editor to "LTR" or "RTL" depending on what is entered by the user.
I am listening to change event on the ace editor and writing the following code after going through the ace.js
scope.editor.session.$bidiHandler.setTextDir(_isNewValueRTL);
scope.editor.session.$bidiHandler.updateBidiMap();
_isNewValueRTL is a boolean. I don't see it working.
Any help will be appreciated
ace-editor
ace-editor
edited Nov 13 '18 at 18:47
Harsha pps
94611122
asked Nov 13 '18 at 10:21
Raviteja AvvariRaviteja Avvari
137212
edited Nov 13 '18 at 18:47
Harsha pps
94611122
asked Nov 13 '18 at 10:21
Raviteja AvvariRaviteja Avvari
137212
edited Nov 13 '18 at 18:47
Harsha pps
94611122
edited Nov 13 '18 at 18:47
Harsha pps
94611122
edited Nov 13 '18 at 18:47
Harsha pps
94611122
94611122
asked Nov 13 '18 at 10:21
Raviteja AvvariRaviteja Avvari
137212
asked Nov 13 '18 at 10:21
Raviteja AvvariRaviteja Avvari
137212
asked Nov 13 '18 at 10:21
Raviteja AvvariRaviteja Avvari
137212
137212
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Try adding this CSS to your ace_line class
.ace_line
direction: ltr;
unicode-bidi: bidi-override;
This sould change the direction of the text
answered Nov 13 '18 at 17:36
Harsha ppsHarsha pps
94611122
add a comment |
Ace currently doesn't have setTextDir method, it has support for line based direction
https://github.com/ajaxorg/ace/pull/3400 that works by adding 'RIGHT-TO-LEFT EMBEDDING' (U+202B) to the line
to use that include ext-rtl.js
editor.setOption("rtlText", true)
then to change the direction of cursor line call
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js ></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ext-rtl.js ></script>
<script>
debugger
editor = ace.edit(null,
value: " leftnu202B rightnn try press ctrl-alt-shift-r or ctrl-alt-shift-l ",
rtlText: true,
)
document.body.appendChild(editor.container)
editor.container.style.cssText = "height: 150px; width: 400px; outline: solid"
</script>editor.session.$bidiHandler.setRtlDirection(editor, true)
If you need some other functionality then open a feature request to ace https://github.com/ajaxorg/ace/issues/new
answered Nov 13 '18 at 13:23
a usera user
16.8k43763
setRtlDirection method is undefined on $bidiHandler. Am i missing anything?
– Raviteja Avvari
Nov 13 '18 at 14:12
rtlText option does not exist aswell
– Raviteja Avvari
Nov 13 '18 at 14:20
maybe you are using an old version of ace?, I have added working example to the answer
– a user
Nov 13 '18 at 18:59
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53278788%2fdynamically-change-the-text-direction-in-ace-editor%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try adding this CSS to your ace_line class
.ace_line
direction: ltr;
unicode-bidi: bidi-override;
This sould change the direction of the text
answered Nov 13 '18 at 17:36
Harsha ppsHarsha pps
94611122
add a comment |
Try adding this CSS to your ace_line class
.ace_line
direction: ltr;
unicode-bidi: bidi-override;
This sould change the direction of the text
answered Nov 13 '18 at 17:36
Harsha ppsHarsha pps
94611122
add a comment |
Try adding this CSS to your ace_line class
.ace_line
direction: ltr;
unicode-bidi: bidi-override;
This sould change the direction of the text
answered Nov 13 '18 at 17:36
Harsha ppsHarsha pps
94611122
Try adding this CSS to your ace_line class
.ace_line
direction: ltr;
unicode-bidi: bidi-override;
This sould change the direction of the text
answered Nov 13 '18 at 17:36
Harsha ppsHarsha pps
94611122
answered Nov 13 '18 at 17:36
Harsha ppsHarsha pps
94611122
answered Nov 13 '18 at 17:36
Harsha ppsHarsha pps
94611122
answered Nov 13 '18 at 17:36
Harsha ppsHarsha pps
94611122
94611122
add a comment |
add a comment |
Ace currently doesn't have setTextDir method, it has support for line based direction
https://github.com/ajaxorg/ace/pull/3400 that works by adding 'RIGHT-TO-LEFT EMBEDDING' (U+202B) to the line
to use that include ext-rtl.js
editor.setOption("rtlText", true)
then to change the direction of cursor line call
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js ></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ext-rtl.js ></script>
<script>
debugger
editor = ace.edit(null,
value: " leftnu202B rightnn try press ctrl-alt-shift-r or ctrl-alt-shift-l ",
rtlText: true,
)
document.body.appendChild(editor.container)
editor.container.style.cssText = "height: 150px; width: 400px; outline: solid"
</script>editor.session.$bidiHandler.setRtlDirection(editor, true)
If you need some other functionality then open a feature request to ace https://github.com/ajaxorg/ace/issues/new
answered Nov 13 '18 at 13:23
a usera user
16.8k43763
setRtlDirection method is undefined on $bidiHandler. Am i missing anything?
– Raviteja Avvari
Nov 13 '18 at 14:12
rtlText option does not exist aswell
– Raviteja Avvari
Nov 13 '18 at 14:20
maybe you are using an old version of ace?, I have added working example to the answer
– a user
Nov 13 '18 at 18:59
add a comment |
Ace currently doesn't have setTextDir method, it has support for line based direction
https://github.com/ajaxorg/ace/pull/3400 that works by adding 'RIGHT-TO-LEFT EMBEDDING' (U+202B) to the line
to use that include ext-rtl.js
editor.setOption("rtlText", true)
then to change the direction of cursor line call
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js ></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ext-rtl.js ></script>
<script>
debugger
editor = ace.edit(null,
value: " leftnu202B rightnn try press ctrl-alt-shift-r or ctrl-alt-shift-l ",
rtlText: true,
)
document.body.appendChild(editor.container)
editor.container.style.cssText = "height: 150px; width: 400px; outline: solid"
</script>editor.session.$bidiHandler.setRtlDirection(editor, true)
If you need some other functionality then open a feature request to ace https://github.com/ajaxorg/ace/issues/new
answered Nov 13 '18 at 13:23
a usera user
16.8k43763
setRtlDirection method is undefined on $bidiHandler. Am i missing anything?
– Raviteja Avvari
Nov 13 '18 at 14:12
rtlText option does not exist aswell
– Raviteja Avvari
Nov 13 '18 at 14:20
maybe you are using an old version of ace?, I have added working example to the answer
– a user
Nov 13 '18 at 18:59
add a comment |
Ace currently doesn't have setTextDir method, it has support for line based direction
https://github.com/ajaxorg/ace/pull/3400 that works by adding 'RIGHT-TO-LEFT EMBEDDING' (U+202B) to the line
to use that include ext-rtl.js
editor.setOption("rtlText", true)
then to change the direction of cursor line call
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js ></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ext-rtl.js ></script>
<script>
debugger
editor = ace.edit(null,
value: " leftnu202B rightnn try press ctrl-alt-shift-r or ctrl-alt-shift-l ",
rtlText: true,
)
document.body.appendChild(editor.container)
editor.container.style.cssText = "height: 150px; width: 400px; outline: solid"
</script>editor.session.$bidiHandler.setRtlDirection(editor, true)
If you need some other functionality then open a feature request to ace https://github.com/ajaxorg/ace/issues/new
answered Nov 13 '18 at 13:23
a usera user
16.8k43763
Ace currently doesn't have setTextDir method, it has support for line based direction
https://github.com/ajaxorg/ace/pull/3400 that works by adding 'RIGHT-TO-LEFT EMBEDDING' (U+202B) to the line
to use that include ext-rtl.js
editor.setOption("rtlText", true)
then to change the direction of cursor line call
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js ></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ext-rtl.js ></script>
<script>
debugger
editor = ace.edit(null,
value: " leftnu202B rightnn try press ctrl-alt-shift-r or ctrl-alt-shift-l ",
rtlText: true,
)
document.body.appendChild(editor.container)
editor.container.style.cssText = "height: 150px; width: 400px; outline: solid"
</script>editor.session.$bidiHandler.setRtlDirection(editor, true)
If you need some other functionality then open a feature request to ace https://github.com/ajaxorg/ace/issues/new
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js ></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ext-rtl.js ></script>
<script>
debugger
editor = ace.edit(null,
value: " leftnu202B rightnn try press ctrl-alt-shift-r or ctrl-alt-shift-l ",
rtlText: true,
)
document.body.appendChild(editor.container)
editor.container.style.cssText = "height: 150px; width: 400px; outline: solid"
</script><script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js ></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ext-rtl.js ></script>
<script>
debugger
editor = ace.edit(null,
value: " leftnu202B rightnn try press ctrl-alt-shift-r or ctrl-alt-shift-l ",
rtlText: true,
)
document.body.appendChild(editor.container)
editor.container.style.cssText = "height: 150px; width: 400px; outline: solid"
</script>answered Nov 13 '18 at 13:23
a usera user
16.8k43763
edited Nov 13 '18 at 18:58
answered Nov 13 '18 at 13:23
a usera user
16.8k43763
answered Nov 13 '18 at 13:23
a usera user
16.8k43763
answered Nov 13 '18 at 13:23
a usera user
16.8k43763
16.8k43763
setRtlDirection method is undefined on $bidiHandler. Am i missing anything?
– Raviteja Avvari
Nov 13 '18 at 14:12
rtlText option does not exist aswell
– Raviteja Avvari
Nov 13 '18 at 14:20
maybe you are using an old version of ace?, I have added working example to the answer
– a user
Nov 13 '18 at 18:59
add a comment |
setRtlDirection method is undefined on $bidiHandler. Am i missing anything?
– Raviteja Avvari
Nov 13 '18 at 14:12
rtlText option does not exist aswell
– Raviteja Avvari
Nov 13 '18 at 14:20
maybe you are using an old version of ace?, I have added working example to the answer
– a user
Nov 13 '18 at 18:59
setRtlDirection method is undefined on $bidiHandler. Am i missing anything?
– Raviteja Avvari
Nov 13 '18 at 14:12
setRtlDirection method is undefined on $bidiHandler. Am i missing anything?
– Raviteja Avvari
Nov 13 '18 at 14:12
rtlText option does not exist aswell
– Raviteja Avvari
Nov 13 '18 at 14:20
rtlText option does not exist aswell
– Raviteja Avvari
Nov 13 '18 at 14:20
maybe you are using an old version of ace?, I have added working example to the answer
– a user
Nov 13 '18 at 18:59
maybe you are using an old version of ace?, I have added working example to the answer
– a user
Nov 13 '18 at 18:59
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53278788%2fdynamically-change-the-text-direction-in-ace-editor%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
