如何编辑内联的html类？

Question

假设你有像这样的HTML，

<span class="full-sentence">
<span class="subject">She</span><span class="verb">loves</span><span class="object">him</span>
.</span>

用户看到的是，

She loves him.

使用wysiwyg HTML内联编辑器，您可以更改“她爱他”。串起别的东西，比如“他喜欢她的外套”。例如，但是如果没有在某种程度上显示源代码，你就无法在wysiwyg编辑器中将span类“名词”添加到word外壳中。

我正在尝试找到一种方法来做到这一点，首先显示span类文本，例如“动词”，在输出中显示“动词”字符串，并允许它内联更改，以及让它在class =“”

的括号内转换源代码内的字符串

我正在尝试完成此操作而不显示任何不相关的内容，例如<span class=""></span>个字符。所有用户真正需要使用的是""标记内的点，文本本身，并且能够通过突出显示字符串并按某种包含突出显示的字符串的按钮来添加新的span类边界在<span class=""></span>中，然后允许您编写类来填充""。

理想情况下，它看起来像这样，没有文本字符串之间的尴尬间距，就像在libreoffice编写表中一样，这是一张图片，

！[在此输入图片说明] [2]

Answer 1

默认ckeditor显示底部栏中的父元素，并允许右键单击以编辑所选元素的属性。您可以使用条形图或鼠标悬停来编辑和显示单词类型，当人们粘贴html并加入两个单词等时，您还需要一些清理代码。 从技术角度来看，一旦你明确了想要制作自己的自定义WYSIWYG的界面，它就相对微不足道了。

<div contenteditable="true">
    Editable text...
</div>