web-dev-qa-db-ja.com

クイルデルタをHTMLに変換

デルタを純粋なHTMLに変換するにはどうすればよいですか？ Quillをリッチテキストエディターとして使用していますが、既存のデルタをHTMLコンテキストでどのように表示するかわかりません。複数のQuillインスタンスを作成することは合理的ではありませんが、私はまだこれ以上良いものを思い付くことができませんでした。

私は調査を行いましたが、これを行う方法が見つかりませんでした。

quill
31
km6

あまりエレガントではありませんが、これが私がやらなければならなかった方法です。

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

明らかにこれにはquill.jsが必要です。

28
km6

私があなたのことを正しく理解していれば、あなたが求めている重要な情報とともに、議論のクイルスレッド here があります。

以下に、あなたにとって最も価値があるものを引用しました。

Quillは、常により一貫した使いやすい（解析なしの）データ構造としてDeltaを使用してきました。 Quillがこれに加えてDOM APIを再実装する理由はありません。 _quill.root.innerHTML_またはdocument.querySelector(".ql-editor").innerHTMLは正常に機能します（_quill.container.firstChild.innerHTML_は、子の順序に依存するため、少し脆弱です）。以前のgetHTML実装はこれ以上のことはしませんでした。

13
Remy

その中にHTMLが必要だと思います。かなり簡単です。

quill.root.innerHTML
8
Talha

簡単な解決策はこちら： https://www.scalablepath.com/blog/using-quill-js-build-wysiwyg-editor-website/

主なコードは次のとおりです。

console.log(quill.root.innerHTML);
5
Michal - wereda-net

バックエンドでphpを使用してそれを達成しました。私の入力はjsonでエンコードされたデルタで、出力はhtml文字列です。この関数は、リストやその他の形式を処理するためのものですが、operate関数でいつでも拡張できます。

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 || 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 = '<strong>'.$text.'</strong>';
        break;
        case 'italic':
        $operatedText = '<i>'.$text.'</i>';
        break;
        case 'strike':
        $operatedText = '<s>'.$text.'</s>';
        break;
        case 'underline':
        $operatedText = '<u>'.$text.'</u>';
        break;
        case 'link':
        $operatedText = '<a href="'.$attribute.'" target="blank">'.$text.'</a>';
        break;
        default:
        $operatedText = $text;
    }
    return $operatedText;
}
4
Ankush Tanwar

クイルオブジェクトのquill.root.innerHTMLは完全に機能します。

 $scope.setTerm = function (form) {
                var contents = JSON.stringify(quill.root.innerHTML)
                $("#note").val(contents)
                $scope.main.submitFrm(form)
            }
2
agrim2936

ノードパッケージを作成して、htmlまたはプレーンテキストをクイルデルタとの間で変換します。

私のチームは、それを使用してデータモデルを更新し、QuillのデルタとHTMLの両方を含めました。これにより、Quillのインスタンスなしでクライアントでレンダリングできます。

node-quill-converter を参照してください。

以下の機能を備えています。-convertTextToDelta-convertHtmlToDelta-convertDeltaToHtml

舞台裏では、JSDOMのインスタンスを使用します。これは、典型的なアプリ要求ライフサイクルでパフォーマンスがテストされていないため、移行スクリプトに最適な場合があります。

1
Joel Colucci

Expressの皆さんのために、ここに私がやった方法を示します。エクスプレスサニタイザーと組み合わせて非常にうまく機能しているようです。

app.js

_ import expressSanitizer from 'express-sanitizer'

 app.use(expressSanitizer())

 app.post('/route', async (req, res) => {
     const title = req.body.article.title
     const content = req.sanitize(req.body.article.content)
     // Do stuff with content
 })
_

new.ejs

_ <head>
     <link href="https://cdn.quilljs.com/1.3.2/quill.snow.css" rel="stylesheet">
 </head>

 ...

 <form action="/route" method="POST">
     <input type="text" name="article[title]" placeholder="Enter Title">
     <div id="editor"></div>
     <input type="submit" onclick="return quillContents()" />
 </form>

 ...

 <script src="https://cdn.quilljs.com/1.3.2/quill.js"></script>
 <script>
     const quill = new Quill('#editor', {
         theme: 'snow'
     })

     const quillContents = () => {
         const form = document.forms[0]
         const editor = document.createElement('input')

         editor.type = 'hidden'
         editor.name = 'article[content]'
         editor.value = document.querySelector('.ql-editor').innerHTML
         form.appendChild(editor)

         return form.submit()
     }
</script>
_

_express-sanitizer_（ https://www.npmjs.com/package/express-sanitizer ）

_document.forms_（ https://developer.mozilla.org/en-US/docs/Web/API/Document/forms ）

私のビューにはフォームが1つしかないため、_document.forms[0]_を使用しましたが、複数のフォームがある場合、または将来ビューを拡張して複数のフォームを使用する場合は、MDNリファレンスを確認してください。

ここで行っているのは、Quill Divのコンテンツを割り当てる非表示のフォーム入力を作成し、フォーム送信をブートレッグし、関数を通過させて終了することです。

さて、それをテストするために、<script>alert()</script>を含む投稿を作成してください。そうすれば、インジェクションのエクスプロイトを心配する必要がなくなります。

これですべてです。

1
agm1984

以下はquill.root.innerHTMLを使用した完全な機能です。他の機能は完全な使用方法をカバーしていないためです。

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

これはkm6の答えのわずかに異なるバリエーションです。

1
Captain Fantastic

試して

console.log ( $('.ql-editor').html() );
1
Araújo Everson

Nodejsを使用してクイルをレンダリングする場合は、jsdomに基づいた非常にシンプルなパッケージがあり、バックサイドをレンダリングするのに便利です（1つのファイルと18日後の最終更新） サーバー上のHTML文字列にクイルデルタをレンダリング

0
yo_0

quill-render それはあなたが望むもののように見えます。ドキュメントから：

var render = require('quill-render');
render([
    {
        "attributes": {
            "bold": true
        },
        "insert": "Hi mom"
    }
]);
// => '<b>Hi mom</b>'
0
user2994322

Quill値の取得と設定を可能にするjQueryスタイルのソリューションの場合、次のことを行っています。

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();
0
Genesis

適切な方法を次に示します。

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();

参照 https://github.com/nozer/quill-delta-to-html

0
NR Ganesh