uniapp 中 editor的使用

有复用需求所以做成了组件

editor.vue

<template><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.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" @blur="getContents"></editor></view></view></view>
</template><script>export default {data() {return {readOnly: false,formats: {},timer:null,}},props:["editorDetail"],mounted(){this.onEditorReady()// 将数据渲染到富文本内this.timer = setInterval(()=>{if(this.editorDetail){clearInterval(this.timer)this.editorCtx.setContents({html:this.editorDetail,success(res) {}})}},100)},methods: {// 失去焦点时，获取富文本的内容getContents() {let _this = thisthis.editorCtx.getContents({success(res) {_this.$emit('getContents', res.html)}})},readOnlyChange() {this.readOnly = !this.readOnly},onEditorReady() {uni.createSelectorQuery().select('#editor').context((res) => {this.editorCtx = res.context}).exec()},// onEditorReady(){    //     uni.createSelectorQuery().select('#editor').context((res) => {    //     this.editorCtx = res.context    //      this.editorCtx.setContents({    //                 html:this.EditGoodsDetail.content    //this.EditGoodsDetail.content为赋值内容。    //         })    //     }).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() {uni.chooseImage({count: 1,success: (res) => {this.editorCtx.insertImage({src: res.tempFilePaths[0],alt: '图像',success: function() {console.log('insert image success')}})}})}},onLoad() {uni.loadFontFace({family: 'Pacifico',source: 'url("https://sungd.github.io/Pacifico.ttf")'})},}
</script><style>@import "./cs.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;}
</style>

使用

<editor1 :editorDetail=infos.content  @getContents="getContents" class="bg" style="height: 90vh;"></editor1>

//引入
<script>
import editor1 from '@/components/editor/editor.vue'export default {components: {editor1},data() {return {infos:{content:'', //绑定值}}},methods: {getContents(html){this.infos.content = html},}
}
</script>

补充文件css

字体文件

https://download.csdn.net/download/weixin_49133874/44085597

cs.css文件

@font-face {font-family: "iconfont";src: url('./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的使用相关推荐

个人技术总结——uniapp中editor组件的使用并用图床上传图片
目录一.技术概述二.技术详述 2.1 如何使用editor 2.2 如何实现富文本中添加图片三.问题与解决四.总结五.参考文献一.技术概述在web开发时,我们可以使用contentedi ...
uni-app的editor的富文本编辑器
在官方文档中教程真是也太简单了, 大家可以在官方代码中找到完整的内容 https://github.com/dcloudio/hello-uniapp/blob/master/pages/compon ...
Uni-app 中使用 .ttf 字体图标
1.相关文件存放位置 Uni-app 中的 .ttf 字体文件存放位置:/src/static/uni.ttf. 引入字体文件 uni.ttf 的 CSS 文件存放位置:/src/common/uni ...
UNIAPP中H5微信登录
UNIAPP中H5微信登录 UNIapp中自带封装好的接口,但是在打包成H5中,微信登录对于新手来说网上教程比较少,大部分是分享的教程 H5微信登录之前你需要先在微信公众平台配置js接口安全域名,切记 ...
uniapp中使用微信jssdk
在做自定义分享时,用到了微信jssdk,记录一下. 声明:本文演示uniapp中使用jssdk,示例为网页自定义分享 npm方式使用下方指令进行安装,正文部分为非npm方式. npm install ...
uni-app中使用腾讯位置服务实现小程序地图选点功能
文章目录 1. 官方文档 2. 小程序添加插件 3. HBuilder配置 4. 配置代码 5. 页面代码 1. 官方文档技术选定(地图选点插件) (对应官网:https://lbs.qq.com/ ...
项目安装使用uuid_在uniapp中使用fingerprint2实现游客设备标识
前言: 这里的fingerprint不是uni-app的指纹模块,是一个使用javascript开发的设备指纹采集器,通过这个库可以定位正在使用的浏览器具备的特征唯一标识.如系统字体.屏幕分辨率.浏览 ...
uni-app中的数据绑定
uni-app中的数据绑定在页面中需要定义数据,和我们之前的vue一模一样,直接在data中定义数据即可 export default {data () {return {msg: 'hello-u ...
uni-app中的样式
uni-app中的样式 rpx 即响应式px,一种根据屏幕宽度自适应的动态单位.以750宽的屏幕为基准,750rpx恰好为屏幕宽度.屏幕变宽,rpx 实际显示效果会等比放大. 使用@import语句可 ...

uniapp 中 editor的使用

editor.vue

使用

uniapp 中 editor的使用相关推荐

最新文章

热门文章