0
Hallo ersten Beitrag habe ich hier Ursache haben keine Antworten in Stackoverflow ..Pinole js einbetten + ops
ich einbetten für Variablen erstellt werden soll. (fertig) Ich initiiere ein Modul, das Knopf erstellt, der Variablen einfügen wird (fertig) ich sende es an die Rückseite und nach dem Zurück senden mir Ops aus dem alten Text mit Variablen Ich möchte es im Editor einfügen. Bekam aber nicht definiert, wenn ich den Einbettungs erstellen neu ** und Reproduzieren **
Klick auf eine Schaltfläche prenom oder kühle Klick auf den Button Zeigen Sie mir es löschen und versuchen, die ops Tabelle wieder in Editor erstellen
\t console.log(Quill.version);
\t window.document.querySelector('.show')
\t .addEventListener('click', function(){
\t \t var ops = quill.getContents().ops;
\t \t var _quill = quill;
\t \t setTimeout(function(){
\t \t \t _quill.deleteText(0, 10);
\t \t }, 3000);
\t \t setTimeout(function(){
\t \t \t _quill.setContents(ops);
\t \t }, 4000);
\t });
var Variables = function(quill, options){
\t \t this.quill = quill;
\t \t this.options = options;
\t \t var _this = this;
\t }
\t Variables.prototype.initInsertVariable = function(variables, lang, container){
\t \t var _this = this;
\t \t variables.variables.forEach(function(elem){
\t \t var btn = document.createElement("BUTTON");
\t \t var delim1 = document.createElement('span');
\t \t delim1.classList.add('delimiter');
\t \t delim1.appendChild(document.createTextNode('>'));
\t \t var delim2 = document.createElement('span');
\t \t delim2.appendChild(document.createTextNode('<'));
\t \t delim2.classList.add('delimiter');
\t \t btn.appendChild(delim2);
\t \t var printedMe = elem.printed[lang].replace(/</g,'').replace(/>/g,'');
\t \t var text = document.createTextNode(printedMe);
\t \t btn.appendChild(text);
\t \t btn.appendChild(delim1);
\t \t btn.classList.add('tool-button');
\t \t btn.classList.add('variables');
\t \t btn.addEventListener('click', function(){
\t \t _this.quill.insertEmbed(0, 'variable', {
\t \t \t value: printedMe,
\t \t \t key: elem.key
\t \t });
\t \t // _this.quill.setSelection(_this.indexStory + 1);
\t \t // _this.quill.focus();
\t \t });
\t \t container.appendChild(btn);
\t \t });
\t };
\t Quill.register('modules/variables', Variables);
\t var Embed = Quill.import('blots/embed');
\t class variable extends Embed {
\t \t static create(value) {
\t \t let node = super.create();
\t \t node.setAttribute('keyValue', value.key);
\t \t node.innerHTML = value.value;
\t \t // Sanitize url value if desired
\t \t // node.setAttribute('href', value);
\t \t // Okay to set other non-format related attributes
\t \t // These are invisible to Parchment so must be static
\t \t // node.setAttribute('target', '_blank');
\t \t return node;
\t \t }
\t \t static formats(node) {
\t \t \t return node.getAttribute('keyValue');
\t \t \t // We will only be called with a node already
\t \t \t // determined to be a Link blot, so we do
\t \t \t // not need to check ourselves
\t \t \t // return node.getAttribute('href');
\t \t }
\t };
\t variable.blotName = 'variable';
\t variable.tagName = 'variable';
\t Quill.register({
\t \t 'formats/variable': variable
\t });
\t var Delta = Quill.import('delta');
\t var quill = new Quill('#editor', {
\t \t // debug: 'info',
\t \t modules: {
\t \t \t variables: true,
\t \t \t history: {
\t \t \t delay: 2000,
\t \t \t maxStack: 500,
\t \t \t userOnly: true
\t \t \t },
\t \t \t toolbar: '#toolbar'
\t \t },
\t \t theme: 'snow',
\t });
var variables = quill.getModule('variables');
\t // vars mock from back
\t var Vars = {
\t \t variables : [{
\t \t \t key: '*|FNAME|*',
\t \t \t printed: {
\t \t \t \t 'fr': '<Prenom>'
\t \t \t }
\t \t },
\t \t {
\t \t \t key: '*|COOL|*',
\t \t \t printed: {
\t \t \t \t 'fr': '<Cool>'
\t \t \t }
\t \t }]
\t };
\t variables.initInsertVariable(Vars, 'fr', window.document.querySelector('#variables'));
\t quill.clipboard.addMatcher('.editor-variables', function(node, delta) {
\t \t return delta.compose(new Delta().retain(delta.length(), {
\t \t \t bold: true,
\t \t \t backgroundColor: '#ff0000'
\t \t }));
\t });.editor{
\t width: 400px;
\t height: 400px;
\t background-color: grey;
}<link href="//cdn.quilljs.com/1.3.1/quill.snow.css" rel="stylesheet"/>
<script src="//cdn.quilljs.com/1.3.1/quill.js"></script>
<body>
\t <div id="variables"></div>
\t <div id="toolbar">
\t <button class="ql-bold"></button>
\t <button class="ql-italic"></button>
\t <button class="ql-underline"></button>
\t <button class="ql-list" value="bullet"></button>
\t <button class="ql-list" value="ordered"></button>
\t <button class="ql-indent" value="-1"></button>
\t <button class="ql-indent" value="+1"></button>
\t <button class="ql-link" ></button>
\t </div>
\t <div id="editor">
\t </div>
\t <button type="button" class="show">show me</button>
</body>Erwartetes Verhalten:
, wenn ich wieder die ops mit einbetten einzufügen. Es sollte zeigen, mir die gleiche
tatsächliche Verhalten:
zeigen mir undefined
Plattformen:
einschließen Browser, Betriebssystem und entsprechende Versionen
Version:
1.3. 1
ich schreibe dir zwei answears danke für deine zeit –