Osticket: There is no RTL direction on redactor editor

[alirezastack]

Is there a way to change text RTL in redactor? When I right align the text it does not work as expected when English and Persian (right aligned language) are both in a sentence. I need to make the direction RTL.

How should I do that?
Thanks

[ntozier]

This sounds like a question for the makers of Redactor.

[alirezastack]

It is odd that OSTicket has used an editor that does not have RTL direction option.

[ntozier]

https://imperavi.com/redactor/docs/settings/lang/

[mbnoimi]

@ntozier I read the doc you sent, where can I download ar.js for enabling Arabic language?!

I'm not js geek to be able to hack it!
As I understood from redactor it seems I need to modify osTicket itself for editing redactor settings:
https://imperavi.com/redactor/docs/settings/lang/

[mbnoimi]

It seems you minimized redactor js/redactor.min.js I unable to read it (I attempted to change the settings of it)

[mbnoimi]

I modified redactor.min.js using JS Beautifier by adding $('#redactor').redactor({ direction: 'rtl' }); To the end of the file... does it true?
See my gist please.

[lionscribe]

It is an easy fix. Just edit the file include/ajax.config.php, change the line (# 28)
from
$rtl = false;
to
$rtl = true;
and you will have the right to left option in the editor.

[mbnoimi]

Thanks @lionscribe I did what you suggested but nothing changed:

include/ajax.config.php content
```
/***********************
ajax.content.php

AJAX interface for content fetching...allowed methods.

Peter Rotich <[email protected]>
Copyright (c)  2006-2013 osTicket
http://www.osticket.com

Released under the GNU General Public License WITHOUT ANY WARRANTY.
See LICENSE.TXT for details.

vim: expandtab sw=4 ts=4 sts=4:

**********************/
require_once INCLUDE_DIR . 'class.ajax.php';

if(!defined('INCLUDE_DIR')) die('!');

class ConfigAjaxAPI extends AjaxController {

//config info UI might need.
function scp() {
    global $cfg, $thisstaff;

    $lang = Internationalization::getCurrentLanguage();
    $info = Internationalization::getLanguageInfo($lang);
    list($sl, $locale) = explode('_', $lang);

    $rtl = true;
    foreach (Internationalization::availableLanguages() as $info) {
        if (isset($info['direction']))
            $rtl = true;
    }

    $primary = $cfg->getPrimaryLanguage();
    $primary_info = Internationalization::getLanguageInfo($primary);
    list($primary_sl, $primary_locale) = explode('_', $primary);

    $config=array(
          'lock_time'       => $cfg->getTicketLockMode() == Lock::MODE_DISABLED ? 0 : ($cfg->getLockTime()*60),
          'html_thread'     => (bool) $cfg->isRichTextEnabled(),
          'date_format'     => $cfg->getDateFormat(true),
          'lang'            => $lang,
          'short_lang'      => $sl,
          'has_rtl'         => $rtl,
          'lang_flag'       => strtolower($info['flag'] ?: $locale ?: $sl),
          'primary_lang_flag' => strtolower($primary_info['flag'] ?: $primary_locale ?: $primary_sl),
          'primary_language' => Internationalization::rfc1766($primary),
          'secondary_languages' => $cfg->getSecondaryLanguages(),
          'page_size'       => $thisstaff->getPageLimit() ?: PAGE_LIMIT,
    );
    return $this->json_encode($config);
}

function client($headers=true) {
    global $cfg;

    $lang = Internationalization::getCurrentLanguage();
    list($sl, $locale) = explode('_', $lang);

    $rtl = true;
    foreach (Internationalization::availableLanguages() as $info) {
        if (isset($info['direction']))
            $rtl = true;
    }

    $config=array(
        'html_thread'     => (bool) $cfg->isRichTextEnabled(),
        'lang'            => $lang,
        'short_lang'      => $sl,
        'has_rtl'         => $rtl,
        'primary_language' => Internationalization::rfc1766($cfg->getPrimaryLanguage()),
        'secondary_languages' => $cfg->getSecondaryLanguages(),
    );

    $config = $this->json_encode($config);
    if ($headers) {
        Http::cacheable(md5($config), $cfg->lastModified());
        header('Content-Type: application/json; charset=UTF-8');
    }

    return $config;
}

function templateLinks() {
    $links = $this->json_encode(array(
        array('name'=>'Select ...', 'url'=> false),
        array('name'=>'Agent Ticket Link', 'url'=> '%{ticket.staff_link}'),
        array('name'=>'Agent Login Page', 'url'=> '%{url}/scp'),
        array('name'=>'End-User Ticket Link', 'url'=> '%{recipient.ticket_link}'),
        array('name'=>'End-User Login Page', 'url'=> '%{url}/login.php'),
    ));

    Http::cacheable(md5($links));
    header('Content-Type: application/json; charset=UTF-8');

    return $links;
}

/**
 * Ajax: GET /config/date-format?format=<format>
 *
 * Formats the user's current date and time according to the given
 * format in INTL codes.
 *
 * Get-Arguments:
 * format - (string) format string used to format the current date and
 *      time (from the user's perspective)
 *
 * Returns:
 * (string) Current sequence number, optionally formatted
 *
 * Throws:
 * 403 - Not logged in
 * 400 - ?format missing
 */
function dateFormat() {
    global $thisstaff;

    if (!$thisstaff)
        Http::response(403, 'Login required');
    elseif (!isset($_GET['format']))
        Http::response(400, '?format is required');

    return Format::htmlchars(Format::__formatDate(
        Misc::gmtime(), $_GET['format'], false, null, null, '', 'UTC'
    ));
}

}
?>
````

[mbnoimi]

[lionscribe]

Did you reload the page after the change? Try closing browser, and logging in again.

[mbnoimi]

@lionscribe I did. Even I tried to login from another browser

[lionscribe]

I don't know what can be the issue by tou. It works for me. The code in js/redactor-osticket.js clearly references that variable.
BTW, thank you for pointing out, that it needs to be edited twice in the include/ajax.config.php file, in line 28 and line 52, one for SCP and one fro Client.

[mbnoimi]

@lionscribe may you please tell me which version of osT you're using?

I use v1.10 (901e5ea)

[lionscribe]

1.9.15
But looking at the source code, it seems that the redactor part hasn't been changed in over a year.

[ronitbs]

hello,
I Just edit the file include/ajax.config.php, change the line (# 28, #62)
from
$rtl = false;
to
$rtl = true;

and I did not have the right to left option in the editor....

I use osTicket v1.10

[ronitbs]

I think I've found a solution. Works for me !

added in redactor-osticket.js file line 329-330:
if (c.has_rtl)
options['direction']='rtl';

It doesn't add RTL direction option to the editor, however it change the text RTL in redactor! and the text work as expected with English and Hebrew (right aligned language) are both in a sentence.

[mbnoimi]

@ronitbs Thanks for sharing the solution but unfortunately it didn't work!
After modifying redactor-osticket.js I'm able to see "RTL/LTR" button in HTML toolbar but it didn't affect on the format at all as shown in the screenshot below

May you please share us a screenshot of your OST HTML toolbar

[lionscribe]

Try selecting the text, and then pressing in the RTL button in the toolbar.

On May 14, 2017 9:11 PM, "Muhammad Bashir Al-Noimi" <
[email protected]> wrote:

@ronitbs https://github.com/ronitbs Thanks for sharing the solution but
unfortunately it didn't work!
After modifying redactor-osticket.js I'm able to see "RTL/LTR" button in
HTML toolbar but it didn't affect on the format at all as shown in the
screenshot below

[image: screenshot_2017-05-15_04-08-49]
https://cloud.githubusercontent.com/assets/284547/26039524/7c957d8e-3924-11e7-9ebf-5294af352588.png

May you please share us a screenshot of your OST HTML toolbar

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/osTicket/osTicket/issues/2820#issuecomment-301353926,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE9WZBVGGEiW2-mApUEnnb134d7tLr11ks5r56ZIgaJpZM4G7Awj
.

[mbnoimi]

[lionscribe]

Really this whole thing can be avoided by editing the source and have it
set the "dir" attribute of the text area to "auto", rather than "ltr" or
"rtl".
You can try editing it in your browser, and it usually works perfectly.

On May 14, 2017 10:38 PM, "Muhammad Bashir Al-Noimi" <
[email protected]> wrote:

[image: peek 2017-05-15 05-37]
https://cloud.githubusercontent.com/assets/284547/26040764/a5ace5d4-3930-11e7-9acc-88357ad49e31.gif

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/osTicket/osTicket/issues/2820#issuecomment-301362579,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE9WZO0LqdqcGHQHx6KNGW_TnN29gfbyks5r57qQgaJpZM4G7Awj
.

[mbnoimi]

@lionscribe Editing from source isn't a good approach because most the users aren't HTML gurus. Even if I modify it manual OsT remove dir="rtl" automatically for unknown reason!

[ronitbs]

@mbnoimi Unfortunately I can't send screenshot because osTicket sits on another network, however adding that code did not add a button to the editor, but it change the text direction to RTL (+right align) automatically when you select the 'Hebrew' language (right aligned language).
also work as expected when English and Hebrow are both in a sentence.

*Again what I did:
Uncomment line 329: if (c.has_rtl)
Line 330: // options['plugins'.push('textdirection')]; should be comment.
Instead, insert: options['direction']='rtl';

[mbnoimi]

@ronitbs unfortunately it didn't fix it. Any way I created a gist includes the modified redactor-osticket.js
https://gist.github.com/mbnoimi/24fdec6333434169335da30d63d072cb#file-redactor-osticket-js

[lionscribe]

Terrible fix!!! You seem to not understand the code!
//options['plugins'].push('textdirection');
is meant to add the toolbar buttons.
If you really want to do this, you should have only commented out Line #332 if (el.find('rtl').length)
That line sets direction to rtl only if rtl language is installed. You can bypas the check by commenting it out, and always have language as rtl.

[lionscribe]

I figured out a very simple fix!!!
There are 2 ways:

• Either Edit the following file: _osticket/js/redactor.min.js_, and carefully replace the one time where it says ltr with auto
• Or, edit the file: _osticket/js/redactor-osticket.js_ , and add the line 'direction': 'auto', after the line 'minHeight': selectedSize, (about line #231)

If you insist only on rtl, you should use rtl instead of auto

Now VERY important, clear the cache on your browser! Otherwise it will be using the old cached version!!!

Now when you start editing, your modern browser will correctly detect the Text Direction.

[mbnoimi]

@lionscribe

Or, edit the file: osticket/js/redactor-osticket.js , and add the line 'direction': 'auto', after the line 'minHeight': selectedSize, (about line #231)

It seems works. I'm still testing it but any way thank you very much

[mbnoimi]

It works fine... I tested it in many way.

Thank you guys for help and I wish to add this fix in the coming versions osT

[elekgeek]

I noticed that the solution by @lionscribe is neat, but in the email the RTL language is shown as LTR, hence even if you use the solution by @lionscribe, still the solution by @ronitbs is a complete must, because even if the editor automatically goes to the right, you still have to use the RTL button. Below snapshot uses both mods:

[JediKev]

@elekgeek

None of these changes are necessary in the latest release of v1.14.2. All you have to do is install a Language Pack that accepts RTL (like Arabic), click the button in the editor to switch to RTL, type out a response, and send the response. After sending the response, it will remain RTL in the Ticket Thread and in the Email Alerts that go out.

Cheers.

[lionscribe]

Thanks @elekgeek
Just upgraded, and installed language pack, and yippee!

[elekgeek]

@JediKev still we need the mod by @lionscribe which allows the convenience of RTL while typing arabic and alike languages. I understand that the RTL button now shows up once I installed arabic language, still the 'direction': 'auto', is a good thing to have in place.

[JediKev]

@elekgeek

I see what you are trying to say now. You want the button to appear all the time regardless of having a Lang Pack installed. We will discuss this internally and get back to you.

Cheers.

[elekgeek]

@JediKev What I really want is not to have to use the RTL button for the arabic language to appear correctly in the email as well. I wish this is handled same way as in office and outlook. I also wish to be able to use shift+ctrl to change direction instead of the RTL button. Also as long as 'direction': 'auto', is possible, why not also call RTL button automatically so that RTL direction is correct also in the email. I mean, if the editor is able to detect that this is arabic language and display it correctly in the editor, why not just also enable the RTL display in the received email as well.