<template> <viewclass="container"> <viewclass="page-body"> <viewclass='wrapper'> <viewclass='toolbar' @tap="format"style="height: 130px;overflow-y: auto;"> <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> <viewclass="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> <viewclass="iconfont icon-date" @tap="insertDate"></view> <viewclass="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> <viewclass="iconfont icon-undo" @tap="undo"></view> <viewclass="iconfont icon-redo" @tap="redo"></view> <viewclass="iconfont icon-outdent"data-name="indent"data-value="-1"></view> <viewclass="iconfont icon-indent"data-name="indent"data-value="+1"></view> <viewclass="iconfont icon-fengexian" @tap="insertDivider"></view> <viewclass="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> <viewclass="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> <viewclass="editor-wrapper"> <editorid="editor"class="ql-container"placeholder="开始输入..."showImgSizeshowImgToolbarshowImgResize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady" @blur="getContents"> </editor> </view> </view> </view> </view></template><script> import { upload } from '../../common/common.js' export default { data() { return { readOnly: false, formats: {}, timer:null, } }, props:["store_detail"], mounted(){ this.onEditorReady() // 将数据渲染到富文本内 this.timer = setInterval(()=>{ if(this.store_detail){ clearInterval(this.timer) this.editorCtx.setContents({ html:this.store_detail, success(res) { } }) } },100) }, methods: { // 失去焦点时，获取富文本的内容 getContents() { let _this = this this.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() }, undo() { this.editorCtx.undo() }, redo() { this.editorCtx.redo() }, format(e) { let { name, value } = e.target.dataset if (!name) return // console.log('format', name, value) this.editorCtx.format(name, value) }, onStatusChange(e) { const formats = e.detail this.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() { upload().then(data => { this.editorCtx.insertImage({ src: data[0].img1, alt: '图像', success: function() { console.log('insert image success') } }) }) } }, onLoad() { uni.loadFontFace({ family: 'Pacifico', source: 'url("https://sungd.github.io/Pacifico.ttf")' }) }, }</script><style> @import "./editor-icon.css"; .page-body { height: calc(100vh - var(--window-top) - var(--status-bar-height)); } .wrapper { height: 100%; } .editor-wrapper { height: calc(100vh - var(--window-top) - var(--status-bar-height) - 180px); background: #fff; } .iconfont { display: inline-block; padding: 8px 8px; width: 24px; height: 24px; cursor: pointer; font-size: 20px; margin-right: 10px; } .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: 20vh; height: 100%; /* margin-top: 20px; */ font-size: 16px; line-height: 1.5; } .ql-active { color: #06c; }</style>
夜雨聆风
