Wangeditor の使用ドキュメント: https://www.kancloud.cn/wangfupeng/wangeditor3/332599
記録する場所は 2 つあります。
1. リッチ テキスト エディターで画像を自分のサーバーにアップロードする方法
2. リッチ テキスト エディターをコンポーネントでカプセル化します。 1 ページで複数のエディターを使用する
1. リッチ テキスト エディターで自分のサーバーに写真をアップロードする方法 (たった 2 つのステップで問題を確実に解決できます)
①. まず、ネットワーク アップロード インターフェイスを閉じます
editor.config.showLinkImg = false;
②. 写真のアップロードプロセスを完全に制御するには、次のメソッドを使用する必要があります。
// 自定义上传图片（根据服务端要求，我这里需要把文件流转换成base64格式，这个地方按照自己的接口要求调取接口就可以。）
editor.config.customUploadImg = async (
files,
insertImgFn
) => {
// 调接口上传图片
let reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function (e) {
console.log(e, 'e-------------------')
let base64String = e.target.result;
// 此处可对该base64进行获取赋值传入后端
console.log("bese64编码：", base64String);
imguploading1001({
breakdownId: '2c90a7247f6c936801815adac7600143',//故障id
imageType: '1',
imageBase64: base64String
}).then((res) => {
console.log(res.data.reportedImage, 'res==>> img upload')
this.bdimgurl = res.data.reportedImage.imageUrl
insertImgFn(this.bdimgurl)
})
}
}
2. コンポーネントのカプセル化と 1 ページでの複数のリッチ テキスト エディタの使用
① エディタ オブジェクトは ref を通じて取得されることがわかっているため、親コンポーネント内で子コンポーネントを使用する場合。サブコンポーネントに動的に ref を渡す必要があります。
let editor = new wangEdit(this.$refs.ref1);
②、父から息子への
親コンポーネント：
<template>
<div>
<button type="button" @click="submit">提交</button>
<div>
<Edit :refmsg="ref1" ref="ref1"></Edit>
<Edit :refmsg="ref2" ref="ref2"></Edit>
<Edit :refmsg="ref3" ref="ref3"></Edit>
</div>
</div>
サブアセンブリ:
<template>
<div style="width: 100%;height: 500px">
<div class="mo-wang-editor" :ref="refmsg" ></div>
</div>
</template>
サブコンポーネントが props とともに受信された後、マウントされたフック内の wangeditor オブジェクトを取得します。カスタム アップロード インターフェイスを呼び出し、画像をアップロードして、その画像をエディターに挿入します。
③. データの変更を監視し、エディター オブジェクトに value 属性を追加し、現在の値をそれにバインドします。
//监听数据变化
editor.config.onchange = (newHtml) => {
this.$emit('change', newHtml);
editor.config.value = newHtml
};
④. 親コンポーネントで取得できます
。submitをクリックすると子コンポーネントのvueオブジェクトをrefs経由で取得でき、先ほどバインドした値を取得できます。ここでは1ページに3つのリッチテキストコンポーネントを使用しています。
submit() {
console.log(this.$refs.ref1.editor.config.value)
console.log(this.$refs.ref2.editor.config.value)
console.log(this.$refs.ref3.editor.config.value)
},
⑤. すべての値を取得したら、サーバーにパラメータを渡すためのフィールドを定義できます。