將Quill Delta轉換爲HTML

如何將Deltas轉換爲純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內置此功能。例如，如果Delta的規格發生變化，第三方庫可能會很脆弱。 –

我需要的東西不需要Node或任何東西，只需vanillaJS。 AFAIK Quill曾經擁有它，但它在v1.0中被刪除。 – km6

按節點您的意思是NPM？ –

我已經完成了它在後端使用PHP。我的輸入是json編碼的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渲染鵝毛筆，還有一個包裝很簡單基於jsdom，有用渲染背面（只有一個文件&最後更新從現在起18天）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

這裏是我是如何做到的，因爲你快速鄉親。它似乎與express-sanitizer一起工作得很好。

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

新。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的內容，然後我們將表單提交併通過函數傳遞給它，以完成它。

現在，測試它，在其中發佈一個<script>alert()</script>的帖子，您不必擔心注入漏洞。

就是這樣。

來源

2017-09-04 06:53:31 agm1984

將Quill Delta轉換爲HTML

回答

相關問題