Quills JS：提取格式化文本，将其保存在服务器上，加载并识别特定部分

Question

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

<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);

现在我想制作一个提要，列出所有带有标题和内容示例的消息/新闻通讯。不幸的是，Quill JS 在编辑器中删除/不使用 HTML 的任何 id，因此很难识别标题和内容区域。我能看到的唯一解决方案是在标题和内容前后添加一些不可见的文本，这些文本将在 HTML 中可见，但我知道这永远不会被批准用于真实系统。我知道我在 HTML 和 CSS 周围的方式很好，但是当谈到 PHP 和 JS 时，我不太舒服。可能有一个我不知道的很酷的工具/解决方案，我很乐意收到任何关于更合适解决方案的见解。

编辑：我可以看到即使是增量格式，也没有任何标识符。

编辑：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
}
});

此致马丁·佩德森

Answer 1

为了使 Quill keep/add 成为某个元素的 class，您必须通过 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);

当您使用标题印迹时，这将 add/remove 用于 h1 class headline-class。如果你想对标题元素有更多的控制，你可以这样做：

  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":"\n\ncontent"},{"attributes":{"content":true},"insert":"\n"}]}')

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

此外，我创建了一个 jsFiddle，希望对您有所帮助：

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

Quills JS：提取格式化文本，将其保存在服务器上，加载并识别特定部分

Quills JS: extracting formatted text, saving it on server, loading it and identifying specific parts

javascript

php

html

css

quill