javascript - 如何将文本区域中的某些文本对齐为右对齐？

Question

我在数据库中保存了一些文本(其中也包含一些阿拉伯语)。我正在获取数据并将它们显示在文本区域中。

我希望英文文本左对齐，阿拉伯文本右对齐。

为此，我将整个文本分成段落，并检测哪些段落应该右对齐，哪些段落应该左对齐。

这是代码。

/*------ Allign text ------*/
function align_text($text)
{
    $string = $text;
    $returnString = '';
    $paraArray = explode("\n", $string);
    if(count($paraArray) > 0)
    {
        foreach($paraArray as $pa)
        {
            $isRight = $this->is_rtl($pa);
            if($isRight)
            {
                $para['para'] = $pa;
                $para['align'] = 'R';
            }
            else
            {
                $para['para'] = $pa;
                $para['align'] = 'L';
            }
            $paraArr[] = $para;
        }
    }
    else
    {

    }
    return $paraArr;
}

function is_rtl($string) 
{
    $rtl_chars_pattern = '/[\x{0590}-\x{05ff}\x{0600}-\x{06ff}]/u';
    return preg_match($rtl_chars_pattern, $string);
}

因此，如您所见，使用div在网页(html)中显示时，每个段落都可以按右对齐和左对齐排列。

<?php
foreach($paraArr as $row)
{
   if($row['align'] == 'L')
   {?>
    <div class="left-align"><?php echo $row['para'];?></div>
   <?php
   }
   else
   {?>
   <div class="left-align"><?php echo $row['para'];?></div>
  <?php }
}?>

但我的主要问题是，如何在 SAME textarea 中将阿拉伯语段落对齐为右对齐？。

Answer 1

您不能在一个文本区域中执行此操作(同时显示左对齐和右对齐文本)。相反，您可以将它们显示为 div 并使用 contentEditable 使它们可编辑。每个 div 可能有自己的对齐方式(左对齐或右对齐)。

例如，您可以声明一个包含每个段落的子 div 的父 div:

<div>
      <div contenteditable="true">
             Paragraph one
      </div>

      <div contenteditable="true">
             Paragraph 2
      </div>
</div>

每个 div 的样式都可以独立地设置为从左到右或从右到左。只要用户点击它，它就会变得可编辑。

您也可以使用一些第三方 HTML 编辑器来代替文本区域。这里有一些例子(用谷歌搜索):TinyMCE、Scribe、jHTMLArea、CKEditor、Nicedit……