web-dev-qa-db-ja.com

QuillでDeltaからHTMLを取得する

QuillのdeltaからHTMLコードを取得しようとしています。

これは私のコードです

_<!DOCTYPE html>
<html>
<head>

<!-- Main Quill library -->
<script src="http://cdn.quilljs.com/1.2.0/quill.js"></script>
<script src="http://cdn.quilljs.com/1.2.0/quill.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Theme included stylesheets -->
<link href="http://cdn.quilljs.com/1.2.0/quill.snow.css" rel="stylesheet">
<link href="http://cdn.quilljs.com/1.2.0/quill.bubble.css" rel="stylesheet">


    <title>Editor</title>

</head>
<body>
<div id="toolbar"></div>
<div id="editor"></div>
<script>

var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}],
[{'indent': '-1'}, {'indent': '+1'}],
[{'direction': 'rtl'}],
[{'size': ['small', false, 'large', 'huge']}],
['link', 'image', 'video', 'formula'],
[{'color': []}, {'background': []}],
[{'font': []}],
[{'align': []}]
];
var options = {
  debug: 'info',
  modules: {
    toolbar: toolbarOptions
  },
  placeholder: 'Textttt',
  readOnly: false,
  theme: 'snow'
};
var editor = new Quill('#editor', options);
    var delta = quill.getContents();
function quillGetHTML(inputDelta) {
    var tempCont = document.createElement("div");
    (new Quill(tempCont)).setContents(inputDelta);
    return tempCont.getElementsByClassName("ql-editor")[0].innerHTML;
}
function callMe(){
$(document).ready(function(){$("#btn1").click(function(){$("p").append(quillGetHTML(delta));});});}
</script>
<p>HTML: </p>
<button id="btn1" onClick="callMe()">Get HTML From Delta</button>
</body>
</html>
_

ボタンをクリックしても何も表示されず、callMe()関数をチェックしましたが、機能します。これは、デルタからHTMLを抽出することに問題があることを意味します。

javascriptjqueryquill
7
ahmedkh

はい、その通りです。HTMLの抽出は機能しませんが、問題はgetHTML()関数のサポートを拒否することです。 https://github.com/quilljs/quill/issues/9

ただし、quill.root.innerHTMLは使用できます。これを試して：

http://jsbin.com/zuniqef

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <!-- Main Quill library -->
<script src="http://cdn.quilljs.com/1.2.0/quill.js"></script>
<script src="http://cdn.quilljs.com/1.2.0/quill.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Theme included stylesheets -->
<link href="http://cdn.quilljs.com/1.2.0/quill.snow.css" rel="stylesheet">
<link href="http://cdn.quilljs.com/1.2.0/quill.bubble.css" rel="stylesheet">

</head>
<body>

  <div id="toolbar"></div>
<div id="editor"></div>
<script>

var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}],
[{'indent': '-1'}, {'indent': '+1'}],
[{'direction': 'rtl'}],
[{'size': ['small', false, 'large', 'huge']}],
['link', 'image', 'video', 'formula'],
[{'color': []}, {'background': []}],
[{'font': []}],
[{'align': []}]
];
var options = {
  debug: 'info',
  modules: {
    toolbar: toolbarOptions
  },
  placeholder: 'Textttt',
  readOnly: false,
  theme: 'snow'
};
var editor = new Quill('#editor', options);
  editor.insertText(0, 'Hello', 'bold', true);//set init value
function callMe() //display current HTML
  {
    var html = editor.root.innerHTML;
    alert(html);
  }
</script>
<div>HTML: </div>
<button id="btn1" onClick="callMe()">Get HTML From Delta</button>

</body>
</html>

このエディター（クイル）がgetHTML（将来の使用にとって重要）をサポートしていない場合。私はあなたに次のような別のテキストエディタライブラリを使用することをお勧めします：4年間で私の最高の推薦がそれを使用したckeditor（絶対に私はその期間に多くのテキストエディタも試します）。

14
plonknimbuzz

ユーザーが挿入した余分なスペースを取得するために、私は

this.editor.root.innerHTML.split(' ').join(' &nbsp;')

（splitには2つのスペースがあり、joinには1つのスペースがあることに注意してください！）

0
papas-source