1

QuillJS 1.0 Beta を使用しています。テキスト エディターがあり、ユーザーが最初にコンテンツを作成します。送信をクリックすると.innerHTML()、エディタから が抽出され、データベースに保存されます。次に、ユーザーがそのコンテンツを編集したい場合は、データベースから html を取得し.pasteHTML()、Quill の API を使用してエディターに貼り付けます。

HTML をエディターに貼り付けると、テキスト スタイルは問題なく貼り付けられますが、画像を含めると、画像のサイズは、設定したインライン スタイルではなく、画像の自然な高さ/幅に設定されます。何らかの理由で、Quill のクリーナーがこのスタイルを削除しているに違いありません。ストレートhtmlを渡すので、この「クリーナー」を回避できるように渡すパラメーターはありますか?

DB からの html 文字列の一部を次に示します。

<p class="ql-align-center"><strong class="ql-size-huge" style="color: rgb(255, 255, 255);">&nbsp;$450 Referral Bonus</strong></p><p class="ql-align-center"><strong class="ql-size-small" style="color: rgb(186, 35, 35);">Phone a friend!</strong></p><p class="ql-align-center"><img width="145" height="140" style="width: 145px; height: 140px;" src="data:image/png;base64,iVBORw0KG

スタイリングはご覧の通り。Quill がエディターに貼り付けた後に DOM を表示すると、img タグにはこれらのスタイルがありません。何か案が？

イメージタグを特定の方法で解釈するマッチャーを追加しようとしましたが、何をしても、幅/高さを固定できません:

quill.editor.clipboard.addMatcher('IMG', function(node, delta) {
            let imgWidth = node.width;
            let imgHeight = node.height;
            var delta2 = new Delta([{
                insert: { image: node.src },
                attributes: {
                    width: imgWidth,
                    height: imgHeight
                }
            }]);

            return delta2;
        });
4

1 に答える 1

0

画像、段落タグなどにインライン スタイリングを含む完全な HTML 文字列がある場合は、quill.container.firstChild.innerHTMLプロパティを html 文字列に設定するだけで、スタイルと共に貼り付けられます。addMatcherこれにより、メソッドとメソッドが完全にバイパスされpasteHTML()ます。

私の場合、DB から HTML 文字列を取得し、そのプロパティをそれに設定していました。

this._httpClient.fetch('/ApiUrl')
            .then(response => response.json())
            .then(resp => {
                this.obj.editor.container.firstChild.innerHTML = resp.ExecutiveControlHtmlResult;
            });

私はQuillのインスタンスを変数に保存しましたが、editorjqueryまたは使用しているものを介してこれらを設定できるはずです。

于 2016-08-10T18:24:36.547 に答える