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

资料

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>