小程序editor富文本编辑器的使用（适用新手）

注:要在真机调试才能看到 效果
第一次使用editor富文本编辑器的时候，我参照文档来使用，如下

官方文档使用.png

1.相信很多小伙和我一样，赋值粘贴，保存，然后就看模拟器效果，结果。。。。。看到一片空白的
怎么回事，我使用的方法不对？完全是用官网的例子呀
然后各种参数一一对过，发现没毛病啊，都一样是，为啥没有我要的效果呢，我要的是下面的效果啊

QQ截图20190816134222.png

然后，我看到这么一句话

QQ截图20190816134736.png
然后直接在开发工具打开，发现猫腻了，原来下图的都是字体图标，需要自己引入字体图标 QQ截图20190816134852.png
也就是说字体图标不是这个富文本的一部分，是独立开的，然后给这些字体图标增加点击事件，去调用富文本的api
// 下面是重点，如何引入
QQ截图20190816135234.png QQ截图20190816135302.png

还要另外加样式

.iconfont {
  display: inline-block;
  padding: 8px 8px;
  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-container {
  box-sizing: border-box;
  padding: 12px 15px;
  width: 100%;
  min-height: 30vh;
  height: auto;
  /* border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc; */
  background: #fff;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.5;
}

.ql-active {
  color: #06c;
}

QQ截图20190816151551.png

20-8-31
发现小程序修改了源码，我把原本的源码发一下

<import src="../common/head.wxml" />
<import src="../common/foot.wxml" />

<view class="container">
  <!-- <template is="head" data="{{title: 'editor'}}"/> -->
  <view class="page-body">
    <view class='wrapper'>
      <view class='toolbar' bindtap="format">
        <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
        <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
        <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
        <i class="iconfont icon-zitishanchuxian {{formats.strike ? 'ql-active' : ''}}" data-name="strike"></i>
        <i class="iconfont icon-zuoduiqi {{formats.align === 'left' ? 'ql-active' : ''}}" data-name="align" data-value="left"></i>
        <i class="iconfont icon-juzhongduiqi {{formats.align === 'center' ? 'ql-active' : ''}}" data-name="align" data-value="center"></i>
        <i class="iconfont icon-youduiqi {{formats.align === 'right' ? 'ql-active' : ''}}" data-name="align" data-value="right"></i>
        <i class="iconfont icon-zuoyouduiqi {{formats.align === 'justify' ? 'ql-active' : ''}}" data-name="align" data-value="justify"></i>
        <i class="iconfont icon-line-height {{formats.lineHeight ? 'ql-active' : ''}}" data-name="lineHeight" data-value="2"></i>
        <i class="iconfont icon-Character-Spacing {{formats.letterSpacing ? 'ql-active' : ''}}" data-name="letterSpacing" data-value="2em"></i>
        <i class="iconfont icon-722bianjiqi_duanqianju {{formats.marginTop ? 'ql-active' : ''}}" data-name="marginTop" data-value="20px"></i>
        <i class="iconfont icon-723bianjiqi_duanhouju {{formats.micon-previewarginBottom ? 'ql-active' : ''}}" data-name="marginBottom" data-value="20px"></i>
        <i class="iconfont icon-clearedformat" bindtap="removeFormat"></i>
        <i class="iconfont icon-font {{formats.fontFamily ? 'ql-active' : ''}}" data-name="fontFamily" data-value="Pacifico"></i>
        <i class="iconfont icon-fontsize {{formats.fontSize === '24px' ? 'ql-active' : ''}}" data-name="fontSize" data-value="24px"></i>

        <i class="iconfont icon-text_color {{formats.color === '#0000ff' ? 'ql-active' : ''}}" data-name="color" data-value="#0000ff"></i>
        <i class="iconfont icon-fontbgcolor {{formats.backgroundColor === '#00ff00' ? 'ql-active' : ''}}" data-name="backgroundColor" data-value="#00ff00"></i>

        <i class="iconfont icon-date" bindtap="insertDate"></i>
        <i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
        <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
        <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i>
        <i class="iconfont icon-undo" bindtap="undo"></i>
        <i class="iconfont icon-redo" bindtap="redo"></i>

        <i class="iconfont icon-outdent" data-name="indent" data-value="-1"></i>
        <i class="iconfont icon-indent" data-name="indent" data-value="+1"></i>
        <i class="iconfont icon-fengexian" bindtap="insertDivider"></i>
        <i class="iconfont icon-charutupian" bindtap="insertImage"></i>
        <i class="iconfont icon-format-header-1 {{formats.header === 1 ? 'ql-active' : ''}}" data-name="header" data-value="{{1}}"></i>
        <i class="iconfont icon-zitixiabiao {{formats.script === 'sub' ? 'ql-active' : ''}}" data-name="script" data-value="sub"></i>
        <i class="iconfont icon-zitishangbiao {{formats.script === 'super' ? 'ql-active' : ''}}" data-name="script" data-value="super"></i>
        <!-- <i class="iconfont icon-quanping"></i> -->
        <i class="iconfont icon-shanchu" bindtap="clear"></i>
        <i class="iconfont icon-direction-rtl {{formats.direction === 'rtl' ? 'ql-active' : ''}}" data-name="direction" data-value="rtl"></i>

      </view>

      <editor id="editor" class="ql-container" placeholder="{{placeholder}}" showImgSize showImgToolbar showImgResize bindstatuschange="onStatusChange"  read-only="{{readOnly}}" bindready="onEditorReady">
      </editor>

      <!-- <view>
        <button bindtap="readOnlyChange">{{readOnly ? '可写':'只读'}}</button>
      </view> -->
    </view>
  </view>

  <template is="foot" />
</view>