使用uniapp的editor组件，图片上传预览等各种功能菜单的使用

只做记录，详细的api看官网

<scroll-view scroll-y class="page"><view class="container"><view class="page-body"><view class='wrapper'><view class='toolbar' @tap="format"><view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view><view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></view><view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></view><view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></view><view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align"data-value="left"></view><view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align"data-value="center"></view><view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align"data-value="right"></view><view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi" data-name="align"data-value="justify"></view><view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight"data-value="2"></view><view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing" data-name="letterSpacing"data-value="2em"></view><view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop"data-value="20px"></view><view :class="formats.previewarginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"data-name="marginBottom" data-value="20px"></view><view class="iconfont icon-clearedformat" @tap="removeFormat"></view><view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font" data-name="fontFamily"data-value="Pacifico"></view><view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize" data-name="fontSize"data-value="24px"></view><view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color" data-name="color"data-value="#0000ff"></view><view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''" class="iconfont icon-fontbgcolor"data-name="backgroundColor" data-value="#00ff00"></view><view class="iconfont icon-date" @tap="insertDate"></view><view class="iconfont icon--checklist" data-name="list" data-value="check"></view><view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list"data-value="ordered"></view><view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list"data-value="bullet"></view><view class="iconfont icon-undo" @tap="undo"></view><view class="iconfont icon-redo" @tap="redo"></view><view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view><view class="iconfont icon-indent" data-name="indent" data-value="+1"></view><view class="iconfont icon-fengexian" @tap="insertDivider"></view><view class="iconfont icon-charutupian" @tap="insertImage"></view><view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header":data-value="1"></view><view :class="formats.header === 2 ? 'ql-active' : ''" class="iconfont icon-format-header-2" data-name="header":data-value="2"></view><view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script"data-value="sub"></view><view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script"data-value="super"></view><view class="iconfont icon-shanchu" @tap="clear"></view><view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl" data-name="direction"data-value="rtl"></view></view><editor id="editor" class="ql-container" placeholder="开始输入..." showImgSize showImgToolbar showImgResize@statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady"></editor></view><button type="primary" @tap="submit">提交</button></view></view>
</scroll-view>

对应的javascript

<script>export default {name: 'activity-detail',data() {return {hdid:"",myHtml:"",readOnly: false,formats: {}}},methods: {//提交按钮submit(){let that = this;this.editorCtx.getContents({success: function(res) {// var content = {//   html: res.html,//   text: res.text,//   delta: res.delta,// }that.myHtml = res.html;uni.request({url:that.api.HDJSUpdate , data: {hdid:that.hdid,hdjs:that.myHtml},success: (res) => {console.log("上传html")console.log(res.data);if(res.data.status == "0"){uni.showModal({title: '发布成功',content: '是否返回活动列表？',success: function (res) {if (res.confirm) {uni.reLaunch({url: 'index?refresh=true'});console.log('用户点击确定');} else if (res.cancel) {console.log('用户点击取消');}}});}else{that.showToast(res.data.msg)}},fail() {that.showToast("系统异常，请联系开发！")}});}})},update(){//获取一下是否有数据let that = this;uni.request({url:that.api.HDJSGet , data: {hdid:that.hdid},success: (res) => {// console.log("获取html")//       console.log(res.data.hdjs);if(res.data.status == "0"){if(res.data.hdjs != null){that.myHtml = res.data.hdjs;// console.log("显示html");// console.log(that.myHtml)that.editorCtx.setContents({"html":that.myHtml});}}else{that.showToast(res.data.msg)}},fail() {that.showToast("系统异常，请联系开发！")}});},// 返回上一页myBack() {uni.navigateBack({delta: 1});},readOnlyChange() {this.readOnly = !this.readOnly},onEditorReady() {let that = this;console.log("初始化完成")console.log(that.myHtml)uni.createSelectorQuery().select('#editor').context((res) => {this.editorCtx = res.context;this.update();}).exec();},undo() {this.editorCtx.undo()},redo() {this.editorCtx.redo()},format(e) {let {name,value} = e.target.datasetif (!name) return// console.log('format', name, value)this.editorCtx.format(name, value)},onStatusChange(e) {const formats = e.detailthis.formats = formats},insertDivider() {this.editorCtx.insertDivider({success: function() {console.log('insert divider success')}})},clear() {this.editorCtx.clear({success: function(res) {console.log("clear success")}})},removeFormat() {this.editorCtx.removeFormat()},insertDate() {const date = new Date()const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`this.editorCtx.insertText({text: formatDate})},insertImage() {let that = this;uni.chooseImage({count: 1,success: (res) => {this.showLoading("图片上传中");//上传文件的临时路径const tempFilePaths = res.tempFilePaths;uni.uploadFile({url: that.api.FilesUpload,filePath: tempFilePaths[0],name: 'file',success: (uploadFileRes) => {console.log("编辑详情的时候返回照片地址")console.log(uploadFileRes)uni.hideLoading();const back = JSON.parse(uploadFileRes.data);if(back.status=="0"){console.log(that.host+back.filepath[0])that.editorCtx.insertImage({src: that.host+back.filepath[0],alt: '图像',success: function() {}})}else{that.showToast(back.msg)}},fail:() =>{uni.hideLoading();that.showToast("图片上传失败，请联系开发！")}});}})}},mounted() {},onLoad(option) {this.hdid = option.hdid;uni.loadFontFace({family: 'Pacifico',source: 'url("https://sungd.github.io/Pacifico.ttf")'})},};
</script>

插件配套的css

 @import "./editor-icon.css";.wrapper {padding: 5px;}.iconfont {display: inline-block;padding: 8px 8px;width: 24px;height: 24px;cursor: pointer;font-size: 20px;}.toolbar {box-sizing: border-box;border-bottom: 0;font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;}.ql-container {box-sizing: border-box;padding: 12px 15px;width: 100%;min-height: 30vh;height: auto;background: #fff;margin-top: 20px;font-size: 16px;line-height: 1.5;}.ql-active {color: #06c;}

editor-icon.css

@font-face {font-family: "iconfont";src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/editor-icon.ttf') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-redo:before {content: "\e627";
}.icon-undo:before {content: "\e633";
}.icon-indent:before {content: "\eb28";
}.icon-outdent:before {content: "\e6e8";
}.icon-fontsize:before {content: "\e6fd";
}.icon-format-header-1:before {content: "\e860";
}.icon-format-header-4:before {content: "\e863";
}.icon-format-header-5:before {content: "\e864";
}.icon-format-header-6:before {content: "\e865";
}.icon-clearup:before {content: "\e64d";
}.icon-preview:before {content: "\e631";
}.icon-date:before {content: "\e63e";
}.icon-fontbgcolor:before {content: "\e678";
}.icon-clearedformat:before {content: "\e67e";
}.icon-font:before {content: "\e684";
}.icon-723bianjiqi_duanhouju:before {content: "\e65f";
}.icon-722bianjiqi_duanqianju:before {content: "\e660";
}.icon-text_color:before {content: "\e72c";
}.icon-format-header-2:before {content: "\e75c";
}.icon-format-header-3:before {content: "\e75d";
}.icon--checklist:before {content: "\e664";
}.icon-baocun:before {content: "\ec09";
}.icon-line-height:before {content: "\e7f8";
}.icon-quanping:before {content: "\ec13";
}.icon-direction-rtl:before {content: "\e66e";
}.icon-direction-ltr:before {content: "\e66d";
}.icon-selectall:before {content: "\e62b";
}.icon-fuzhi:before {content: "\ec7a";
}.icon-shanchu:before {content: "\ec7b";
}.icon-bianjisekuai:before {content: "\ec7c";
}.icon-fengexian:before {content: "\ec7f";
}.icon-dianzan:before {content: "\ec80";
}.icon-charulianjie:before {content: "\ec81";
}.icon-charutupian:before {content: "\ec82";
}.icon-wuxupailie:before {content: "\ec83";
}.icon-juzhongduiqi:before {content: "\ec84";
}.icon-yinyong:before {content: "\ec85";
}.icon-youxupailie:before {content: "\ec86";
}.icon-youduiqi:before {content: "\ec87";
}.icon-zitidaima:before {content: "\ec88";
}.icon-xiaolian:before {content: "\ec89";
}.icon-zitijiacu:before {content: "\ec8a";
}.icon-zitishanchuxian:before {content: "\ec8b";
}.icon-zitishangbiao:before {content: "\ec8c";
}.icon-zitibiaoti:before {content: "\ec8d";
}.icon-zitixiahuaxian:before {content: "\ec8e";
}.icon-zitixieti:before {content: "\ec8f";
}.icon-zitiyanse:before {content: "\ec90";
}.icon-zuoduiqi:before {content: "\ec91";
}.icon-zitiyulan:before {content: "\ec92";
}.icon-zitixiabiao:before {content: "\ec93";
}.icon-zuoyouduiqi:before {content: "\ec94";
}.icon-duigoux:before {content: "\ec9e";
}.icon-guanbi:before {content: "\eca0";
}.icon-shengyin_shiti:before {content: "\eca5";
}.icon-Character-Spacing:before {content: "\e964";
}

使用uniapp的editor组件，图片上传预览等各种功能菜单的使用相关推荐

若依分离版组件图片上传预览
文章 ImageUpload 文件上传组件 ImagePreview 图片预览组件 ImageUpload 文件上传组件 <el-form-item prop = "targetImg ...
Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
java 图片上传预览 demo_图片上传预览
[实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...
ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
Bootstrap 3 : 图片上传预览 image upload preview
头部均为: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= ...
模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

使用uniapp的editor组件，图片上传预览等各种功能菜单的使用

使用uniapp的editor组件，图片上传预览等各种功能菜单的使用相关推荐

最新文章

热门文章