小程序：在mpvue中使用小程序本身自带得富文本控件editor

清疚 2021-12-12 11:53 214阅读 0赞

# 资料 #

[editor][] 在这里有一个官方得例子，可以在开发者工具中查看

[api EditorContext][]

# 在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 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>

[editor]: https://developers.weixin.qq.com/miniprogram/dev/component/editor.html
[api EditorContext]: https://developers.weixin.qq.com/miniprogram/dev/api/media/editor/EditorContext.html