0
こんにちはまず私がここに投稿StackOverflowのには応答がない原因...クイルJS埋め込み+オプス
私は、変数のための埋め込みを作成したいです。 （done） 変数を挿入するボタンを作成するモジュールを作成します（完了） 私はそれをバックに送信し、バック後に変数を使って古いテキストから返信します エディタに挿入し直します。私は再埋め込み を作成する場合でも、未定義だ**ボタン1ボタンprenomまたはクール クリックで**
クリックを再現私を見る それは消去し、再編集
にOPSテーブルを作成しようとします\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>期待される動作：
私は埋め込みでOPSを挿入し直します。それは私と同じ
実際の挙動を示す必要があります。
1.3：
はブラウザ、オペレーティングシステム、およびそれぞれのバージョン
バージョンを含める：
は私に未定義
プラットフォームを示しています。 1
あなたのお時間をいただきありがとうございます。 –