Question

我想实现一个区域来实现3个基本任务：

人们可以手动编辑文本;
我们可以构建一个（JavaScript）函数来放置文本并将其显示在几行中，并带有可能的空格;
我们可以构建一个（JavaScript）函数来为给定位置+颜色的文本的一部分着色。因此，我们可能会看到不同颜色的文本的不同部分。

我已经检查了一些现有问题，似乎textarea无法为文本的一部分着色，这很可惜。

有人建议使用<div contentEditable>。然后我实现了这个JSBin。

所以我的第一个麻烦是如何构建函数以将文本放在几行中。与textarea不同，$('#ce span').text("line1 \n line2\n line3")会忽略\n和空格，并仍然将它们显示在一行中。

有人可以帮忙吗？

此外，是否有人知道任何其他解决方案（不是太复杂并且实现上述3个基本任务，例如JQuery}而不是<div contentEditable>？

Answer 1

如果您希望文本显示在单独的行上，您可以使用

    $('#ce').html("<span>line1<br>line2<br>line3");

代替。 html将在每次运行时创建整个内容，您可以在其中使用标记。

为每个可能有效的连续行添加4个空格

    <script>
        $('#ce').html("<span>line1</span><br><span>line2</span><br><span>line3</span>");
        var spaces = '&nbsp;'.repeat(4),
            i = 2,
            spans = $('#ce').find('span').length;
        for (i; i <= spans; i++) {
          $('#ce').find('span:nth-of-type(' + i + ')').prepend(spaces.repeat(i - 1));
        }
    </script>

在每次中断后插入空格的另一个选项，因此您不需要额外的跨度：

    <script>
        $('#ce').html("<span>line1<br>line2<br>line3</span>");
        var spaces = '&nbsp;'.repeat(4),
            i = 1,
            breaks = $('#ce').find('br').length;
        for (i; i <= breaks; i++) {
          $('<span>' + spaces.repeat(i) + '</span>').insertAfter($('#ce').find('br:nth-of-type(' + (i) + ')'))
        }
    </script>

Answer 2

您必须从输入文本更改为输入html到可编辑的div。然后，您可以为每行周围的每个跨度提供一个类。最后，运行each() JQuery语句来增加每行的左边距：

$('#ce span').html("<span class='indented'>line1</span><br><span class='indented'>line2</span><br><span class='indented'>line3</span>");
    var indented = 0;
    $('.indented').each(function(index){
      $(this).css('marginLeft',indented);
      indented += 25;
    })

如果你想继续每一行的边距，它会更复杂。您必须为用户点击＆＃34; Enter＆＃34;创建一个事件监听器。或者去下一行。

这是一个JSFiddle：https://jsfiddle.net/0om2ce5e/

更多功能

如果您想要更多功能，可以在每一行上追加越来越多的空格。当用户进入下一行时，您必须添加一个事件监听器：

$('#ce span').html("<span class='indented'>line1</span><br><span class='indented'>line2</span><br><span class='indented'>line3</span>");
    var indented = 0;
    $('.indented').each(function(index){
      spaces = "";
      for(var i = 0; i < index; i++){
        spaces += "&nbsp&nbsp&nbsp";
      }
      var origin = $(this).html();
      var newVal = spaces+origin;
      $(this).html(newVal);
    })

这是小提琴：https://jsfiddle.net/0om2ce5e/2/

用于将div中的文本放在多行中的函数

2 个答案: