John Davidson

Message:

For a project I am trying to make a message / newsletter system to function on a website.
I am using Quill JS as my RTE that loads a template whenever the editor is opened.
Upon sending the message it saves an html copy of the message to the server with an ID
Saving the content of editor in a form on submit

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

Writing the content to file (PHP)

$doctext = trim($_POST["doctext"]);

$myfile = fopen("$postid.html", "w") or die("Unable to open file!");

$txt = $doctext;

fwrite($myfile, $txt);

Now I want to make a feed that lists all of the messages / newsletters with the headline and a sample of the content. Unfortunately Quill JS removes / doesn't use any ids for the HTML in the editor and it is therefore hard to identify the headline and content area.
The only solution that I can see is to put in some invisible text before and after the headline and content, that will be visible in the HTML, but I know that this would never be approved for a real system.
I know my way around HTML and CSS fine, but when it comes to PHP and JS I am not that comfortable.
There is probably a cool tool / solution out there that I don't know about and I would be happy to receive any insight to a more proper solution.

Edit: I can see that even in the delta(s) format, there aren't any identifiers.

Edit: JS QUILL code:

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

}

});

Best regards
Martin Pedersen

---

My Answer:
One possible solution to identify specific parts of the content in Quill JS is to use custom formats or classes for different elements. For example, you can define a custom format for the headline and content area in Quill JS and then use that format to identify and extract the specific parts of the content.

Here is an example of how you can define custom formats for the headline and content area in Quill JS:

javascript
var Inline = Quill.import('blots/inline');

class HeadlineBlot extends Inline {
static create(value) {
let node = super.create();
node.setAttribute('data-headline', value);
return node;
}

static formats(node) {
return node.getAttribute('data-headline');
}
}
HeadlineBlot.blotName = 'headline';
HeadlineBlot.tagName = 'span';
Quill.register(HeadlineBlot);

class ContentBlot extends Inline {
static create(value) {
let node = super.create();
node.setAttribute('data-content', value);
return node;
}

static formats(node) {
return node.getAttribute('data-content');
}
}
ContentBlot.blotName = 'content';
ContentBlot.tagName = 'span';
Quill.register(ContentBlot);


You can then apply these custom formats to the headline and content areas in the Quill editor:

javascript
// Set headline format
quill.format('headline', 'true');

// Set content format
quill.format('content', 'true');


When saving the content to the server, you can check for these custom formats and extract the headline and content accordingly:

javascript
var delta = quill.getContents();
delta.ops.forEach(function(op) {
if (op.attributes && op.attributes.headline) {
// Extract headline
var headline = op.insert;
console.log('Headline: ' + headline);
} else if (op.attributes && op.attributes.content) {
// Extract content
var content = op.insert;
console.log('Content: ' + content);
}
});


This way, you can easily identify and extract the headline and content areas from the Quill editor content. This approach is more robust and maintainable compared to adding invisible text markers in the content.