43

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

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

4

17 に答える 17

37

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

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

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

于 2016-09-17T14:18:32.400 に答える
7

私は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-23T06:18:48.493 に答える
6

ここでは、quill.root.innerHTML を使用した完全な関数を示します。他の関数では完全な使用法をカバーしていないためです。

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

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

于 2018-08-29T19:58:41.173 に答える
4

Quill バージョン 1.3.6の場合は、次を使用します。

quill.root.innerHTML;
于 2020-03-01T15:42:43.887 に答える
2

試す

console.log ( $('.ql-editor').html() );
于 2017-07-30T04:44:26.730 に答える
0

nodejsを使用してクイルをレンダリングしたい場合は、jsdomに基づいた非常にシンプルなパッケージがあり、裏側をレンダリングするのに役立ちます（ファイルは1つだけで、現在から18日後に最終更新されます）クイルデルタをサーバー上のhtml文字列にレンダリングします

于 2016-12-10T00:28:00.797 に答える