リッチテキストエディタVUE-クイルエディタのカスタムイメージファイルのアップロード

絵のニーズをアップロード

VUE-クイル・エディタは絵にbase64エンコードであるので、それは、リッチテキストエディタや画像のアップロード機能に、絵が比較的大きいときに、バックグラウンドのパラメータを提出する時間が長すぎる、提出につながることは失敗しました。

ソリューション

画像がサーバーにアップロードし、その後、画像リンクがでリッチテキストに挿入された
画像のアップロード、あなたが要素またはiViewのを使用することができ、ここで私は、iViewの例で午前
アップロードするためには画像をクリックし、アップロードした写真の、カスタムVUE-クイルエディタ非表示にしたい画像アップロードエリア成功したアップロードの写真はリッチテキストエディタに表示された後、iViewの要素や画像のアップロードを呼び出すとき

ステップ

- インストール

 

  main.jsで導入

 

 II。カスタマイズVUE-クイルエディタの画像のアップロード

HTML:

 

 

 JS:

 

 III。iViewの呼び出し要素または画像アップロードコンポーネント

HTML:

 

 CSS:

 

 JS:

 

 IV。あなたはより多くのリッチテキストエディタが必要な場合

ファイル;二つの異なる参照マーク付きリッチテキスト、その構成内の各ファイルのアップロードを呼び出す:な、その後、ファイルのアップロードやリッチテキスト編集のコピーを完了した後に追加するだけでなく、機能の編集など、複数の利用であってもよく、彼らのリッチテキストエディタを呼び出し、別のメソッド名を使用して、成功をアップロードします。

フォーカス:どんなにリッチテキストやファイルアップロードどのような方法クラス名または区別、これら二つの場所の前と区別されるべきです。

IIファイルのアップロードを要求します

そして写真が同じのアップロード、違いは、ファイルをアップロードすることです。同じ考えを解決:、カスタムボタンがVUE-クイルエディタのiViewファイルアップロードの使用をクリックし、タグのhref属性にアドレスを割り当てるリッチテキストカーソルに挿入されています。

ステップ

カスタムエディタの添付ファイルのアップロード

私はあなたのコードを無視することができ、ダウンロードのプロパティを経由してダウンロードするファイルの名前をカスタマイズしたいのですが、二つの方法で失敗しています。以下は、リッチテキストへのリンクの挿入カスタムです

 

 ツールバーの設定、追加upload、および不要の残りの部分を除去することができます

 

 カスタムアイコンのスタイルファイルのアップロード

第二に、要素を呼び出すか、コンポーネントのiViewをアップロード

二つの絵は、呼び出すときにやる区別するために、クラス名を定義するためにアップロードしました。

 

 修改工具栏配置,当点击富文本时,调用相应的上传组件

 

 这两个文件上传都要隐藏

 

 下面是插入图片和文件的方法

 

 

 

 

bug及优化

一、回车光标不显示

不知道为什么,百度都搜不到,好像只有我出现了这个问题,最后通过监听回车,手动换行并在换行后加了一个空格,因为没有内容的时候光标不显示,然后把光标向前调一个位置,移到空格前面。

二、给菜单栏添加中文标题title

 

 

 

 

 有个需要注意的地方,按上面的方法使用后,确实有效,但是字体颜色和背景颜色的提示都变成了背景颜色,然后修改了标题栏的配置,提示才彼此对应。

 

 修改为

 

 

 

おすすめ

転載: www.cnblogs.com/csji/p/12166558.html