Question

我已经在Page这里创建了此页面并且我想使其可编辑，这样我就希望分别在每个标题的前面以及在每个段落和图像的前面有铅笔图标，并且一旦单击编辑图标，文本就会出现在文本框字段中。我怎样才能做到这一点？什么是最好的解决方案。我只需要一点帮助，即可将铅笔图标单击上的文本输入文本框字段。如果有的话，我应该使用CSS的任何内置属性吗？还是应该使用任何包装？

Answer 1

如果我正确地理解了您的意图，那么您只是想做些类似这样的事情，以快速幻化可编辑标签？

.special-edit {
  position: relative;
}
.special-edit input {
  font-family: 'FontAwesome';
  font-size: 2rem;
  padding: .5rem 0 .5rem 2.5rem;
  width: 100%;
  border: none;
  border-bottom: transparent 3px solid;
  outline: 0;
  transition: .35s ease;
}
.special-edit input:hover, .special-edit input:focus {
  background-color: #f1f1f1;
  border-bottom: #ddd 3px dotted;
}
.special-edit:after {
  font-family: 'FontAwesome';
  content: '\f044';
  position: absolute;
  top: 1rem;
  left: .5rem;
  color: gray;
  font-size: 1.5rem;
}

body {
  margin: 3rem 5rem;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="special-edit">
  <input type="text" placeholder="Hey this needs edited" required/>
</div>

...和CODEPEN进行修改。干杯！

Answer 2

许多所见即所得的编辑器都使用HTML属性“ editable”将div转换为可编辑对象 https://www.w3schools.com/TAGS/att_global_contenteditable.asp 就是说，您想要实现的是一项艰巨的任务，最好使用一些js框架来创建文本编辑器，并且tinyMCE是行业标准。

点击可编辑

2 个答案: