blocks|key|4396042|text|不是很优雅，但这是我必须要做的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4396043|function+quillGetHTML(inputDelta)+{
++++var+tempCont+=+document.createElement("div");
++++(new+Quill(tempCont)).setContents(inputDelta);
++++return+tempCont.getElementsByClassName("ql-editor")[0].innerHTML;
}|code-block|syntax|javascript|4396044|显然，这需要quill.js。|4396045|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Not very elegant, but this is how I had to do it.

<pre><code>function quillGetHTML(inputDelta) {
 var tempCont = document.createElement("div");
 (new Quill(tempCont)).setContents(inputDelta);
 return tempCont.getElementsByClassName("ql-editor")[0].innerHTML;
}
</code></pre>

Obviously this needs quill.js.

blocks|key|4396340|text|我猜你想把HTML放在里面。这相当简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4396341|quill.root.innerHTML|code-block|syntax|javascript|4396342|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I guess you want the HTML inside it. Its fairly simple.

<pre><code>quill.root.innerHTML
</code></pre>

blocks|key|4396274|text|简单的解决方案在这里：https://www.scalablepath.com/blog/using-quill-js-build-wysiwyg-editor-website/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4396275|主要代码是：|4396276|console.log(quill.root.innerHTML);|code-block|syntax|javascript|4396277|entityMap|0|LINK|mutability|MUTABLE|url|https://www.scalablepath.com/blog/using-quill-js-build-wysiwyg-editor-website/^0|B|26|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Simple, solution is here:
<a href="https://www.scalablepath.com/blog/using-quill-js-build-wysiwyg-editor-website/" rel="noreferrer">https://www.scalablepath.com/blog/using-quill-js-build-wysiwyg-editor-website/</a>

The main code is:

<pre><code>console.log(quill.root.innerHTML);
</code></pre>

blocks|key|4396280|text|我已经在后台用php完成了。我的输入是json编码的增量，输出是html字符串。这是代码，如果它对you.This函数有任何帮助，它仍然可以处理列表和其他一些格式，但你总是可以在operate函数中扩展它们。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4396281|function+formatAnswer($answer){
++++$formattedAnswer+=+'';
++++$answer+=+json_decode($answer,true);
++++foreach($answer['ops']+as+$key=>$element){
++++++++if(empty($element['insert']['image'])){
++++++++++++$result+=+$element['insert'];
++++++++++++if(!empty($element['attributes'])){
++++++++++++++++foreach($element['attributes']+as+$key=>$attribute){
++++++++++++++++++++$result+=+operate($result,$key,$attribute);
++++++++++++++++}
++++++++++++}
++++++++}else{+
++++++++++++$image+=+$element['insert']['image'];
++++++++++++//+if+you+are+getting+the+image+as+url
++++++++++++if(strpos($image,'http://')+!==+false+%7C%7C+strpos($image,'https://')+!==+false){
++++++++++++++++$result+=+"<img+src='".$image."'+/>";
++++++++++++}else{
++++++++++++++++//if+the+image+is+uploaded+
++++++++++++++++//saving+the+image+somewhere+and+replacing+it+with+its+url
++++++++++++++++$imageUrl+=+getImageUrl($image);
++++++++++++++++$result+=+"<img+src='".$imageUrl."'+/>";
++++++++++++}
++++++++}
++++++++$formattedAnswer+=+$formattedAnswer.$result;
++++}
++++return+nl2br($formattedAnswer);
}

function+operate($text,$ops,$attribute){
++++$operatedText+=+null;
++++switch($ops){
++++++++case+'bold':+
++++++++$operatedText+=+''.$text.'';
++++++++break;
++++++++case+'italic':
++++++++$operatedText+=+''.$text.'';
++++++++break;
++++++++case+'strike':
++++++++$operatedText+=+'<s>'.$text.'</s>';
++++++++break;
++++++++case+'underline':
++++++++$operatedText+=+''.$text.'';
++++++++break;
++++++++case+'link':
++++++++$operatedText+=+'<a+href="'.$attribute.'"+target="blank">'.$text.'</a>';
++++++++break;
++++++++default:
++++++++$operatedText+=+$text;
++++}
++++return+$operatedText;
}|code-block|syntax|javascript|4396282|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I have accomplished it in the backend using php.
My input is json encoded delta and my output is the html string.
here is the code , if it is of any help to you.This function is still to handle lists though and some other formats but you can always extend those in operate function.

<pre><code>function formatAnswer($answer){
 $formattedAnswer = '';
 $answer = json_decode($answer,true);
 foreach($answer['ops'] as $key=&gt;$element){
 if(empty($element['insert']['image'])){
 $result = $element['insert'];
 if(!empty($element['attributes'])){
 foreach($element['attributes'] as $key=&gt;$attribute){
 $result = operate($result,$key,$attribute);
 }
 }
 }else{ 
 $image = $element['insert']['image'];
 // if you are getting the image as url
 if(strpos($image,'http://') !== false || strpos($image,'https://') !== false){
 $result = "&lt;img src='".$image."' /&gt;";
 }else{
 //if the image is uploaded 
 //saving the image somewhere and replacing it with its url
 $imageUrl = getImageUrl($image);
 $result = "&lt;img src='".$imageUrl."' /&gt;";
 }
 }
 $formattedAnswer = $formattedAnswer.$result;
 }
 return nl2br($formattedAnswer);
}

function operate($text,$ops,$attribute){
 $operatedText = null;
 switch($ops){
 case 'bold': 
 $operatedText = '&lt;strong&gt;'.$text.'&lt;/strong&gt;';
 break;
 case 'italic':
 $operatedText = '&lt;i&gt;'.$text.'&lt;/i&gt;';
 break;
 case 'strike':
 $operatedText = '&lt;s&gt;'.$text.'&lt;/s&gt;';
 break;
 case 'underline':
 $operatedText = '&lt;u&gt;'.$text.'&lt;/u&gt;';
 break;
 case 'link':
 $operatedText = '&lt;a href="'.$attribute.'" target="blank"&gt;'.$text.'&lt;/a&gt;';
 break;
 default:
 $operatedText = $text;
 }
 return $operatedText;
}
</code></pre>

blocks|key|4396451|text|下面是一个使用quill.root.innerHTML的完整函数，因为其他函数并没有完全涵盖它的用法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4396452|function+quillGetHTML(inputDelta)+{
++++++++var+tempQuill=new+Quill(document.createElement("div"));
++++++++tempQuill.setContents(inputDelta);
++++++++return+tempQuill.root.innerHTML;
++++}|code-block|syntax|javascript|4396453|这只是km6答案的一个细微的变化。|4396454|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Here's a full function using quill.root.innerHTML, as the others didn't quite cover the complete usage of it:

<pre><code>function quillGetHTML(inputDelta) {
 var tempQuill=new Quill(document.createElement("div"));
 tempQuill.setContents(inputDelta);
 return tempQuill.root.innerHTML;
 }
</code></pre>

This is just a slight different variation of km6 's answer.

blocks|key|4396534|text|当涉及到Quilljs时，这是一个非常常见的混淆。问题是，你不应该仅仅为了显示它而检索你的html。呈现和显示Quill容器的方式应该与它是编辑器时的方式相同。这是Quilljs的主要优势之一，您唯一需要做的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4396535|$conf.readOnly+=+true;|code-block|syntax|javascript|4396536|这将删除工具栏并使内容不可编辑。|4396537|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is a very common confusion when it comes to Quilljs. The thing is you should NOT retrieve your html just to display it. You should render and display your Quill container just the same way you do when it is an editor. This is one of the major advantages to Quilljs and the ONLY thing you need to do is:
<pre><code>$conf.readOnly = true;
</code></pre>
This will remove the toolbar and make the content not editable.

blocks|key|4396371|text|羽毛笔对象上的quill.root.innerHTML可以完美地工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4396372|+$scope.setTerm+=+function+(form)+{
++++++++++++++++var+contents+=+JSON.stringify(quill.root.innerHTML)
++++++++++++++++$("#note").val(contents)
++++++++++++++++$scope.main.submitFrm(form)
++++++++++++}|code-block|syntax|javascript|4396373|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

quill.root.innerHTML on the quill object works perfectly.

<pre><code> $scope.setTerm = function (form) {
 var contents = JSON.stringify(quill.root.innerHTML)
 $("#note").val(contents)
 $scope.main.submitFrm(form)
 }
</code></pre>

blocks|key|4396193|text|我组合了一个node包来在html或纯文本与羽毛笔增量之间来回转换。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4396194|我的团队使用它来更新我们的数据模型，以包括Quill的Delta和HTML。这允许我们在没有Quill实例的情况下在客户机上渲染。|4396195|参见node-quill-converter。|offset|length|4396196|它具有以下功能：-+convertTextToDelta+-+convertHtmlToDelta+-+convertDeltaToHtml|4396197|在幕后，它使用了一个JSDOM实例。这可能使其最适合于迁移脚本，因为性能尚未在典型的应用程序请求生命周期中进行测试。|4396198|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/node-quill-converter^0|0|0|2|K|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$F|W|G|X|1|Y]]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|10|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

I put together a node package to convert html or plain text to and from a Quill Delta.

My team used it to update our data model to include both Quill's Delta and HTML. This allows us to render on the client without an instance of Quill.

See <a href="https://www.npmjs.com/package/node-quill-converter" rel="nofollow noreferrer">node-quill-converter</a>.

It features the following functions:
- convertTextToDelta
- convertHtmlToDelta
- convertDeltaToHtml

Behind the scenes it uses an instance of JSDOM. This may make it best suited for migration scripts as performance has not been tested in a typical app request lifecycle.

blocks|key|4396375|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4396376|console.log+(+$('.ql-editor').html()+);|code-block|syntax|javascript|4396377|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try

<pre><code>console.log ( $('.ql-editor').html() );
</code></pre>

blocks|key|4396500|text|这是一个正确的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4396501|var+QuillDeltaToHtmlConverter+=+require('quill-delta-to-html').QuillDeltaToHtmlConverter;

//+TypeScript+/+ES6:
//+import+{+QuillDeltaToHtmlConverter+}+from+'quill-delta-to-html';+

var+deltaOps+=++[
++++{insert:+"Hello\n"},
++++{insert:+"This+is+colorful",+attributes:+{color:+'#f00'}}
];

var+cfg+=+{};

var+converter+=+new+QuillDeltaToHtmlConverter(deltaOps,+cfg);

var+html+=+converter.convert();+|code-block|syntax|javascript|4396502|参考https://github.com/nozer/quill-delta-to-html|offset|length|4396503|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/nozer/quill-delta-to-html^0|0|0|2|18|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Here is a proper way to do it.

<pre><code>var QuillDeltaToHtmlConverter = require('quill-delta-to-html').QuillDeltaToHtmlConverter;

// TypeScript / ES6:
// import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html'; 

var deltaOps = [
 {insert: "Hello\n"},
 {insert: "This is colorful", attributes: {color: '#f00'}}
];

var cfg = {};

var converter = new QuillDeltaToHtmlConverter(deltaOps, cfg);

var html = converter.convert(); 
</code></pre>

Refer <a href="https://github.com/nozer/quill-delta-to-html" rel="nofollow noreferrer">https://github.com/nozer/quill-delta-to-html</a>

blocks|key|4396426|text|对于允许获取和设置Quile值的jQuery风格的解决方案，我执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4396427|Quill.prototype.val+=+function(newVal)+{
++if+(newVal)+{
++++this.container.querySelector('.ql-editor').innerHTML+=+newVal;
++}+else+{
++++return+this.container.querySelector('.ql-editor').innerHTML;
++}
};


let+editor+=+new+Quill(+...+);

//set+the+value++++
editor.val('<h3>My+new+editor+value</h3>');

//get+the+value
let+theValue+=+editor.val();|code-block|syntax|javascript|4396428|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For a jQuery-style solution that allows getting and setting the Quill value I am doing the following:

<pre><code>Quill.prototype.val = function(newVal) {
 if (newVal) {
 this.container.querySelector('.ql-editor').innerHTML = newVal;
 } else {
 return this.container.querySelector('.ql-editor').innerHTML;
 }
};


let editor = new Quill( ... );

//set the value 
editor.val('&lt;h3&gt;My new editor value&lt;/h3&gt;');

//get the value
let theValue = editor.val();
</code></pre>

blocks|key|4396008|text|quill-render看起来就是你想要的。从文档中：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4396009|var+render+=+require('quill-render');
render([
++++{
++++++++"attributes":+{
++++++++++++"bold":+true
++++++++},
++++++++"insert":+"Hi+mom"
++++}
]);
//+=>+'Hi+mom'|code-block|syntax|javascript|4396010|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/casetext/quill-render^0|0|C|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<a href="https://github.com/casetext/quill-render" rel="nofollow">quill-render</a> looks like it's what you want. From the docs:

<pre><code>var render = require('quill-render');
render([
 {
 "attributes": {
 "bold": true
 },
 "insert": "Hi mom"
 }
]);
// =&gt; '&lt;b&gt;Hi mom&lt;/b&gt;'
</code></pre>

blocks|key|4396092|text|如果你想使用nodejs渲染羽毛笔，有一个基于jsdom的非常简单的包，用来渲染后台(只有一个文件&+18天后的最后更新)+render+quill+delta+to+html+string+on+server|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4396093|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mastito03/render-quill^0|1Q|17|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

If you want to render quill using nodejs, there is a package quite simple based on jsdom, usefull to render backside (only one file &amp; last update 18 days from now) <a href="https://github.com/mastito03/render-quill" rel="nofollow noreferrer">render quill delta to html string on server</a>

blocks|key|4396560|text|只需使用这个干净的库就可以将delta+/转换为text/html|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4396561|node-quill-converter|offset|length|4396562|示例：|4396563|const+{+convertDeltaToHtml+}+=+require('node-quill-converter');

let+html+=+convertDeltaToHtml(delta);

console.log(html)+;+//+'hello,+world'|code-block|syntax|javascript|4396564|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/joelcolucci/node-quill-converter^0|0|0|K|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Just use this clean library to convert from delta from/to text/html
<a href="https://github.com/joelcolucci/node-quill-converter" rel="nofollow noreferrer">node-quill-converter</a>
example:
<pre><code>const { convertDeltaToHtml } = require('node-quill-converter');

let html = convertDeltaToHtml(delta);

console.log(html) ; // '&lt;p&gt;hello, &lt;strong&gt;world&lt;/strong&gt;&lt;/p&gt;'
</code></pre>

How do I convert Deltas to pure HTML? I'm using Quill as a rich text editor, but I'm not sure how I would display the existing Deltas in a HTML context. Creating multiple Quill instances wouldn't be reasonable, but I couldn't come up with anything better yet.

I did my research, and I didn't find any way to do this.

Convert Quill Delta to HTML

TypeScript

容器

jQuery

JSON

如何将Deltas转换为纯HTML？我使用Quill作为富文本编辑器，但我不确定如何在HTML上下文中显示现有的Deltas。创建多个Quill实例是不合理的，但我想不出更好的方法。我做了我的研究，但我没有找到任何方法。

问将Quill增量转换为HTML
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将Quill增量转换为HTMLEN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将Quill增量转换为HTML
EN