uniapp 富文本框的使用

uniapp中是有富文本框组件的。

uniapp中的富文本框组件的使用官网链接：https://uniapp.dcloud.io/component/editor?id=editor

官网富文本框的展示部分：（下面红框框住的菜单含义如下：）

B 加粗
I 斜体
U 下划线
居中
靠右
字体
撤回
反撤回
添加横线
图片

结构部分：

<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>

代码部分：

 export default {data() {return {placeholder: '开始输入...'}},methods: {onEditorReady() {uni.createSelectorQuery().select('#editor').context((res) => {this.editorCtx = res.context}).exec()},undo() {this.editorCtx.undo()}}
}

最上面图片的展示代码如下：

textarea 多行文本组件的使用——标题与副标题部分

<textarea v-model="detail.title" placeholder="添加标题" auto-height placeholder-class="grey"/>

v-model绑定的是多行文本的内容，placeholder是提示信息，auto-height是根据内容自动高度增加，placeholder-class是提示信息的样式类名

picker 选择组件的使用——文章分类的使用

<picker @change="bindPickerChange" :value="index" :range="array"><view class="uni-input">{{array[index]}}</view>
</picker>

index 文章分类数组的索引，range文章分类的数组，此数组的格式是字符串的数组，如果接口返回的数据不合适，则需要通过for循环遍历进行数组重构。

image 组件——封面图片的上传

uniapp 提供了上传图片的api；

uniapp 官网提供的上传图片的示例如下：

uni.chooseImage({count: 6, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: function (res) {console.log(JSON.stringify(res.tempFilePaths));}
});

在上传完图片后，可以通过阿里OSS进行本地图片转化为网络图片，然后通过uniapp.uploadFile的方法将网络图片获取到。

具体代码如下所示：

async chooseImage(type) {let _this = this;uni.chooseImage({count: 1, //最多可以选择的图片张数，默认9sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有success: (respone) => {_this.$request.urlRequest('/gate/oss/token', {},'GET',(res) => {if (res.code == 200) {let data = res.result;let env = {uploadImageUrl: 'https://58d.oss-cn-hangzhou.aliyuncs.com/', // 默认存在根目录，可根据需求改AccessKeySecret: data.AccessKeySecret, // AccessKeySecret 去你的阿里云上控制台上找OSSAccessKeyId: data.AccessKeyId, // AccessKeyId 去你的阿里云上控制台上找stsToken: data.SecurityToken,timeout: 87600 //这个是上传文件时Policy的失效时间}let dir = 'images/';let filePath = respone.tempFilePaths[0];const aliyunFileKey = dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.png';const aliyunServerURL = env.uploadImageUrl; //OSS地址，需要httpsconst accessid = env.OSSAccessKeyId;const policyBase64 = _this.getPolicyBase64(env);const signature = _this.getSignature(policyBase64, env); //获取签名const stsToken = env.stsToken;let param = {'key': aliyunFileKey,'policy': policyBase64,'OSSAccessKeyId': accessid,'signature': signature,'success_action_status': '200','x-oss-security-token': stsToken,'stsToken': stsToken,};uni.uploadFile({url: "https://58d.oss-cn-hangzhou.aliyuncs.com/", //开发者服务器 urlfilePath: filePath, //要上传文件资源的路径name: 'file', //必须填fileformData: param,success: (res) => {if(type){_this.detail.imageUrl = aliyunServerURL + aliyunFileKey;return;}_this.editorCtx.insertImage({src: aliyunServerURL + aliyunFileKey, // 此处需要将图片地址切换成服务器返回的真实图片地址alt: '图片',width:"320upx",// 此处可以对图片进行尺寸的限制，否则页面中的图片会展示不全mode:'widthFix',success: function(e) {}});},fail: (err) => {// _this.msg.push(JSON.stringify(err));// err.wxaddinfo = aliyunServerURL;// failc(err);},})}})}
});

editor 富文本框组件的使用——添加图文部分

<editor class="ql-container"  :placeholder="placeholder" :show-img-size="true" :show-img-toolbar="true":show-img-resize="true" @ready="onEditorReady" id="editor" @statuschange="statuschange" @focus="editFocus" @blur="editBlur"ref="editot"></editor>
<view class="tool-view" ><view class="tool"><jinIcon class="single" type="" font-size="44upx" title="插入图片" @click="chooseImage"></jinIcon><jinIcon class="single" type="" font-size="44upx" title="修改文字样式" @click="showMore" :color="showMoreTool ? activeColor : '#666666'"></jinIcon><jinIcon class="single" type="" font-size="44upx" title="分割线" @click="insertDivider"></jinIcon><jinIcon class="single" type="" font-size="44upx" title="撤销" @click="undo"></jinIcon><jinIcon class="single" type="" font-size="44upx" title="重做" @click="redo"></jinIcon><jinIcon class="single" type="提交" font-size="40upx" title="设置" @click="showSetting"></jinIcon></view><!-- 文字相关操作 --><view class="font-more" v-if="showMoreTool"><jinIcon class="single" type="" font-size="44upx" title="加粗" @click="setBold" :color="showBold ? activeColor : '#666666'"></jinIcon><jinIcon class="single" type="" font-size="44upx" title="斜体" @click="setItalic" :color="showItalic ? activeColor : '#666666'"></jinIcon><jinIcon class="single" type="" font-size="44upx" title="分割线" @click="setIns" :color="showIns ? activeColor : '#666666'"></jinIcon><jinIcon class="single" type="" font-size="44upx" title="标题" @click="setHeader" :color="showHeader ? activeColor : '#666666'"></jinIcon><jinIcon class="single" type="" font-size="44upx" title="居中" @click="setCenter" :color="showCenter ? activeColor : '#666666'"></jinIcon><jinIcon class="single" type="" font-size="44upx" title="居右" @click="setRight" :color="showRight ? activeColor : '#666666'"></jinIcon></view>
</view>

style样式如下：

.ql-container {line-height: 160%;font-size: 34upx;width: 100%;height:calc(100vh - 450upx);overflow-y: auto;margin: 20upx auto;// position: relative;// top:0;border:2upx solid #bbb;padding:20upx 30upx;box-sizing: border-box;// padding-bottom:600upx;
}.tool-view {width: 100vw;position: fixed;bottom: 0;left: 0;
}.tool {height: 100upx;display: flex;align-items: center;justify-content: space-around;width: 100%;background: #eee;
}.font-more {position: absolute;left: 0;height:100upx;bottom: 100upx;display: flex;align-items: center;justify-content: space-around;width: 100%;background: rgb(235, 235, 235);overflow: hidden;transition: all 0.15s;
}.setting-layer {position: absolute;bottom: 100upx;background: #fff;width: 250upx;right: 20upx;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);border-radius: 8upx;
}.setting-layer .single {height: 80upx;font-size: 32upx;padding: 0 30upx;display: flex;align-items: center;line-height: 80upx;flex-direction: row;color: #666;
}.setting-layer .single .icon {margin-right: 20upx;
}.setting-layer-mask {position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;background: transparent;
}

script部分代码：

data({return{showMoreTool: false,showBold: false,showItalic: false,showIns: false,showHeader: false,showCenter: false,showRight: false,showSettingLayer: false,activeColor: '#F56C6C',screenHeight:"",keyboardFlag:false,}
}),
onLoad(options){this.iosFlag = (uni.getSystemInfoSync().platform=='ios');//判断当前环境为安卓或IOSthis.screenHeight = uni.getSystemInfoSync().windowHeight;//获取当前环境的高度this.getList();//获取文章分类的数据if(options && options.id){ // 根据链接中的id获取内容，这个是修改或展示图文的时候需要调用的接口this.id = options.id;this.getDetail(options.id);}
},
onBackPress(options) {//监听页面的返回按键   let _this = this;if (options.from === 'backbutton' && !_this.id) {this.editorCtx.getContents({ // 通过这个方法可以获取富文本框中的内容success: (data)=> {this.richText = data;}})  // 下面的if判断，如果标题/副标题/封面图/富文本框内容只要是有一个有内容的，则需要进行弹窗提示是否保存为草稿if(_this.richText || _this.detail.title || _this.detail.secondTitle || _this.detail.imageUrl){uni.showModal({title: '是否保存为草稿？',content: '',confirmText: "保存草稿",confirmColor: "#FF7424",success: res=> {if (res.confirm) {this.$request.urlRequest( // 调用保存草稿的接口"/goods/Academy/saveDraft", {academyCategoryId:this.dataList[this.index].id,essay:this.richText.html,imageUrl:this.detail.imageUrl,secondTitle:this.detail.secondTitle,title:this.detail.title},'post',(res)=> {console.log(res);if(res.code==200){uni.showToast({title:"草稿保存成功"})setTimeout(()=>{uni.redirectTo({url:"/pages/school/articleList?status=1"})// 在监听页面返回的功能中，只有遇到了return true才算是返回成功return true;},1500)}})}else{uni.navigateBack();return true;}}});return true;}uni.navigateBack();return true;}
},
methods:{// 监听富文本框组件的准备工作onEditorReady(e) {uni.createSelectorQuery().in(this).select('.ql-container').fields({size: true,context: true}, res => {this.editorCtx = res.context;this.editorCtx.setContents({html: this.detail.essay})}).exec();},// 富文本框组件的重做undo() {this.editorCtx.undo();},// 插入图片async chooseImage(type) {let _this = this;console.log(_this.editorCtx);uni.chooseImage({count: 1, //最多可以选择的图片张数，默认9sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有success: (respone) => {_this.$request.urlRequest('/gate/oss/token', {},'GET',(res) => {if (res.code == 200) {let data = res.result;let env = {uploadImageUrl: 'https://58d.oss-cn-hangzhou.aliyuncs.com/', // 默认存在根目录，可根据需求改AccessKeySecret: data.AccessKeySecret, // AccessKeySecret 去你的阿里云上控制台上找OSSAccessKeyId: data.AccessKeyId, // AccessKeyId 去你的阿里云上控制台上找stsToken: data.SecurityToken,timeout: 87600 //这个是上传文件时Policy的失效时间}let dir = 'images/';let filePath = respone.tempFilePaths[0];const aliyunFileKey = dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.png';const aliyunServerURL = env.uploadImageUrl; //OSS地址，需要httpsconst accessid = env.OSSAccessKeyId;const policyBase64 = _this.getPolicyBase64(env);const signature = _this.getSignature(policyBase64, env); //获取签名const stsToken = env.stsToken;let param = {'key': aliyunFileKey,'policy': policyBase64,'OSSAccessKeyId': accessid,'signature': signature,'success_action_status': '200','x-oss-security-token': stsToken,'stsToken': stsToken,};uni.uploadFile({url: "https://58d.oss-cn-hangzhou.aliyuncs.com/", //开发者服务器 urlfilePath: filePath, //要上传文件资源的路径name: 'file', //必须填fileformData: param,success: (res) => {if(type){_this.detail.imageUrl = aliyunServerURL + aliyunFileKey;return;}_this.editorCtx.insertImage({src: aliyunServerURL + aliyunFileKey, // 此处需要将图片地址切换成服务器返回的真实图片地址alt: '图片',width:"320upx",mode:'widthFix',success: function(e) {}});},fail: (err) => {// _this.msg.push(JSON.stringify(err));// err.wxaddinfo = aliyunServerURL;// failc(err);},})}})}});
},
// 阿里OSS存储的格式转化
getSignature(policyBase64, env) {const accesskey = env.AccessKeySecret;const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {asBytes: true});const signature = Crypto.util.bytesToBase64(bytes);return signature;
},
getPolicyBase64(env) {let date = new Date();date.setHours(date.getHours() + env.timeout);let srcT = date.toISOString();const policyText = {"expiration": srcT, //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了"conditions": [["content-length-range", 0, 5 * 1024 * 1024] // 设置上传文件的大小限制,5mb]};const policyBase64 = base64.encode(JSON.stringify(policyText));return policyBase64;
},
// 富文本框组件插入分割线
insertDivider() {this.editorCtx.insertDivider();
},
redo() {this.editorCtx.redo();
},
// 富文本框组件菜单显示更多
showMore() {this.showMoreTool = !this.showMoreTool;this.editorCtx.setContents()
},
// 富文本框内容加粗
setBold() {this.showBold = !this.showBold;this.editorCtx.format('bold');
},
// 富文本框内容斜体展示
setItalic() {this.showItalic = !this.showItalic;this.editorCtx.format('italic');
},
// 富文本框组件检测状态
checkStatus(name, detail, obj) {if (detail.hasOwnProperty(name)) {this[obj] = true;} else {this[obj] = false;}
},
// 富文本框组件菜单的改变
statuschange(e) {var detail = e.detail;this.checkStatus('bold', detail, 'showBold');this.checkStatus('italic', detail, 'showItalic');this.checkStatus('ins', detail, 'showIns');this.checkStatus('header', detail, 'showHeader');if (detail.hasOwnProperty('align')) {if (detail.align == 'center') {this.showCenter = true;this.showRight = false;} else if (detail.align == 'right') {this.showCenter = false;this.showRight = true;} else {this.showCenter = false;this.showRight = false;}} else {this.showCenter = false;this.showRight = false;}
},
// 富文本框
setIns() {this.showIns = !this.showIns;this.editorCtx.format('ins');
},
// 富文本框组件将文字变成标题文字
setHeader() {this.showHeader = !this.showHeader;this.editorCtx.format('header', this.showHeader ? 'H2' : false);
},
// 富文本框组件内容居中展示
setCenter() {this.showCenter = !this.showCenter;this.editorCtx.format('align', this.showCenter ? 'center' : false);
},
// 富文本框组件内容靠右展示
setRight() {this.showRight = !this.showRight;this.editorCtx.format('align', this.showRight ? 'right' : false);
},
// 获取文章分类的接口调用
getList(){this.$request.urlRequest("/goods/AcademyCategory/list", {},'get',(res)=> {if(res.code==200){if(!res.result){return;}this.dataList = res.result;this.dataList.forEach(item=>{this.array.push(item.academyCategoryName);})}})
},
// 提交信息
showSetting() {if(!this.detail.title || !this.detail.imageUrl){uni.showToast({title:"请补全信息",icon:"none"})return;}// #ifdef APP-PLUSthis.editorCtx.getContents({success: (data)=> {  this.richText = data;uni.showModal({title: '确定提交吗？',content: '提交后将进入审核阶段',confirmText: "确定提交",confirmColor: "#FF7424",success: res=> {if (res.confirm) {if(this.id){this.$request.urlRequest("/goods/Academy/reEditAcademy", {id:this.id,academyCategoryId:this.dataList[this.index].id,essay:this.richText.html,imageUrl:this.detail.imageUrl,secondTitle:this.detail.secondTitle,title:this.detail.title},'post',(res)=> {console.log(res);if(res.code==200){uni.showToast({title:"提交成功"})setTimeout(()=>{uni.redirectTo({url:"/pages/school/articleList?status=2"})},1500)}})}else{this.$request.urlRequest("/goods/Academy/publishAcademy", {academyCategoryId:this.dataList[this.index].id,essay:this.richText.html,imageUrl:this.detail.imageUrl,secondTitle:this.detail.secondTitle,title:this.detail.title},'post',(res)=> {console.log(res);if(res.code==200){uni.showToast({title:"提交成功"})setTimeout(()=>{uni.redirectTo({url:"/pages/school/articleList?status=2"})},1500)}})}} }});}  })  // #endif
},// 富文本框组件添加光标async editFocus() {this.keyboardFlag = true;},// 富文本框组件移除光标editBlur() {this.keyboardFlag = false;},release(isPublic) {this.showSettingLayer = false;this.editorCtx.getContents({success: res => {Object.assign(res, {isPublic: isPublic})this.$emit('editOk', res);}})},
}
}

jinIcon的组件

引入 import jinIcon from ‘./jin-icons.vue’;

注册 components: {jinIcon},

组件的内容如下：

<template><view class="content"><view class="icon" :style="{color: color, fontSize: fontSize}" v-html="type" @click="toclick"></view></view>
</template><script>export default {props: {type: {type: String,default: ''},color: {type: String,default: '#666666'},fontSize: {type: String,default: '34rpx'}},methods: {toclick() {this.$emit('click');}}}
</script><style scoped>.content{display: flex;align-items: center;justify-content: center;}@font-face {font-family: 'jin';/** 阿里巴巴矢量图标库的字体库地址，可以替换自己的字体库地址 **/src: url('https://at.alicdn.com/t/font_1491431_6m7ltjo8wi.ttf') format('truetype');}.icon {font-family: jin !important;font-size: 34rpx;}</style>

uniapp 电商app 富文本框的使用——添加图文功能相关推荐

uniapp 发布文章app 富文本框的使用——添加图文功能
uniapp 富文本框的使用 uniapp中是有富文本框组件的. uniapp中的富文本框组件的使用官网链接:https://uniapp.dcloud.io/component/editor?id= ...
uniapp 电商app签到功能实现
签到功能目前公司所做的电商app要做一个签到送津贴的页面.接口还在开发中,页面已经搭完了. 页面展示如下: 在页面搭建的过程中,遇到几个小问题,下面做一下记录并汇总一下解决方法. uniapp 标题 ...
uniapp 电商app进度条组件的使用（砍价进度条处理）
最近公司的电商app需要做一个砍价的功能,具体UI如下: 下面是我开发的版本,样式基本保持一致. 可以看出,砍价最主要的部分就是砍价进度条的部分. 为了能够实现进度条的功能,我从uniapp插件市场查 ...
uniapp 电商app 手机充值页面
电商app支持手机充值现在很多的电商app都是支持手机充值的,我们公司也实现了这个功能. 功能很简单,写文章主要是为了记录,没有什么技术难点. 获取手机充值配置页面加载的时候,需要展示一个默认运营 ...
uniapp 电商app 下载页面功能实现
下载页面效果图要求如下: 立即邀请按钮是个动态的,上下浮动并且尺寸或大或小的改变,可以通过css3动画来实现二维码是生成的,这个二维码是含有用户邀请码的,如果通过此二维码进行下载app. 点击保存 ...
uniapp 电商app vivo手机进行真机调试
打开开发者选项设置-->更多设置-->关于手机-->点击版本号7次,可以打开开发者选项打开USB调试重新进入: 设置-->更多设置-->开发者选项-->usb ...
uniapp 电商app 步骤条功能的使用
步骤条功能原型图如下图所示: dcloud插件市场中是有现成的组件的: steps步骤条插件地址:https://ext.dcloud.net.cn/plugin?id=34 使用方法 script ...
电商APP首页设计，终于有人讲明白了！
移动端产品设计的难点在于在很小的屏幕上展示所有的业务.屏幕限制和移动端的客户碎片化阅读的习惯和高流失率.对于业务复杂的App产品设计难度更高.电商产品就是典型的复杂业务产品之一,是要展示内容最多.最难 ...
农村电商APP软件开发电商新农村紧跟时代脚步
互联网技术的深入发展让电子商务走向了高潮,不过在一些交通闭塞的乡村地区,电商发展还处于初期阶段.大量农产品从生产到流通渠道的变革,让互联网+农产品成为新型农业发展的重要手段,不仅增加了农业产值提高了农 ...

uniapp 电商app 富文本框的使用——添加图文功能