Quill DeltaをHTMLに変換する

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

私は研究をしましたが、これを行う方法はありませんでした。

出典

2016-09-15 km6

これはかなりうまくいくようです：https://github.com/nozer/quill-delta-to-html –

非常に優雅ですが、これは私がそれをしなければならなかった方法です。

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

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

出典

2016-09-17 14:18:32 km6

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

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

出典

2016-09-16 04:17:44

別のものがあります：[quilljs-renderer]（https://github.com/UmbraEngineering/quilljs-renderer ）。私は本当にQuillにこの機能を組み込みたいと思っています。デルタ仕様の変更など、サードパーティのライブラリは壊れやすいかもしれません。 –

私はNodeや何も必要としないものが必要です。ちょうどvanillaJSです。 AFAIK Quillはそれを持っていましたが、v1.0では削除されました。 – km6

ノードによってあなたはNPMを意味しますか？ –

私はPHPを使用してバックエンドでそれを達成しました。私の入力はjson encoded deltaで、出力はhtml文字列です。ここにコードがあります。これはあなたの助けになります。この機能はまだリストやその他のフォーマットを扱いますが、操作機能でそれらを拡張することはできます。

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; 
}

出典

2016-11-23 06:18:48

あなたはnodejsを使用してクイルレンダリングしたい場合は、裏面（一つだけのファイル&最終更新今から18日）をレンダリングするjsdomに基づいて非常に簡単パッケージ、便利があるrender quill delta to html string on server

出典

2016-12-10 00:28:00

外部リソースへのリンクが推奨されていますが、リンクの周りにコンテキストを追加して、仲間のユーザーには何がわかり、その理由を知るようにしてください。ターゲットサイトに到達できない場合や、永続的にオフラインになる場合は、常に重要なリンクの最も関連性の高い部分を引用してください。 – pableiros

私は「場合あなたのことを正しく理解していれば、あなたの後にある重要な情報とともに、質問のスレッドhereがあります。

私は以下のあなたに最も価値のあるべき姿を引用しました：

クイルはいつもより一貫性と使いやすいようにデルタ（なしパース）データ構造を使用しています。 QuillがDOM APIを再実装する理由はこれに加えてです。 quill.root.innerHTMLまたはdocument.querySelector(".ql-editor").innerHTMLはうまく動作します（子の順序に依存するため、quill.container.firstChild.innerHTMLは少し脆いです）。以前のgetHTML実装ではこれ以上のことはありませんでした。

出典

2016-12-20 17:00:32 Remy

私はあなたの中にHTMLが欲しいと思います。それはかなり単純です。

quill.root.innerHTML

出典

2017-05-19 16:35:19 Talha

quill.root.innerHTMLは完全に動作します。

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

出典

2017-07-12 14:23:23 agrim2936

-1

ここ

console.log ($('.ql-editor').html());

出典

2017-07-30 04:44:26

を試してみて、あなたが人々を表現するために、私はそれをやった方法です。エクスプレスサニタイザーと一緒にうまく機能しているようです。

は

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 
})

新しいapp.js。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）

私の見解は、一形態のみを持っているので、私はdocument.forms[0]を使用していますが、複数持っているか、将来的にあなたの視野を広げる可能性がある場合複数のフォームを使用するには、MDNリファレンスをチェックしてください。

私たちがここでやっていることは、Quill Divの内容を割り当てる隠しフォーム入力を作成してから、フォームsubmitを停止し、関数を渡して終了させることです。

これをテストするには、<script>alert()</script>というポストを作成してください。注射の悪用を心配する必要はありません。

これだけです。

出典

2017-09-04 06:53:31 agm1984

Quill DeltaをHTMLに変換する

答えて

関連する問題