资料
editor 在这里有一个官方得例子,可以在开发者工具中查看
在mpvue中使用
模仿官方例子,iconfont.css
可以在官方给的实例中找到
<template>
<pagelayout>
<div class="newArticle">
<div class="acticle-title">
<van-cell-group>
<van-field :label="titleName" :value="title" placeholder="请填写文章标题" :border="false" />
</van-cell-group>
</div>
<div class="article-edit">
<div class="second-title">
文章内容
</div>
<div class="article-main">
<div class='toolbar' @click="format">
<i v-if="config.bold" :class="'iconfont icon-zitijiacu ' + (formats.bold ? 'ql-active' : '')" data-name="bold"></i>
<i v-if="config.italic" :class="'iconfont icon-zitixieti ' + (formats.italic ? 'ql-active' : '')" data-name="italic"></i>
<i v-if="config.underline" :class="'iconfont icon-zitixiahuaxian ' + (formats.bold ? 'ql-active' : '')" data-name="underline"></i>
<i v-if="config.strike" :class="'iconfont icon-zitishanchuxian ' + (formats.bold ? 'ql-active' : '')" data-name="strike"></i>
<i v-if="config.alignLeft" :class="'iconfont icon-zuoduiqi ' + (formats.align === 'left' ? 'ql-active' : '')" data-name="align" data-value="left"></i>
<i v-if="config.alignCenter" :class="'iconfont icon-juzhongduiqi ' + (formats.align === 'center' ? 'ql-active' : '')" data-name="align" data-value="center"></i>
<i v-if="config.alignRight" :class="'iconfont icon-youduiqi ' + (formats.align === 'right' ? 'ql-active' : '')" data-name="align" data-value="right"></i>
<i v-if="config.justify" :class="'iconfont icon-zuoyouduiqi ' + (formats.align === 'justify' ? 'ql-active' : '')" data-name="align" data-value="justify"></i>
<i v-if="config.lineHeight" :class="'iconfont icon-line-height ' + (formats.bold ? 'ql-active' : '')" data-name="lineHeight" data-value="2"></i>
<i v-if="config.letterSpacing" :class="'iconfont icon-Character-Spacing ' + (formats.letterSpacing ? 'ql-active' : '')" data-name="letterSpacing" data-value="2em"></i>
<i v-if="config.marginTop" :class="'iconfont icon-722bianjiqi_duanqianju ' + (formats.marginTop ? 'ql-active' : '')" data-name="marginTop" data-value="20px"></i>
<i v-if="config.marginBottom" :class="'iconfont icon-723bianjiqi_duanhouju ' + (formats.micon-previewarginBottom ? 'ql-active' : '')" data-name="marginBottom" data-value="20px"></i>
<i v-if="config.removeFormat" class="iconfont icon-clearedformat" @click="removeFormat"></i>
<i v-if="config.fontFamily" :class="'iconfont icon-font ' + (formats.fontFamily ? 'ql-active' : '')" data-name="fontFamily" data-value="Pacifico"></i>
<i v-if="config.fontSize" :class="'iconfont icon-fontsize ' + (formats.fontSize === '24px' ? 'ql-active' : '')" data-name="fontSize" data-value="24px"></i>
<i v-if="config.color" :class="'iconfont icon-text_color ' + (formats.color === '#0000ff' ? 'ql-active' : '')" data-name="color" data-value="#0000ff"></i>
<i v-if="config.backgroundColor" :class="'iconfont icon-fontbgcolor ' + (formats.backgroundColor === '#00ff00' ? 'ql-active' : '')" data-name="backgroundColor" data-value="#00ff00"></i>
<i v-if="config.insertDate" class="iconfont icon-date" @click="insertDate"></i>
<i v-if="config.listCheck" class="iconfont icon--checklist" data-name="list" data-value="check"></i>
<i v-if="config.listOrdered" :class="'iconfont icon-youxupailie ' + (formats.list === 'ordered' ? 'ql-active' : '')" data-name="list" data-value="ordered"></i>
<i v-if="config.listBullet" :class="'iconfont icon-wuxupailie ' + (formats.list === 'bullet' ? 'ql-active' : '')" data-name="list" data-value="bullet"></i>
<i v-if="config.undo" class="iconfont icon-undo" @click="undo"></i>
<i v-if="config.redo" class="iconfont icon-redo" @click="redo"></i>
<i v-if="config.indentReduce" class="iconfont icon-outdent" data-name="indent" data-value="-1"></i>
<i v-if="config.indentAdd" class="iconfont icon-indent" data-name="indent" data-value="+1"></i>
<i v-if="config.insertDivider" class="iconfont icon-fengexian" @click="insertDivider"></i>
<i v-if="config.insertImage" class="iconfont icon-charutupian" @click="insertImage"></i>
<i v-if="config.header" :class="'iconfont icon-format-header-1 ' + (formats.header === 1 ? 'ql-active' : '')" data-name="header" data-value="1"></i>
<i v-if="config.scriptSub" :class="'iconfont icon-zitixiabiao ' + (formats.script === 'sub' ? 'ql-active' : '')" data-name="script" data-value="sub"></i>
<i v-if="config.scriptSuper" :class="'iconfont icon-zitishangbiao ' + (formats.script === 'super' ? 'ql-active' : '')" data-name="script" data-value="super"></i>
<!-- <i class="iconfont icon-quanping"></i> -->
<i v-if="config.clear" class="iconfont icon-shanchu" @click="clear"></i>
<i v-if="config.direction" :class="'iconfont icon-direction-rtl ' + (formats.direction === 'rtl' ? 'ql-active' : '')" data-name="direction" data-value="rtl"></i>
</div>
<editor id="editor" class="ql-container" :placeholder="placeholder" showImgSize showImgToolbar showImgResize @statuschange="onStatusChange" @ready="onEditorReady">
</editor>
</div>
</div>
</div>
</pagelayout>
</template>
<script>
import pagelayout from '@/components/layout'
export default {
config: {
navigationBarTitleText: '编辑文章',
navigationBarTextStyle: 'black',
navigationBarBackgroundColor: '#FFFFFF'
},
components: {
pagelayout
},
data () {
return {
titleName: '文章标题',
title: '',
main: '',
placeholder: '请输入文章内容',
editorCtx: null,
formats: {},
config: { /** 配置粗体 */
bold: true,
italic: true,
underline: true,
strike: true,
alignLeft: false,
alignCenter: false,
alignRight: false,
justify: true,
lineHeight: true,
letterSpacing: true,
marginBottom: true,
removeFormat: true,
fontFamily: true,
fontSize: true,
color: true,
backgroundColor: true,
insertDate: true,
listCheck: true,
listOrdered: true,
listBullet: true,
undo: true,
redo: true,
indentReduce: false,
indentAdd: false,
insertDivider: false,
insertImage: false,
header: false,
scriptSub: false,
scriptSuper: false,
clear: false,
direction: false
}
}
},
methods: {
format (e) {
console.log('format')
console.log(e)
let { name, value } = e.target.dataset
if (!name) return
this.editorCtx.format(name, value)
},
onEditorReady () {
console.log('onEditorReady')
const that = this
wx.createSelectorQuery().select('#editor').context(function (res) {
that.editorCtx = res.context
console.log(that.editorCtx)
}).exec()
},
onStatusChange (e) {
console.log(e)
this.formats = e.mp.detail
},
removeFormat () {
this.editorCtx.removeFormat()
},
insertDate () {
const date = new Date()
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
this.editorCtx.insertText({
text: formatDate
})
},
undo () {
this.editorCtx.undo()
},
redo () {
this.editorCtx.redo()
},
insertDivider () {
this.editorCtx.insertDivider({
success: function () {
console.log('insert divider success')
}
})
},
clear () {
this.editorCtx.clear({
success: function (res) {
console.log('clear success')
}
})
},
insertImage () {
const that = this
wx.chooseImage({
count: 1,
success: function () {
that.editorCtx.insertImage({
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543767268337&di=5a3bbfaeb30149b2afd33a3c7aaa4ead&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fimages%2F20151031%2Ftooopen_sy_147004931368.jpg',
data: {
id: 'abcd',
role: 'god'
},
success: function () {
console.log('insert image success')
}
})
}
})
}
},
onLoad () {
console.log('onLoad')
},
onShow () {
console.log('onShow')
},
/** 页面加载完成时调用函数 */
mounted () {
console.log('mounted')
console.log(wx.api)
const that = this
wx.createSelectorQuery().select('#editor').context(function (res) {
that.editorCtx = res.context
console.log(that.editorCtx)
}).exec()
}
}
</script>
<style>
@import url("./iconfont.css");
.wrapper {
padding: 5px;
}
.iconfont {
display: inline-block;
padding: 8px 12px;
width: 24px;
height: 24px;
cursor: pointer;
font-size: 20px;
}
.toolbar {
box-sizing: border-box;
/* border: 1px solid #ccc; */
border-bottom: 0;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.ql-active {
color: #06c;
}
.ql-container {
box-sizing: border-box;
padding: 12px 0px;
width: 100%;
height: auto;
border-top: 1px solid #ccc;
font-size: 16px;
line-height: 1.5;
}
</style>