文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >quill js embed + ops

问quill js embed + ops
EN

Stack Overflow用户
提问于 2017-08-30 20:41:12
回答 1查看 909关注 0票数 0

您好，首先我在这里发布的原因在堆栈溢出中没有响应..

我想为变量创建嵌入。(完成)我初始化了一个模块，创建按钮将插入变量(完成)，我将它发送到后台，返回后发送给我从旧文本返回操作，我想在编辑器中重新插入变量。但是当我想要重新创建嵌入的**复制**时，我得到了未定义

单击一个按钮prenom或Cool单击按钮show me它将被擦除，并尝试在编辑器中重新创建操作表

​

代码语言：javascript
复制
	console.log(Quill.version);
	window.document.querySelector('.show')
  	.addEventListener('click', function(){
		var ops = quill.getContents().ops;
		var _quill = quill;
		setTimeout(function(){
			_quill.deleteText(0, 10);
		}, 3000);
		setTimeout(function(){
			_quill.setContents(ops);
		}, 4000);
	});
  
  var Variables = function(quill, options){
		this.quill = quill;
		this.options = options;
		var _this = this;
	}

	Variables.prototype.initInsertVariable = function(variables, lang, container){
		var _this = this;
		variables.variables.forEach(function(elem){
		    var btn = document.createElement("BUTTON");
		    var delim1 = document.createElement('span');
		    delim1.classList.add('delimiter');
		    delim1.appendChild(document.createTextNode('>'));
		    var delim2 = document.createElement('span');
		    delim2.appendChild(document.createTextNode('<'));
		    delim2.classList.add('delimiter');
		    btn.appendChild(delim2);
		    var printedMe = elem.printed[lang].replace(/</g,'').replace(/>/g,'');
		    var text = document.createTextNode(printedMe);
		    btn.appendChild(text);
		    btn.appendChild(delim1);
		    btn.classList.add('tool-button');
		    btn.classList.add('variables');
		    btn.addEventListener('click', function(){
		      _this.quill.insertEmbed(0, 'variable', {
		      	value: printedMe,
		      	key: elem.key
		      });
		      // _this.quill.setSelection(_this.indexStory + 1);
		      // _this.quill.focus();
		    });
		    container.appendChild(btn);
		});
	};

	Quill.register('modules/variables', Variables);


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

	class variable extends Embed {

		static create(value) {
		    let node = super.create();
		    node.setAttribute('keyValue', value.key);
		    node.innerHTML = value.value;
		    // Sanitize url value if desired
		    // node.setAttribute('href', value);
		    // Okay to set other non-format related attributes
		    // These are invisible to Parchment so must be static
		    // node.setAttribute('target', '_blank');
		    return node;
		}

		static formats(node) {
			return node.getAttribute('keyValue');
			// We will only be called with a node already
			// determined to be a Link blot, so we do
			// not need to check ourselves
			// return node.getAttribute('href');
		}
	};


	variable.blotName = 'variable';
	variable.tagName = 'variable';

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




	var Delta = Quill.import('delta');

	var quill = new Quill('#editor', {
		// debug: 'info',
		modules: {
			variables: true,
			history: {
			  delay: 2000,
			  maxStack: 500,
			  userOnly: true
			},
			toolbar: '#toolbar'
		},
		theme: 'snow',
	});

    var variables = quill.getModule('variables');

	// vars mock from back
	var Vars = {
		variables : [{
			key: '*|FNAME|*',
			printed: {
				'fr': '<Prenom>'
			}
		},
		{
			key: '*|COOL|*',
			printed: {
				'fr': '<Cool>'
			}
		}]
	};
	variables.initInsertVariable(Vars, 'fr', window.document.querySelector('#variables'));

	quill.clipboard.addMatcher('.editor-variables', function(node, delta) {
		return delta.compose(new Delta().retain(delta.length(), {
			bold: true,
			backgroundColor: '#ff0000'
		}));
	});
代码语言：javascript
复制
.editor{
	width: 400px;
	height: 400px;
	background-color: grey;
}
代码语言：javascript
复制
<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>
	<div id="variables"></div>
	<div id="toolbar">
	    <button class="ql-bold"></button>
	    <button class="ql-italic"></button>
	    <button class="ql-underline"></button>
	    <button class="ql-list" value="bullet"></button>
	    <button class="ql-list" value="ordered"></button>
	    <button class="ql-indent" value="-1"></button>
	    <button class="ql-indent" value="+1"></button>
	    <button class="ql-link" ></button>
	</div>
	<div id="editor">
	</div>

	<button type="button" class="show">show me</button>
</body>

​

预期行为：

当我使用embed重新插入操作时。它应该向我展示同样的东西

实际行为：

显示未定义

平台：

包括浏览器、操作系统和相应版本

版本：

1.3.1

quill
javascript
EN

回答 1

Stack Overflow用户

发布于 2017-08-30 20:55:33

我想你想要这样。

​

代码语言：javascript
复制
console.log(Quill.version);
	window.document.querySelector('.show')
  	.addEventListener('click', function(){
		ops = document.querySelector(".ql-editor").innerHTML;
		var _quill = quill;
		setTimeout(function(){
			_quill.deleteText(0, 10);
		}, 3000);
		setTimeout(function(){
			document.querySelector(".ql-editor").innerHTML = ops;
		}, 4000);
	});
  
  var Variables = function(quill, options){
		this.quill = quill;
		this.options = options;
		var _this = this;
	}

	Variables.prototype.initInsertVariable = function(variables, lang, container){
		var _this = this;
		variables.variables.forEach(function(elem){
		    var btn = document.createElement("BUTTON");
		    var delim1 = document.createElement('span');
		    delim1.classList.add('delimiter');
		    delim1.appendChild(document.createTextNode('>'));
		    var delim2 = document.createElement('span');
		    delim2.appendChild(document.createTextNode('<'));
		    delim2.classList.add('delimiter');
		    btn.appendChild(delim2);
		    var printedMe = elem.printed[lang].replace(/</g,'').replace(/>/g,'');
		    var text = document.createTextNode(printedMe);
		    btn.appendChild(text);
		    btn.appendChild(delim1);
		    btn.classList.add('tool-button');
		    btn.classList.add('variables');
		    btn.addEventListener('click', function(){
		      _this.quill.insertEmbed(0, 'variable', {
		      	value: printedMe,
		      	key: elem.key
		      });
		      // _this.quill.setSelection(_this.indexStory + 1);
		      // _this.quill.focus();
		    });
		    container.appendChild(btn);
		});
	};

	Quill.register('modules/variables', Variables);


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

	class variable extends Embed {

		static create(value) {
		    let node = super.create();
		    node.setAttribute('keyValue', value.key);
		    node.innerHTML = value.value;
		    // Sanitize url value if desired
		    // node.setAttribute('href', value);
		    // Okay to set other non-format related attributes
		    // These are invisible to Parchment so must be static
		    // node.setAttribute('target', '_blank');
		    return node;
		}

		static formats(node) {
			return node.getAttribute('keyValue');
			// We will only be called with a node already
			// determined to be a Link blot, so we do
			// not need to check ourselves
			// return node.getAttribute('href');
		}
	};


	variable.blotName = 'variable';
	variable.tagName = 'variable';

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




	var Delta = Quill.import('delta');

	var quill = new Quill('#editor', {
		// debug: 'info',
		modules: {
			variables: true,
			history: {
			  delay: 2000,
			  maxStack: 500,
			  userOnly: true
			},
			toolbar: '#toolbar'
		},
		theme: 'snow',
	});

    var variables = quill.getModule('variables');

	// vars mock from back
	var Vars = {
		variables : [{
			key: '*|FNAME|*',
			printed: {
				'fr': '<Prenom>'
			}
		},
		{
			key: '*|COOL|*',
			printed: {
				'fr': '<Cool>'
			}
		}]
	};
	variables.initInsertVariable(Vars, 'fr', window.document.querySelector('#variables'));

	quill.clipboard.addMatcher('.editor-variables', function(node, delta) {
		return delta.compose(new Delta().retain(delta.length(), {
			bold: true,
			backgroundColor: '#ff0000'
		}));
	});
代码语言：javascript
复制
.editor{
	width: 400px;
	height: 400px;
	background-color: grey;
}
代码语言：javascript
复制
<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>
	<div id="variables"></div>
	<div id="toolbar">
	    <button class="ql-bold"></button>
	    <button class="ql-italic"></button>
	    <button class="ql-underline"></button>
	    <button class="ql-list" value="bullet"></button>
	    <button class="ql-list" value="ordered"></button>
	    <button class="ql-indent" value="-1"></button>
	    <button class="ql-indent" value="+1"></button>
	    <button class="ql-link" ></button>
	</div>
	<div id="editor">
	</div>

	<button type="button" class="show">show me</button>
</body>

​

检查这个并让我知道？

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/45960729

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档