絵のニーズをアップロード
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
有个需要注意的地方,按上面的方法使用后,确实有效,但是字体颜色和背景颜色的提示都变成了背景颜色,然后修改了标题栏的配置,提示才彼此对应。
修改为