可编辑的 DIV HTML CSS答案

【问题标题】：Editable DIV HTML CSS可编辑的 DIV HTML CSS
【发布时间】：2018-03-06 00:46:46
【问题描述】：

我需要一个应该是的 div 1. 可调整大小和 2. 可编辑。

并且应该可以在 IE 和 Chrome 中运行。

因此，如果我开始在 div 中进行编辑，并且如果我到达该 div 中的行尾，那么光标应该移动到下一行。我如何实现它。

以下是我尝试过的代码，但它确实在 IE 中工作但不能正常工作。但是它不适用于chrome。任何帮助，将不胜感激。谢谢！

$("#resizable").resizable();

#resizable {
  width: 500px;
  height: 500px;
  background: #ccc;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body contenteditable="false">


  <div id="resizable" contenteditable="true"></div>

【问题讨论】：

标签： jquery html css jquery-ui css-selectors

【解决方案1】：

无论出于何种原因，chrome 都会将您在框中输入的内容添加到右侧的拖动句柄。您可以使用 create 回调来禁用拖动手柄上的内容编辑，以使其在 chrome 中工作。

$("#resizable").resizable({
  create: function( event, ui ) {
    this.childNodes.forEach(function(child){
      child.contentEditable = false;
    });
  }
});

#resizable {
  width: 500px;
  height: 500px;
  background: #ccc;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body contenteditable="false">


  <div id="resizable" contenteditable="true"></div>

【讨论】：

【解决方案2】：

它必须是一个 div 元素吗？这就是 textarea 元素的用途。

<textarea rows="4" cols="50">
This is editable.
</textarea>

【讨论】：

这是可编辑的，但不能在 IE 中调整大小。但在 chrome 中可调整大小

【解决方案3】：

这似乎是一个错误，当 div 为空时，键入的文本会写入第一个“子”，即右侧可拖动栏。

正如您在 DOM 中看到的（第 2 行）：

<div id="resizable" contenteditable="true" class="ui-resizable" style="height: 121px; width: 197px;">
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;">THE TYPED TEXT GOES HERE!</div>
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
</div>

无论如何，您只需将一个空字符 (&nbsp;) 放入 div 即可。请看下面的sn-p：

$( ".resizable" ).resizable();

.resizable {
  width: 100px;
  height: 100px;
  background: #ccc;
}

.grid {
  float: left;
  margin: 0.5em;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="grid">
  Editable div:
  <div class="resizable" contenteditable="true">&nbsp;</div>
</div>
<div class="grid">
  Not editable div:
  <div class="resizable" contenteditable="true"></div>
</div>

【讨论】：

嗨 Alessandrop 感谢您的解决方案。但是它不能在 IE 中正常工作。
嗨亚历山德罗感谢您的解决方案。但是，它在 IE 中无法正常工作。这意味着考虑 am 在第二行并输入一些没有 任何空格 的文本，这些字母超出了 div 元素的宽度。并且 div 不对齐自身以调整大小或在我位于 div 的 最后一行 并且想要添加超出 DIV 元素大小的更多行的情况下不提供滚动条。这两个问题还在那里。