Question

我无法将内容设置为contentEditable import numpy as np import matplotlib.pyplot as plt # Sample study area array example_array = np.array([[0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0], [0, 0, 2, 0, 2, 2, 0, 6, 0, 3, 3, 3], [0, 0, 0, 0, 2, 2, 0, 0, 0, 3, 3, 3], [0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 3, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3], [1, 1, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3], [1, 1, 1, 0, 0, 0, 3, 3, 3, 0, 0, 3], [1, 1, 1, 0, 0, 0, 3, 3, 3, 0, 0, 0], [1, 1, 1, 0, 0, 0, 3, 3, 3, 0, 0, 0], [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 1, 0, 0, 0, 0, 5, 5, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4]]) # Plot array plt.imshow(example_array, cmap="spectral", interpolation='nearest')中的第一个<p>。

我见过this solution，但是在元素之前或之后。如何将其纳入元素？

这是我到目前为止所做的：

＆＃13;

<div>

＆＃13;

$('#content').on('click', function(){

  if($('#placeholder').length > 0)
    $('#placeholder').removeAttr('id').text('').focus();

});

＆＃13;

#content{
    border: 1px solid black;
    min-height: 100px;
    padding: 20px;
}

#placeholder{
    color: red;
}

＆＃13;

它清除占位符并且根本没有设置插入符号。

我该如何解决这个问题？

Answer 1

您遇到的问题是，p元素没有内容，0px height也是如此。观看控制台时，您可以看到contenteditable经常在点击它时添加<br>，您可以在此处执行相同操作，并且您将拥有您的插入符号。

＆＃13;

$('#content').on('click', function(){

  if($('#placeholder').length > 0)
    $('#placeholder').removeAttr('id').html('<br>').focus();

});

＆＃13;

#content{
    border: 1px solid black;
    min-height: 100px;
    padding: 20px;
}

#placeholder{
    color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='content' contentEditable=true>
  <p id='placeholder'>placeholder</p>
</div>

＆＃13;

Answer 2

在您进一步阅读之前，请致电Range (MDN)和getSelection (MDN)。

这是一个有用的 fiddle。

小提琴内部的代码非常自我解释，但我发现有趣的是：让我们说我们有

<p id='paragraph'>I want to focus on this text</p>

然后我们（如预期的那样）：

var p = $('#paragraph');
range.selectNode(p[0]);

这实际上是在<p>之前插入插入符号（粗略地说），但我们需要进入<p>。

<强>令人惊奇...

var p = $('#paragraph');
var textInsideP = p.childNodes[0]; // the text inside p counts as a ChildNode
range.selectNode(textInsideP);

动臂。

contentEditable在特定元素中设置插入符号

2 个答案: