Konwersja Delta delta do HTML

Question

Jak przekonwertować Deltas na czysty HTML? Używam Quill jako edytora tekstu sformatowanego, ale nie jestem pewien, w jaki sposób wyświetlić istniejące Deltas w kontekście HTML. Tworzenie wielu instancji Quill nie byłoby rozsądne, ale nie mogłem wymyślić nic lepszego.

Zrobiłem moje badania i nie znalazłem żadnego sposobu, aby to zrobić.

Answer 1

Niezbyt elegancko, ale tak musiałem to zrobić.

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

Oczywiście to potrzebuje quill.js.

Answer 2

quill-render wygląda na to, co chcesz. Od dokumentów:

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

Answer 3

Dokonałem tego w backendach za pomocą php. Moje dane wejściowe to delta zakodowana w json, a moje dane wyjściowe to ciąg znaków html. tutaj jest kod, jeśli jest to dla ciebie pomocne. Ta funkcja jest nadal do obsługi list i niektórych innych formatów, ale zawsze można rozszerzyć te w funkcji działania.

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

Answer 4

Jeśli chcesz uczynić pióro za pomocą nodejs, istnieje pakiet dość prosta na podstawie jsdom, przydatne do renderowania kuper (tylko jeden plik & ostatnia aktualizacja 18 dni od teraz) render quill delta to html string on server

Answer 5

Gdybym zrozumiałem, że jesteś w porządku, jest wątek z wątku dyskusji here, z kluczowymi informacjami, których szukasz.

mam cytowany co powinien mieć największą wartość wam poniżej:

Quill zawsze stosować delt jako bardziej spójne i łatwiejsze w użyciu (nie parsowania) strukturę danych. Nie ma powodu, dla którego Quill miałby ponownie dodawać do DOM API w dodatku do tego . quill.root.innerHTML lub document.querySelector(".ql-editor").innerHTML działa dobrze (quill.container.firstChild.innerHTML jest nieco bardziej kruchy, ponieważ zależy od kolejności dzieci), a poprzednia implementacja getHTML zrobiła niewiele więcej.

Answer 6

Chyba chcesz HTML wewnątrz niego. Jest dość prosty.

quill.root.innerHTML 

Answer 7

quill.root.innerHTML na obiekcie piórka działa idealnie.

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

Answer 8

Spróbuj

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

Answer 9

Oto jak to zrobiłem, bo ekspresowe ludzie. Wydaje się, że działało bardzo dobrze w połączeniu z ekspresowym odkażaniem.

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

nowy.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)

Moim zdaniem ma tylko jedną formę, więc użyłem document.forms[0], ale jeśli masz kilka lub może przedłużyć swój pogląd w przyszłości mieć wiele formularzy, sprawdź referencję MDN.

To, co tu robimy, polega na tworzeniu ukrytych danych wejściowych do formularza, które przypisujemy zawartości Div Quill, a następnie bootleg formularz przesłać i przekazać go za pośrednictwem naszej funkcji, aby zakończyć.

Teraz, aby go przetestować, zrób post z <script>alert()</script> w nim, a nie będziesz musiał się martwić o exploity wtryskowe.

To wszystko.