QuillsJS:提取格式化文本，保存在服务器上，加载并识别特定部分

Question

对于一个项目，我正在尝试制作一个在网站上运行的消息/时事通讯系统。我使用QuillJS作为RTE，每当打开编辑器时，它都会加载模板。发送消息后，它会将消息的html副本保存到带有ID的服务器在提交时将编辑器的内容保存在表单中

<input type="hidden" name="doctext" id="doctext" value='<?php echo $doctext; ?>'>

将内容写入文件(PHP(

$doctext = trim($_POST["doctext"]);
$myfile = fopen("$postid.html", "w") or die("Unable to open file!");
$txt = $doctext;
fwrite($myfile, $txt);

现在，我想制作一个提要，列出所有带有标题和内容示例的消息/时事通讯。不幸的是，QuillJS在编辑器中删除/不使用任何HTML ID，因此很难识别标题和内容区域。我能看到的唯一解决方案是在标题和内容前后添加一些不可见的文本，这些文本在HTML中是可见的，但我知道这在真正的系统中永远不会得到批准。我对HTML和CSS很熟悉，但当涉及到PHP和JS时，我就不那么舒服了。可能有一个很酷的工具/解决方案我不知道，我很乐意收到任何关于更合适解决方案的见解。

编辑：我可以看到，即使在delta(s(格式中，也没有任何标识符。

编辑：JS QUILL代码：

var Size = Quill.import('attributors/style/size');
Size.whitelist = ['0px', '12px','16px','20px','24px', '28px', '32px',
'36px'];
Quill.register(Size, true);
const Block = Quill.import('blots/block');
class Overskrift extends Block {}
Overskrift.blotName = 'overskrift';
Overskrift.tagName = 'p';
Overskrift.className = 'overskrift-class';
Quill.register(Overskrift, true);
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['image'],
[{ 'size': ['12px', '16px', '20px', '24px', '28px', '32px', '36px'] }],
[{ 'align': ''}, {'align': 'center'}, {'align': 'right'}],
];
var Delta = Quill.import('delta');

var quill = new Quill("#texteditor", {
theme: 'snow',
modules: {
toolbar: toolbarOptions
}
});

致以最良好的问候Martin Pedersen

Answer 1

为了让Quill为元素保留/添加某个类，您必须通过Quill手动配置它，而不是自己添加它们。

您可以通过以下方式实现：

const Block = Quill.import('blots/block');
class HeadLine extends Block {}
HeadLine.blotName = 'headline';
HeadLine.tagName = 'h1';
HeadLine.className = 'headline-class';
Quill.register(HeadLine, true);

当您使用headline-blot时，这将为h1类添加/删除headlineclass。如果你想对标题元素有更多的控制权，你可以这样做：

class HeadLine extends Block {
static create(value) {
const node = super.create(value);
node.classList.add('headline-class');
return node;
}
}

要设置编辑器的内容，您可以执行以下操作：

quill.setContents('{"ops":[{"insert":"Headline"},{"attributes":{"headline":true},"insert":"n"},{"insert":"nncontent"},{"attributes":{"content":true},"insert":"n"}]}')

现在，您可以完全控制节点本身。

此外，我创建了一个jsFiddle，希望它能帮助你：

https://jsfiddle.net/hassansalem/c5nvgfq1/6/