퀼 델타를 HTML로 변환

어떻게 델타를 순수 HTML로 변환합니까? 서식있는 텍스트 편집기로 Quill을 사용하고 있지만 HTML 컨텍스트에서 기존 Deltas를 어떻게 표시할지 모르겠습니다. 여러 개의 Quill 인스턴스를 만드는 것은 합리적이지는 않지만, 아직 더 나은 것을 만들 수는 없습니다.퀼 델타를 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와 같은 사양이 바뀌면 타사 라이브러리가 깨지기 쉽다. –

노드가 필요하지 않은 무언가가 필요합니다. 그냥 바닐라. AFAIK Quill이 사용했지만 v1.0에서는 삭제되었습니다. – km6

노드별로 NPM을 의미합니까? –

저는 PHP를 사용하여 백엔드에서 완성했습니다. 내 입력은 json으로 인코딩 된 델타이고 출력은 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을 기반으로 패키지 매우 간단이, 유용한는 뒷면 (하나 개의 파일 십팔일 지금부터 & 마지막 업데이트) 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의 내용을 할당하는 숨겨진 양식 입력을 작성한 다음 양식 제출을 해지하고 우리의 기능을 통해 양식을 전달하여 마무리하는 것입니다.

이제 테스트 해 보려면 <script>alert()</script>으로 게시물을 작성하면 주사 공격에 대해 걱정할 필요가 없습니다.

그게 전부입니다.

출처

2017-09-04 06:53:31 agm1984

퀼 델타를 HTML로 변환

답변

관련 문제