Html 单击即可编辑

我在这里创建了这个页面

---

我想让它以这样一种方式进行编辑，我希望在每个标题前面，每个段落和图像前面分别有铅笔图标，一旦我点击编辑图标，文本就会出现在文本框字段中。我该怎么做？最好的解决方案是什么。我只是需要一点帮助，使铅笔图标点击文本框字段的文本。我应该使用css的任何内置属性吗？或者我应该使用任何包装

许多所见即所得编辑器使用名为“可编辑”的HTML属性将div转换为可编辑对象

---

这就是说，您想要实现的是一个homoungus任务，您最好使用一些js框架来创建文本编辑器，tinyMCE是行业标准。

如果我正确理解您的意图，您只想通过一个可编辑标签的快速幻觉来做这样的事情吗

。特殊编辑{
位置：相对位置；
}
.特殊编辑输入{
字体系列：“FontAwesome”；
字号：2rem；
填充：5雷姆0.5雷姆2.5雷姆；
宽度：100%；
边界：无；
边框底部：透明3px实心；
大纲：0；
过渡：35秒轻松；
}
.特殊编辑输入：悬停，.特殊编辑输入：焦点{
背景色：#f1f1；
边框底部：ddd 3px点着；
}
.特别编辑：之后{
字体系列：“FontAwesome”；
内容：'\f044'；
位置：绝对位置；
顶部：1rem；
左：5雷姆；
颜色：灰色；
字体大小：1.5rem；
}
身体{
保证金：3雷姆5雷姆；
}

一项“艰巨的任务”？等一下，在我去吃午饭之前，我会做一个密码笔，朋友；）@克里斯。那太棒了，伙计，让它们可编辑是一项五分钟的任务。使用节点和角度输入数据库可能需要半个小时。。。但是，像tiny这样坚实的解决方案是巨大的，不是吗？你是对的@ChristianPastorCruz将它们放回数据库有点棘手，因为我将不得不再次将编辑后的数据绑定到不同的属性，并将它们发送到服务，然后再将其发送到数据库。不用担心，一旦你有了输入，将它们连接到模型，打包成一个对象，属性更改时将其抛出到和终结点。我想他只是想要UI部分，而不是整个解决方案，你是对的，这当然需要一些额外的努力。干杯真漂亮，兄弟！