评论

富文本编辑器封装

将程序富文本封装为temlpate 页面引用只需要几行简单的代码就好了

为了方便大家便捷的使用小程序的富文本编辑器,封装了编辑器,可以直接可以等同于templete引用,引用界面只需要2行代码
效果如图:

使用说明:

1、在需要使用富文本模板页面的WXML文件中添加如下代码:

<import src="/editor/editor"/>
<template is=‘editor’ data=’{{formats:editor_formats}}’/>

2、在需要使用富文本模板页面的WXSS文件中添加如下代码:

@import “/editor/editor.wxss”

3、在需要使用富文本模板页面的js文件中添加如下代码:

   var editorjs = require('../../utils/editor.js')

   //实例化富文本
  onEditorReady() {
   var that = this
   wx.createSelectorQuery().select('#editor').context(function (res) {
    that.editorCtx = res.context
      }).exec()
  },
   //引用editor方法
  editorjs:function(e){
    editorjs.editorfunction(e)
   },
 //富文本样式改变后,向WXML传值,改变按钮选中状态方法
 onStatusChange(e) {
  this.setData({editor_formats: e.detail})
 },
 //设置富文本内容方法
setEditor:function(e){
    this.setData({
    editorhtml:e.detail.html
})

//富文本最终得到的HMTL数据为:this.data.html
},

以下为具体代码:
代码目录位置如图:

(注释:editor.js文件必须放到utils文件夹下,不然手机运行时报错)

edite.wxml:

<template name=“editor”>
<view class=‘editor_bg’>
<view class=‘editor_buttonbg’>
<view class=“iconfont icon-zitijiacu editor_button {{formats.bold ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“bold”></view>
<view class=“iconfont icon-zitixieti editor_button {{formats.italic ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“italic”></view>
<view class=“iconfont icon-zitixiahuaxian editor_button {{formats.underline ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“underline”></view>
<view class=“iconfont icon-zitishanchuxian editor_button {{formats.strike ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“strike”></view>
<view class=“iconfont icon-zuoduiqi editor_button {{formats.align==‘left’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“align” data-value=“left”></view>
<view class=“iconfont icon-juzhongduiqi editor_button {{formats.align==‘center’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“align” data-value=“center”></view>
<view class=“iconfont icon-youduiqi editor_button {{formats.align==‘right’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“align” data-value=“right”></view>
<view class=“iconfont icon-zuoyouduiqi editor_button {{formats.align==‘justify’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“align” data-value=“justify”></view>
<view class=“iconfont icon-line-height editor_button {{formats.lineHeight ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“lineHeight” data-value=“2”></view>
<view class=“iconfont icon-Character-Spacing editor_button {{formats.letterSpacing ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“letterSpacing” data-value=“2em”></view>
<view class=“iconfont icon-722bianjiqi_duanqianju editor_button {{formats.marginTop ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“marginTop” data-value=“20px”></view>
<view class=“iconfont icon-723bianjiqi_duanhouju editor_button {{formats.marginBottom ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“marginBottom” data-value=“20px”></view>
<view class=“iconfont icon-clearedformat editor_button” bindtap=‘editorjs’ data-bind=“removeFormat”></view>
<view class=“iconfont icon-fontsize editor_button {{formats.fontSize===‘24px’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“fontSize” data-value=“24px”></view>
<view class=“iconfont icon-font editor_button {{formats.fontFamily ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“fontFamily” data-value=“Pacifico”></view>
<view class=“iconfont icon-text_color editor_button {{formats.color===’#0000ff’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“color” data-value="#0000ff"></view>
<view class=“iconfont icon-fontbgcolor editor_button {{formats.backgroundColor===’#00ff00’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“backgroundColor” data-value="#00ff00"></view>
<view class=“iconfont icon-date editor_button” bindtap=‘editorjs’ data-bind=“insertDate”></view>
<view class=“iconfont icon–checklist editor_button” bindtap=‘editorjs’ data-bind=“format” data-name=“list” data-value=“check”></view>
<view class=“iconfont icon-youxupailie editor_button {{formats.list===‘ordered’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“list” data-value=“ordered”></view>
<view class=“iconfont icon-wuxupailie editor_button {{formats.list===‘bullet’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“list” data-value=“bullet”></view>
<view class=“iconfont icon-undo editor_button” bindtap=‘editorjs’ data-bind=“undo”></view>
<view class=“iconfont icon-redo editor_button” bindtap=‘editorjs’ data-bind=“redo”></view>
<view class=“iconfont icon-outdent editor_button” bindtap=‘editorjs’ data-bind=“format” data-name=“indent” data-value="-1"></view>
<view class=“iconfont icon-indent editor_button” bindtap=‘editorjs’ data-bind=“format” data-name=“indent” data-value="+1"></view>
<view class=“iconfont icon-fengexian editor_button” bindtap=‘editorjs’ data-bind=“insertDivider”></view>
<view class=“iconfont icon-charutupian editor_button” bindtap=‘editorjs’ data-bind=“insertImage”></view>
<view class=“iconfont icon-format-header-1 editor_button {{formats.header=1 ? ‘editor_button_active’ : ‘’}}" bindtap=‘editorjs’ data-bind=“format” data-name=“header” data-value="{{1}}"></view>
<view class="iconfont icon-zitixiabiao editor_button {{formats.script
=‘sub’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“script” data-value=“sub”></view>
<view class=“iconfont icon-zitishangbiao editor_button {{formats.script===‘super’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“script” data-value=“super”></view>
<view class=“iconfont icon-shanchu editor_button” bindtap=‘editorjs’ data-bind=“clear”></view>
<view class=“iconfont icon-direction-rtl editor_button {{formats.direction===‘rtl’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“direction” data-value=“rtl”></view>
</view>
<editor id=“editor” class=‘editor_area’ placeholder=“开始输入…” showImgSize showImgToolbar showImgResize bindstatuschange=“onStatusChange” bindready=“onEditorReady” bindinput=‘setEditor’>
</editor>
</view>
</template>

editor.js文件:

//引用editor方法,外部唯一暴露接口
function editorfunction(e) {
wx.loadFontFace({
family: ‘Pacifico’,
source: ‘url(“https://sungd.github.io/Pacifico.ttf”)’,
})
//获取当前工作路径,that变量等同于页面本身的this
var pages = getCurrentPages();
var that = pages[pages.length - 1]
var e = e.currentTarget.dataset
//改变文本样式方法
if (e.bind == ‘format’) {
if (!e.name) return
that.editorCtx.format(e.name, e.value)
}
//删除字体样式方法
if (e.bind == ‘removeFormat’) {
that.editorCtx.removeFormat()
}
//快速插入日期方法
if (e.bind == ‘insertDate’) {
var date = new Date()
var formatDate = ${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日
that.editorCtx.insertText({
text: formatDate
})
}
//撤销操作方法
if (e.bind == ‘undo’) {
that.editorCtx.undo()
}
//恢复操作方法
if (e.bind == ‘redo’) {
that.editorCtx.redo()
}
//添加分割线方法
if (e.bind == ‘insertDivider’) {
that.editorCtx.insertDivider()
}
//清除内容方法
if (e.bind == ‘clear’) {
that.editorCtx.clear()
}
//插入图片方法
if (e.bind == ‘insertImage’) {
wx.chooseImage({
count: 1,
sizeType: [‘compressed’], // 可以指定是原图还是压缩图,默认二者都有
sourceType: [‘album’, ‘camera’], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
wx.showLoading({
title: ‘加载中’,
mask: true
})
wx.uploadFile({
url: getApp().globalData.url + ‘activity/uploadimg’,//里填写自己的图片上传方法地址
header: {// 设置请求的 header
‘content-type’: ‘multipart/form-data’
},
filePath: res.tempFilePaths[0],
name: ‘img’,
success(res) {
wx.hideLoading()
var data = JSON.parse(res.data)
if (data.code == 1) {
that.editorCtx.insertImage({
src: data.data,
data: {
id: ‘abcd’,
role: ‘god’
},
})
} else {
wx.showToast({
title: data.data,
icon: ‘none’
})
}
}
})
}
})
}
}

module.exports = {
editorfunction: editorfunction,//引用editor方法,外部唯一暴露接口
}

editor.wxss文件:

/* 整体区域 /
button::after{
border: none;
}
.editor_bg{
padding: 0 10rpx;
width: 730rpx;
background-color: #fff;
font-size: 30rpx;
margin-top:10rpx;
}
/
编辑按钮区域 /
.editor_buttonbg{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 50rpx;
padding-left:18rpx;
}
/
富文本输入区域 /
.editor_area{
background-color: white;
width: 100%;
box-shadow: 2rpx 2rpx 2rpx 2rpx #eee inset;
padding: 0 10rpx;
border-radius: 8rpx;
min-height: 300rpx;
height: auto;
}
/
按钮 /
.editor_button{
width: 60rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
background-color: white;
margin-right: 18rpx;
margin-bottom: 30rpx;
box-shadow: 2rpx 2rpx 2rpx #999;
border-radius: 8rpx;
}
/
已选中按钮 /
.editor_button_active{
color: #06c;
box-shadow: 2rpx 2rpx 2rpx #999 inset;
}
/
引用按钮 /
.iconfont {
font-family: “iconfont” !important;
font-size: 36rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/
字体加粗图标 /
.icon-zitijiacu:before {
content: “\ec8a”;
}
/
字体斜体图标 /
.icon-zitixieti:before {
content: “\ec8f”;
}
/
字体下划线按钮图标 /
.icon-zitixiahuaxian:before {
content: “\ec8e”;
}
/
字体左对齐按钮图标 /
.icon-zuoduiqi:before {
content: “\ec91”;
}
/
字体居中对齐按钮图标 /
.icon-juzhongduiqi:before {
content: “\ec84”;
}
/
字体右对齐按钮图标 /
.icon-youduiqi:before {
content: “\ec87”;
}
/
字体左右对齐按钮图标 /
.icon-zuoyouduiqi:before {
content: “\ec94”;
}
/
文字2倍行距按钮图标 /
.icon-line-height:before {
content: “\e7f8”;
}
/
加大文字间距按钮 /
.icon-Character-Spacing:before {
content: “\e964”;
}
/
上边距加大20px /
.icon-722bianjiqi_duanqianju:before {
content: “\e660”;
}
/
上边距加大20px /
.icon-723bianjiqi_duanhouju:before {
content: “\e65f”;
}
/
删除文字样式 /
.icon-clearedformat:before {
content: “\e67e”;
}
/
更改字体大小 /
.icon-fontsize:before {
content: “\e6fd”;
}
/
更改字体按钮 /
.icon-font:before {
content: “\e684”;
}
/
更改字体背景 /
.icon-text_color:before {
content: “\e72c”;
}
/
更改字体颜色 /
.icon-fontbgcolor:before {
content: “\e678”;
}
/
快速添加日期方法 /
.icon-date:before {
content: “\e63e”;
}
/
添加选择框方法 /
.icon–checklist:before {
content: “\e664”;
}
/
添加有序排列图标方法 /
.icon-youxupailie:before {
content: “\ec86”;
}
/
添加无序排列图标方法 /
.icon-wuxupailie:before {
content: “\ec83”;
}
/
撤销方法 /
.icon-undo:before {
content: “\e633”;
}
/
恢复方法 /
.icon-redo:before {
content: “\e627”;
}
/
左缩进方法 /
.icon-outdent:before {
content: “\e6e8”;
}
/
右缩进方法 /
.icon-indent:before {
content: “\eb28”;
}
/
添加分割线方法 /
.icon-fengexian:before {
content: “\ec7f”;
}
/
添加图片方法 /
.icon-charutupian:before {
content: “\ec82”;
}
/
设置标题1方法 /
.icon-format-header-1:before {
content: “\e860”;
}
/
设置标题2方法 /
.icon-format-header-2:before {
content: “\e75c”;
}
/
设置标题3方法 /
.icon-format-header-3:before {
content: “\e75d”;
}
/
设置标题4方法 /
.icon-format-header-4:before {
content: “\e863”;
}
/
设置标题5方法 /
.icon-format-header-5:before {
content: “\e864”;
}
/
设置标题6方法 /
.icon-format-header-6:before {
content: “\e865”;
}
/
设置文字下角标方法 /
.icon-zitixiabiao:before {
content: “\ec93”;
}
/
设置文字上角标方法 /
.icon-zitishangbiao:before {
content: “\ec8c”;
}
/
清除内容方法 /
.icon-shanchu:before {
content: “\ec7b”;
}
/
设置文字右对齐方法 /
.icon-direction-rtl:before {
content: “\e66e”;
}
.icon-clearup:before {
content: “\e64d”;
}
.icon-preview:before {
content: “\e631”;
}
.icon-baocun:before {
content: “\ec09”;
}
.icon-quanping:before {
content: “\ec13”;
}
.icon-direction-ltr:before {
content: “\e66d”;
}
.icon-selectall:before {
content: “\e62b”;
}
.icon-fuzhi:before {
content: “\ec7a”;
}
.icon-bianjisekuai:before {
content: “\ec7c”;
}
.icon-dianzan:before {
content: “\ec80”;
}
.icon-charulianjie:before {
content: “\ec81”;
}
.icon-yinyong:before {
content: “\ec85”;
}
.icon-zitidaima:before {
content: “\ec88”;
}
.icon-xiaolian:before {
content: “\ec89”;
}
.icon-zitishanchuxian:before {
content: “\ec8b”;
}
.icon-zitibiaoti:before {
content: “\ec8d”;
}
.icon-zitiyanse:before {
content: “\ec90”;
}
.icon-zitiyulan:before {
content: “\ec92”;
}
.icon-duigoux:before {
content: “\ec9e”;
}
.icon-guanbi:before {
content: “\eca0”;
}
.icon-shengyin_shiti:before {
content: “\eca5”;
}
/
引用字体 /
@font-face {font-family: “iconfont”;
src: url(’//at.alicdn.com/t/font_945958_zfsfjju1dim.eot?t=1547618146468’); /
IE9 /
src: url(’//at.alicdn.com/t/font_945958_zfsfjju1dim.eot?t=1547618146468#iefix’) format(‘embedded-opentype’), /
IE6-IE8 /
url(‘data:application/x-font-woff2;charset=utf-8;base64,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’) format(‘woff2’),
url(’//at.alicdn.com/t/font_945958_zfsfjju1dim.woff?t=1547618146468’) format(‘woff’),
url(’//at.alicdn.com/t/font_945958_zfsfjju1dim.ttf?t=1547618146468’) format(‘truetype’), /
chrome, firefox, opera, Safari, Android, iOS 4.2+ /
url(’//at.alicdn.com/t/font_945958_zfsfjju1dim.svg?t=1547618146468#iconfont’) format(‘svg’); /
iOS 4.1- */
}

以上为全部代码,很方便使用,不懂得可以私信我
(顺便吐槽以下,社区发布文章的编辑器真难用…)

最后一次编辑于  2019-11-21  
点赞 5
收藏
评论

15 个评论

  • 布鲁斯没有韦恩
    布鲁斯没有韦恩
    2019-05-22

    虽然觉得很厉害的样子,仍然不知道你说的是什么

    2019-05-22
    赞同 2
    回复
  • 莲墨珺
    莲墨珺
    2019-10-30

    可以给我一个git链接嘛?谢谢啦!!!我是一个在给我们技术找解决方案的设计!

    2019-10-30
    赞同 1
    回复
  • 对不起,我瘦不了😂 😂
    对不起,我瘦不了😂 😂
    2019-07-12

    同求 Git 链接


    2019-07-12
    赞同 1
    回复
  • 姜龙
    姜龙
    2019-06-05

    给个git链接吧


    2019-06-05
    赞同 1
    回复 1
  • 宇里
    宇里
    12小时前

    为什么上传的图片,总是200*200大小,也没看到哪里有限制,求大神解惑

    12小时前
    赞同
    回复
  • 宇里
    宇里
    星期日 21:32

    引入都没有报错,可就是没有任何效果,内容也输不进去


    星期日 21:32
    赞同
    回复
  • MR.Wang
    MR.Wang
    03-17

    感谢!! 就是有些地方 报错了

    需要 修改 把中文 双引号 单引号 全替换 为 英文 双引号 单引号

    三言表达式的 == 有些写成了 =

    wxss 的备注没备注好 需要重新备注

    然后就可以用了!!


    03-17
    赞同
    回复
  • 2020
    2020
    2019-10-05

    作者这个分享有点乱 请问有完整代码链接?谢谢

    2019-10-05
    赞同
    回复
  • 🍎 🍎 🍎
    🍎 🍎 🍎
    2019-08-28

    作者,请问你editor里面placeholder这个默认字体怎么改变?这个斜体很不好看,用了placeholder-class也改不了。



    2019-08-28
    赞同
    回复 1
    • ZHOU
      ZHOU
      03-20
      用placeholder-style直接行内改,垃圾placeholder-class没用
      03-20
      回复
  • Vagrant
    Vagrant
    2019-07-29

    用户选择图片->开始上传图片->回显图片地址

    请问有没有删除图片的方法

    如用户 撤销 、删除 、清空操作,我们应该删除已上传的图片


    2019-07-29
    赞同
    回复 1
    • K
      K
      2019-08-15
      请问有富文本编辑器封装好的代码?
      2019-08-15
      回复

正在加载...

登录 后发表内容