Question

我想使用contentEditable属性创建一个仅限图像的“编辑器”，允许用户创建表示文本字符的图像。

我遇到的一个问题是如何在下一行显示插入符号以开始新的图像行。在内容的末尾放置一个break标记不会将插入符号移动到下一行。

我希望用户点击第3行开始新的图像行 - 但插入符号仅显示在第2行的末尾 - 即使我在结尾处有一个中断标记。有没有人有建议？我没有想法！谢谢！

这是一个代表问题的插件：https://plnkr.co/edit/c2OEwaKOtkgpOzJerAzT?p=preview

      <p contenteditable="true" style='text-align:center;'>
        <span>
            <img class='dspItem' style='background-color:red'>
            <img class='dspItem' style='background-color:green'>
        </span>
        <br>
        <span>
            <img class='dspItem' style='background-color:blue'>
            <img class='dspItem' style='background-color:purple'>
        </span>
        <br>
      </p>

CSS：

.dspItem {
  display: inline;
  float: none;
  margin-bottom: 2px;
  width: 25px;
  height: 30px;
}
p {
    height: 200px;
    padding: 0;
   border: thin solid #ff0000;
}

Answer 1

我在return块的底部添加了<script>函数。此函数将在插入符号前面包裹div，并将一个div包裹在插入符号后面的内容中。在article找到它。提供了 PLUNKER 中的2个相同的演示，另一个是片段。

段

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    fieldset {
      margin: 20px auto;
    }
    input {
      width: 5ex;
      text-align: center;
      padding: 1px 3px;
    }
  </style>
</head>

<body>

  <div id="editor1" contenteditable="true">
    <br/>123456789abcdefghijklmnopqrstuvwxyz
    <br/>12 45678 abcd fg ijk mnopqrst vwxyz
    <br/>123 5 789a cde ghijklm o qrst v xyz
    <br/>12345 789abcd fg ijklmnopq s u wxyz
    <br/>123 567 9abc efg ijklm op rst vwxy
    <br/>1 34 6789a cdef hij lm opq stuvwxyz
    <br/>1 3456 89a cd fghij l no qrst vwx z
    <br/>12 4 6789 bcd fgh j lmno q stuv xy
  </div>
  <fieldset>

    <input type="button" class="fontStyle" onclick="document.execCommand('italic',false,null);" value="I" title="Italicize Highlighted Text">
    <input type="button" class="fontStyle" onclick="document.execCommand('bold',false,null);" value="B" title="Bold Highlighted Text">
    <input id="row" name="row" placeholder="Row#" />
    <input id="col" name="col" placeholder="Col#" />
    <button id="btn">Focus</button>
  </fieldset>
  <p>Each row has a number of non-repeated string of alphanumeric characters:</p>
  <pre><code>123456789abcdefghijklmnopqrstuvwxyz</code></pre>
  <p>Maximum of 35 characters. Every row except the first row has some missing characters and in their place is a whitespace.
  </p>
  <script>
    function setCaret(x, y) {
      var ele = document.getElementById("editor1");
      var rng = document.createRange();
      var sel = window.getSelection();
      var row = parseInt(x, 10) * 2;
      var col = parseInt(y, 10);
      rng.setStart(ele.childNodes[row], col);
      rng.collapse(true);
      sel.removeAllRanges();
      sel.addRange(rng);
      ele.focus();
    }


    var btn = document.getElementById('btn');

    btn.addEventListener('click', function(event) {
      var rowSet = document.getElementById('row').value;
      var colSet = document.getElementById('col').value;
      setCaret(rowSet, colSet);
    }, true);
/* onReturn ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    var onReturn = function(e) {

      if (window.getSelection) {
        e.stopPropagation();

        var selection = window.getSelection(),
          range = selection.getRangeAt(0),
          br = document.createElement('br');
        range.deleteContents();
        range.insertNode(br);
        range.setStartAfter(br);
        range.setEndAfter(br);
        range.collapse(false);
        selection.removeAllRanges();
        selection.addRange(range);

        return false;
      }
      return true;
    }
  </script>
</body>

</html>

＆＃13;

如何将插入符强制到contentEditble区域的下一行

1 个答案:

段