contenteditable 元素中的画布

Question

.editor {
         width: 100%;
         min-height: 100%;
         height: 100%;
         background-color: black;
         color: #fff;
        }
 canvas {
            background-color: green;
        }

<div class="editor" contenteditable><canvas></canvas></div>

我怎样才能将画布添加到 contenteditable div

我有这个代码

<style>
.editor {
         width: 100%;
         min-height: 100%;
         height: 100%;
         background-color: black;
         color: #fff;
        }
 canvas {
            background-color: green;
        }
</style>


<div class="editor" contenteditable><canvas></canvas></div>

出于某种原因，我无法在 contenteditable div 中写入任何内容，甚至插入符号也不知何故消失了。我做错了什么？一个帮助将不胜感激。

Answer 1

使用一点 Javascript，您可以通过添加空格然后强制将插入符号放置在内容的末尾来欺骗它

document.querySelector('.editor').onclick=e=>{
  if( e.target==e.currentTarget ){
    const setcaret=(n)=>{
      let oSel=window.getSelection();
          oSel.selectAllChildren( n );
          oSel.collapseToEnd();
    }
    
    e.target.innerHTML += ' ';
    setcaret( e.target );
  }
};

.editor {
  width: 100%;
  min-height: 100%;
  height: 100%;
  background-color: black;
  color: #fff;
  padding:1rem;
}

canvas {
  background-color: green;
  width:100px;height:100px;margin:1rem;
}

<div class="editor" contenteditable>
  <canvas></canvas>
</div>

Answer 2

.editor {
         width: 100%;
         min-height: 100%;
         height: 100%;
         background-color: black;
         color: #fff;
         position:relative;
        }
canvas {
            background-color: green;     color: #fff;
        }

<div class="editor" contenteditable>
  <canvas></canvas>
&nbsp;
<p>Hi</p>
</div>

contenteditable 说的是div的内容是可编辑的，而不是div本身，所以在div中使用一个p作为你的文本框或放置一个占位符，否则你将要编辑的内容是画布。正如其他答案指出的那样，这是一个 Chrome 错误，如果你想模拟其他浏览器的行为，你可以像这样在 div 中添加一个空格，否则 p 解决方案仍然有效。