做门户网站用什么技术好,高端网站建设好处,河北手机网站制作多少钱,成都服装网站建设需求
在editor中插入图片#xff0c;并对图片进行编辑#xff0c;简略看一下组件的属性#xff0c;官网editor 组件 | uni-app官网 解决方案
首先要使用到ready这个属性#xff0c;然后官网有给代码粘过来#xff0c;简单解释一下这段代码的意思#xff08;作用是在不同…需求
在editor中插入图片并对图片进行编辑简略看一下组件的属性官网editor 组件 | uni-app官网 解决方案
首先要使用到ready这个属性然后官网有给代码粘过来简单解释一下这段代码的意思作用是在不同平台下获取编辑器的上下文以便后续对编辑器进行操作比如插入图片、获取内容等
HTML
editor ideditor refeditor readyonEditorReady
/editor
JS
onEditorReady() {// #ifdef MP-BAIDUthis.editorCtx requireDynamicLib(editorLib).createEditorContext(editor);// #endif// #ifdef APP-PLUS || MP-WEIXIN || H5uni.createSelectorQuery().select(#editor).context((res) {this.editorCtx res.context}).exec()// #endif
},
然后添加一个按钮用来插入图片这里直接上完整的代码
templateview classaddForum_app!-- 编辑器组件 --editor ideditor refeditor placeholder请输入内容... readyonEditorReady/editor!-- 图片选择按钮 --button typeprimary clickselectPhoto选择图片/button/view
/templatescript
export default {data() {return {editorCtx: null, // 编辑器上下文对象};},methods: {// 编辑器准备完成onEditorReady() {uni.createSelectorQuery().select(#editor).context((res) {this.editorCtx res.context;}).exec();},// 选择图片selectPhoto() {uni.chooseImage({count: 9, // 最多可以选择的图片数量sizeType: [original, compressed], // 可以指定是原图还是压缩图sourceType: [album], // 从相册选择success: (res) {const tempFilePaths res.tempFilePaths;// 遍历选中的图片路径并使用 insertImage 方法将它们插入到编辑器中tempFilePaths.forEach((path) {this.editorCtx.insertImage({src: path,success: function() {console.log(图片插入成功);}});});},fail: (err) {console.error(选择照片失败, err);}});}}
};
/script
最后对图片的操作非常简单查看官网的editor组件的属性即可。。。。
