Question

我已经使用Quil的自定义标签功能通过如下所示的下拉框预定义了Quill编辑器：https://codepen.io/dearsina/pen/GBOpPy?editors=1010

它使用以下html：

<div class="row" style="padding:1rem;">
  <div class="col-sm-3">
<select class="custom-select ql-insertCustomTags">
        <option value="">Guest</option>
        <option value="first_name" data-marker="[first_name]" data-title="FIRST NAME" data-colour="warning">First Name</option>
        <option value="last_name" data-marker="[last_name]" data-title="LAST NAME" data-colour="warning">Last Name</option>
        <option value="full_name" data-marker="[full_name]" data-title="FULL NAME" data-colour="warning">Full Name</option>
  </select>
    <p>
<div id="editor"><html><option value="full_name" data-marker="[full_name]" data-title="FULL NAME" data-colour="warning">Full Name</option></html></div>
    </p>
  </div>
</div>

和js：

var Embed = Quill.import('blots/embed');

class TemplateMarker extends Embed {
    static create(value) {
        let node = super.create(value);

        node.setAttribute('class', 'badge badge-' + value.colour);
        //Set up the badge, and badge colour

        node.setAttribute('data-marker', value.marker);
        //The marker is the $ rel_table[id] reference

        node.setAttribute('data-title', value.title);
        //

        node.innerHTML = value.title;
        //The title is what the user sees in their editor

        return node;
    }

    static value(node) {
        return {
            marker: node.getAttribute('data-marker'),
            title: node.getAttribute('data-title'),
        };
    }
}

TemplateMarker.blotName = 'TemplateMarker';
TemplateMarker.tagName = 'span';

Quill.register({
    'formats/TemplateMarker': TemplateMarker
});

var toolbarOptions = ['bold', 'italic', 'underline', 'strike'];

var options = {
  modules: {
    toolbar: toolbarOptions
  },
  placeholder: 'This is where the magic happens...',
  theme: 'snow'
};

var quill = new Quill('#editor', options);

$('.ql-insertCustomTags').on('change', function() {
    let range = quill.getSelection(true);

    quill.insertEmbed(
        range.index,
        //Insert the TemplateMarker in the same range as the cursor is

        'TemplateMarker',
        //This is the name of the Embed

        {
            colour: $(this).find(':selected').data('colour'),
            marker: $(this).find(':selected').data('marker'),
            title: $(this).find(':selected').data('title')
        },
        //These are the variables to enter
    );

    quill.insertText(range.index + 1, ' ', Quill.sources.USER);
    //Add a space after the marker

    quill.setSelection(range.index + 2, Quill.sources.SILENT);
    //Take the cursor to the end of the inserted TemplateMarker

    $(this).val("");
    //Reset the dropdown
});

quill.on('text-change', function(delta, oldDelta, source) {
    var delta = quill.getContents();
    var delta_json = JSON.stringify(delta);
    console.log(delta_json);    
  // This is what you store in the DB so that you can edit the template later

    var qdc = new window.QuillDeltaToHtmlConverter(delta.ops, window.opts_ || {});
    // This requires the Quill Delta to HTML converter js

    // customOp is your custom blot op
    // contextOp is the block op that wraps this op, if any. 
    // If, for example, your custom blot is located inside a list item,
    // then contextOp would provide that op. 
    qdc.renderCustomWith(function(customOp, contextOp){
        if (customOp.insert.type === 'TemplateMarker') {
            let val = customOp.insert.value;
            return val.marker;
        }
    });

    var html = qdc.convert();
    //Convert the Delta JSON to HTML

    console.log(html);
    //This is what will be used to render the template
  //You also need to store this in your DB
});

效果很好。这里的问题是当编辑器加载时，我希望预加载自定义标签。我知道这与oldDelta有关，但是我无法做到这一点，因为关于此的文档对我来说还不清楚。

任何人都可以帮助我在编辑器窗口中预填充标签吗？

预先感谢

带有自定义标签的笔芯编辑器占位符

0 个答案: