├── README.md
├── changelog.md
├── components
    ├── robin-color-picker
    │   └── robin-color-picker.vue
    ├── robin-editor-header
    │   └── robin-editor-header.vue
    └── robin-editor
    │   ├── editor-icon.css
    │   ├── editor-icon.ttf
    │   └── robin-editor.vue
└── package.json


/README.md:
--------------------------------------------------------------------------------
 1 | # 富文本编辑器插件
 2 | uniapp 富文本编辑器插件
 3 | 
 4 | ## 兼容性
 5 | |微信小程序|H5|APP|
 6 | |:--:|:--:|:--:|
 7 | |√|√ |x|
 8 | 
 9 | App键盘弹出界面高度未解决
10 | 
11 | ## 使用方式
12 | 无需引入,直接使用
13 | 
14 | ```
15 | 在 `template` 中使用组件
16 | ```html
17 | <robin-editor class="editor" 
18 |     @cancel="hideEditor" 
19 |     @save="saveEditor" 
20 |     v-model="html"
21 |     :imageUploader="uploadImg" 
22 |     :muiltImage="true">
23 | </robin-editor>
24 | ```
25 | 
26 | ## Demo
27 | https://github.com/health901/uniapp-editor-demo
28 | 
29 | ## 属性说明
30 | |属性|类型|默认值|说明|
31 | |--|--|--|--|
32 | |v-model|String| |富文本,双向绑定|
33 | |imageUploader|function(img,callback)| |上传图片处理函数 接受参数 img:本地图片地址,callback:上传成功回调传入图片链接|
34 | |muiltImage|Boolean|false|是否支持多图上传|
35 | |compressImage|Boolean|true|图片上传是否压缩|
36 | |previewMode|Boolean|false|预览模式,不可编辑|
37 | |autoHideToolbar|Boolean|false|失去焦点时自动隐藏工具栏|
38 | |tools|Array|['bold', 'italic', 'underline', 'strike', 'align-left', 'align-center', 'align-right', 'remove', 'font', 'color', 'backgroundColor','image', 'clear', 'preview']|工具栏|
39 | 
40 | ### 工具栏
41 | |名称|值|
42 | |--|--|
43 | |加粗|`bold`|
44 | |斜体|`italic`|
45 | |下划线|`underline`|
46 | |删除线|`strike`|
47 | |右对齐|`align-left`|
48 | |居中|`align-center`|
49 | |左对齐|`align-right`|
50 | |清除格式|`remove`|
51 | |字体大小|`font`|
52 | |字体颜色|`color`|
53 | |背景色|`backgroundColor`|
54 | |插入图片|`image`|
55 | |清空|`clear`|
56 | |预览|`preview`|
57 | |插入日期|`date`|
58 | |列表|`list-check`,`list-ordered`,`list-bullet`|
59 | |上下标|`sub`,`super`|
60 | |撤销,恢复撤销|`undo`,`redo`|
61 | |缩进|`indent`,`outdent`|
62 | |分割线|`divider`|
63 | |标题|`h1`,`h2`,`h3`,`h4`,`h5`,`h6`|
64 | |书写方向|`rtl`|
65 | 
66 | ## 事件说明
67 | |事件|说明|参数|
68 | |--|--|--|
69 | |cancel|点击取消按钮|
70 | |save|点击保存按钮|e={html,text,delta}|
71 | 
72 | ## 依赖
73 | |组件|链接|备注|
74 | |---|--|--|
75 | |颜色选择器ColorPicker<sup>[[1]](#注)</sup>|https://ext.dcloud.net.cn/plugin?id=1237|字体颜色,背景色|
76 | 
77 | 
78 | ## 注
79 | 1. 修改:添加按钮,支持预设颜色值
80 | 


--------------------------------------------------------------------------------
/changelog.md:
--------------------------------------------------------------------------------
1 | ## 2.1.0（2021-05-27）
2 | 修复因为uni-popup组件升级导致的popup组件报错的问题
3 | ## 2.0.0（2021-02-08）
4 | 迁移至uni_modules


--------------------------------------------------------------------------------
/components/robin-color-picker/robin-color-picker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <view class="content">
  3 |         <robin-editor-header class="head" @cancel="cancel" @save="confirm"></robin-editor-header>
  4 |         <view class="color-picker">
  5 |             <view class="color-name">{{ colorName }}</view>
  6 |             <view class="show-view" :style="{ background: colorName }"></view>
  7 |             <view class="hue-view" @touchstart="pickHue" @touchmove="pickHue"><text class="anchor" :style="{ left: hueView.anchorLeft + 'px' }"></text></view>
  8 |             <view class="color-view" @touchstart="pickColor" @touchmove="pickColor" :style="{ backgroundColor: 'hsl(' + hueView.H + ', 100%, 50%)' }">
  9 |                 <text class="anchor" :style="{ top: colorView.anchorTop + 'px', left: colorView.anchorLeft + 'px' }"></text>
 10 |             </view>
 11 |         </view>
 12 |     </view>
 13 | </template>
 14 | 
 15 | <script>
 16 | import popup from '@/uni_modules/uni-popup/components/uni-popup/popup.js';
 17 | export default {
 18 |     mixins: [popup],
 19 |     props: {
 20 |         color: {
 21 |             type: String,
 22 |             default: ''
 23 |         }
 24 |     },
 25 |     data() {
 26 |         return {
 27 |             hueView: {},
 28 |             colorView: {},
 29 |             colorName: '',
 30 |             hueLeft: 0.5, // 色相选择器初始位置 [0, 1]
 31 |             anchorTop: 0.5, // 颜色选择器初始 top [0, 1]
 32 |             anchorLeft: 0.5 // 颜色选择器初始 left [0, 1],
 33 |         };
 34 |     },
 35 |     created() {
 36 |         this.popup.messageChild = this;
 37 |     },
 38 |     methods: {
 39 |         open: function() {
 40 |             this.popup.open();
 41 |             setTimeout(() => {
 42 |                 this.init();
 43 |             }, this.popup.duration);
 44 |         },
 45 |         init() {
 46 |             const reg = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})*$/;
 47 |             if (this.color !== '' && reg.test(this.color)) {
 48 |                 this.getColorOffset();
 49 |             }
 50 |             Promise.all([this.getHueViewOffset(), this.getColorViewOffset()]).then(() => {
 51 |                 this.colorName = this.getColorString(); // 根据 HLS 计算 RGB 字符串
 52 |             });
 53 |         },
 54 |         getHueViewOffset() {
 55 |             // 获取色相选择区域尺寸
 56 |             return new Promise(resolve =>
 57 |                 uni
 58 |                     .createSelectorQuery()
 59 |                     .in(this)
 60 |                     .select('.hue-view')
 61 |                     .boundingClientRect(data => {
 62 |                         this.hueView = {
 63 |                             ...data,
 64 |                             anchorLeft: data.width * this.hueLeft,
 65 |                             H: this.hueLeft * 360
 66 |                         };
 67 |                         resolve();
 68 |                     })
 69 |                     .exec()
 70 |             );
 71 |         },
 72 |         getColorViewOffset() {
 73 |             // 获取颜色选择区域尺寸
 74 |             return new Promise(resolve =>
 75 |                 uni
 76 |                     .createSelectorQuery()
 77 |                     .in(this)
 78 |                     .select('.color-view')
 79 |                     .boundingClientRect(data => {
 80 |                         this.colorView = {
 81 |                             ...data,
 82 |                             anchorTop: data.height * this.anchorTop,
 83 |                             anchorLeft: data.width * this.anchorLeft,
 84 |                             S: this.anchorLeft,
 85 |                             L: 1 - this.anchorLeft * 0.5 - this.anchorTop / (this.anchorLeft + 1)
 86 |                         };
 87 |                         resolve();
 88 |                     })
 89 |                     .exec()
 90 |             );
 91 |         },
 92 |         getColorString() {
 93 |             // 获取 RGB 颜色字符串
 94 |             const arr = hslToRgb(this.hueView.anchorLeft / this.hueView.width, this.colorView.S, this.colorView.L);
 95 |             const r = arr[0].toString(16).length === 1 ? `0${arr[0].toString(16)}` : arr[0].toString(16);
 96 |             const g = arr[1].toString(16).length === 1 ? `0${arr[1].toString(16)}` : arr[1].toString(16);
 97 |             const b = arr[2].toString(16).length === 1 ? `0${arr[2].toString(16)}` : arr[2].toString(16);
 98 |             return `#${r.toUpperCase()}${g.toUpperCase()}${b.toUpperCase()}`;
 99 |         },
100 |         getColorOffset() {
101 |             var color = this.color.substr(1);
102 |             color = color.length == 6 ? color : color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2);
103 |             const r = parseInt('0x' + color.substr(0, 2));
104 |             const g = parseInt('0x' + color.substr(2, 2));
105 |             const b = parseInt('0x' + color.substr(4, 2));
106 |             const arr = rgbToHsl(r, g, b);
107 |             this.hueLeft = arr[0];
108 |             this.anchorLeft = arr[1];
109 |             this.anchorTop = (1 - arr[1] * 0.5 - arr[2]) * (arr[1] + 1);
110 |         },
111 |         pickColor(e) {
112 |             // 选择颜色
113 |             const top = e.touches[0].clientY - this.colorView.top;
114 |             const left = e.touches[0].clientX - this.colorView.left;
115 |             if (top < 0) {
116 |                 this.colorView.anchorTop = 0;
117 |             } else if (top > this.colorView.height) {
118 |                 this.colorView.anchorTop = this.colorView.height;
119 |             } else {
120 |                 this.colorView.anchorTop = top;
121 |             }
122 |             if (left < 0) {
123 |                 this.colorView.anchorLeft = 0;
124 |             } else if (left > this.colorView.width) {
125 |                 this.colorView.anchorLeft = this.colorView.width;
126 |             } else {
127 |                 this.colorView.anchorLeft = e.touches[0].clientX - this.colorView.left;
128 |             }
129 |             this.colorView.S = this.colorView.anchorLeft / this.colorView.width;
130 |             this.colorView.L = this.floor(1 - this.colorView.S * 0.5 - this.colorView.anchorTop / this.colorView.height / (this.colorView.S + 1));
131 |             this.colorName = this.getColorString(); // 根据 HLS 计算 RGB 字符串
132 |         },
133 |         pickHue(e) {
134 |             // 选择色相
135 |             if (e.touches[0].clientX >= this.hueView.left && e.touches[0].clientX <= this.hueView.right) {
136 |                 this.hueView.anchorLeft = e.touches[0].clientX - this.hueView.left;
137 |                 this.hueView.H = (this.hueView.anchorLeft / this.hueView.width) * 360;
138 |                 this.colorName = this.getColorString(); // 根据 HLS 计算 RGB 字符串
139 |             }
140 |         },
141 |         floor(num) {
142 |             return num < 0.09 ? 0 : num;
143 |         },
144 |         confirm() {
145 |             this.$emit('confirm', {
146 |                 color: this.colorName
147 |             });
148 |             this.popup.close();
149 |         },
150 |         cancel() {
151 |             this.$emit('cancel');
152 |             this.popup.close();
153 |         },
154 |         close() {}
155 |     }
156 | };
157 | 
158 | function hslToRgb(h, s, l) {
159 |     // HSL 转 RGB 方法
160 |     var r, g, b;
161 |     if (s == 0) {
162 |         r = g = b = l; // achromatic
163 |     } else {
164 |         var hue2rgb = function hue2rgb(p, q, t) {
165 |             if (t < 0) t += 1;
166 |             if (t > 1) t -= 1;
167 |             if (t < 1 / 6) return p + (q - p) * 6 * t;
168 |             if (t < 1 / 2) return q;
169 |             if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
170 |             return p;
171 |         };
172 |         var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
173 |         var p = 2 * l - q;
174 |         r = hue2rgb(p, q, h + 1 / 3);
175 |         g = hue2rgb(p, q, h);
176 |         b = hue2rgb(p, q, h - 1 / 3);
177 |     }
178 |     return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
179 | }
180 | 
181 | function rgbToHsl(r, g, b) {
182 |     (r /= 255), (g /= 255), (b /= 255);
183 |     var max = Math.max(r, g, b),
184 |         min = Math.min(r, g, b);
185 |     var h,
186 |         s,
187 |         l = (max + min) / 2;
188 |     if (max == min) {
189 |         h = s = 0; // achromatic
190 |     } else {
191 |         var d = max - min;
192 |         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
193 |         switch (max) {
194 |             case r:
195 |                 h = (g - b) / d + (g < b ? 6 : 0);
196 |                 break;
197 |             case g:
198 |                 h = (b - r) / d + 2;
199 |                 break;
200 |             case b:
201 |                 h = (r - g) / d + 4;
202 |                 break;
203 |         }
204 |         h /= 6;
205 |     }
206 | 
207 |     var round = function(n, l) {
208 |         return Math.round(n * Math.pow(10, l)) / Math.pow(10, l);
209 |     };
210 |     return [round(h, 3), round(s, 3), round(l, 3)];
211 | }
212 | </script>
213 | 
214 | <style lang="scss" scoped>
215 | .content {
216 |     height: 100%;
217 |     display: flex;
218 |     align-items: center;
219 |     flex-direction: column;
220 |     justify-content: center;
221 |     background-color: #fff;
222 | 
223 |     .head {
224 |         width: 100%;
225 |     }
226 | 
227 |     .color-picker {
228 |         display: flex;
229 |         align-items: center;
230 |         flex-direction: column;
231 |         justify-content: center;
232 | 
233 |         .color-name {
234 |             margin: 23rpx;
235 |             font-size: 45rpx;
236 |             font-weight: bold;
237 |             letter-spacing: 8rpx;
238 |         }
239 | 
240 |         .show-view {
241 |             height: 56rpx;
242 |             width: 567rpx;
243 |         }
244 | 
245 |         .hue-view {
246 |             width: 567rpx;
247 |             height: 56rpx;
248 |             margin: 12rpx 0;
249 |             position: relative;
250 |             background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
251 | 
252 |             .anchor {
253 |                 width: 12rpx;
254 |                 height: 100%;
255 |                 position: absolute;
256 |                 background: #ffffff;
257 |                 transform: translate(-50%);
258 |                 box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.6);
259 |             }
260 |         }
261 | 
262 |         .color-view {
263 |             width: 567rpx;
264 |             height: 345rpx;
265 |             position: relative;
266 |             margin-bottom: 12upx;
267 | 
268 |             &::before,
269 |             &::after {
270 |                 content: '';
271 |                 top: 0;
272 |                 left: 0;
273 |                 width: 100%;
274 |                 height: 100%;
275 |                 position: absolute;
276 |             }
277 | 
278 |             &::before {
279 |                 background: linear-gradient(to right, white, transparent);
280 |             }
281 | 
282 |             &::after {
283 |                 background: linear-gradient(to top, black, transparent);
284 |             }
285 | 
286 |             .anchor {
287 |                 z-index: 1;
288 |                 width: 24rpx;
289 |                 height: 24rpx;
290 |                 border-radius: 50%;
291 |                 position: absolute;
292 |                 border: 4rpx solid #ffffff;
293 |                 background: rgba(0, 0, 0, 0.3);
294 |                 transform: translate(-50%, -50%);
295 |             }
296 |         }
297 |     }
298 | }
299 | </style>
300 | 


--------------------------------------------------------------------------------
/components/robin-editor-header/robin-editor-header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <view class="head">
 3 |         <view class="btn left" @tap="cancel" v-if="labelCancel">{{ labelCancel }}</view>
 4 |         <view class="btn right" @tap="save" v-if="labelConfirm">{{ labelConfirm }}</view>
 5 |     </view>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |     name: 'robin-editor-header',
11 |     props: {
12 |         labelCancel: {
13 |             type: String,
14 |             default: '取消'
15 |         },
16 |         labelConfirm: {
17 |             type: String,
18 |             default: '确定'
19 |         }
20 |     },
21 |     methods: {
22 |         cancel: function() {
23 |             this.$emit('cancel');
24 |         },
25 |         save: function() {
26 |             this.$emit('save');
27 |         }
28 |     }
29 | };
30 | </script>
31 | 
32 | <style lang="scss" scoped>
33 | .head {
34 |     display: flex;
35 |     justify-content: space-between;
36 |     width: 100%;
37 |     height: 100%;
38 |     border-bottom: 1px #eee solid;
39 |     // box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
40 |     background: #fff;
41 |     .btn {
42 |         display: block;
43 |         width: 150upx;
44 |         height: 80upx;
45 |         line-height: 80upx;
46 |         font-size: 30upx;
47 |         color: #666;
48 |         padding-left: 20upx;
49 |         text-align: center;
50 |         &.left {
51 |             float: left;
52 |         }
53 |         &.right {
54 |             float: right;
55 |         }
56 |     }
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/components/robin-editor/editor-icon.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 | 	font-family: "iconfont";
  3 | 	src: url('~./editor-icon.ttf') format('truetype');
  4 | }
  5 | 
  6 | .iconfont {
  7 |   font-family: "iconfont" !important;
  8 |   font-size: 16px;
  9 |   font-style: normal;
 10 |   -webkit-font-smoothing: antialiased;
 11 |   -moz-osx-font-smoothing: grayscale;
 12 | }
 13 | 
 14 | .icon-redo:before {
 15 |   content: "\e627";
 16 | }
 17 | 
 18 | .icon-undo:before {
 19 |   content: "\e633";
 20 | }
 21 | 
 22 | .icon-indent:before {
 23 |   content: "\eb28";
 24 | }
 25 | 
 26 | .icon-outdent:before {
 27 |   content: "\e6e8";
 28 | }
 29 | 
 30 | .icon-fontsize:before {
 31 |   content: "\e6fd";
 32 | }
 33 | 
 34 | .icon-format-header-1:before {
 35 |   content: "\e860";
 36 | }
 37 | 
 38 | .icon-format-header-4:before {
 39 |   content: "\e863";
 40 | }
 41 | 
 42 | .icon-format-header-5:before {
 43 |   content: "\e864";
 44 | }
 45 | 
 46 | .icon-format-header-6:before {
 47 |   content: "\e865";
 48 | }
 49 | 
 50 | .icon-clearup:before {
 51 |   content: "\e64d";
 52 | }
 53 | 
 54 | .icon-preview:before {
 55 |   content: "\e631";
 56 | }
 57 | 
 58 | .icon-date:before {
 59 |   content: "\e63e";
 60 | }
 61 | 
 62 | .icon-fontbgcolor:before {
 63 |   content: "\e678";
 64 | }
 65 | 
 66 | .icon-clearedformat:before {
 67 |   content: "\e67e";
 68 | }
 69 | 
 70 | .icon-font:before {
 71 |   content: "\e684";
 72 | }
 73 | 
 74 | .icon-723bianjiqi_duanhouju:before {
 75 |   content: "\e65f";
 76 | }
 77 | 
 78 | .icon-722bianjiqi_duanqianju:before {
 79 |   content: "\e660";
 80 | }
 81 | 
 82 | .icon-text_color:before {
 83 |   content: "\e72c";
 84 | }
 85 | 
 86 | .icon-format-header-2:before {
 87 |   content: "\e75c";
 88 | }
 89 | 
 90 | .icon-format-header-3:before {
 91 |   content: "\e75d";
 92 | }
 93 | 
 94 | .icon--checklist:before {
 95 |   content: "\e664";
 96 | }
 97 | 
 98 | .icon-baocun:before {
 99 |   content: "\ec09";
100 | }
101 | 
102 | .icon-line-height:before {
103 |   content: "\e7f8";
104 | }
105 | 
106 | .icon-quanping:before {
107 |   content: "\ec13";
108 | }
109 | 
110 | .icon-direction-rtl:before {
111 |   content: "\e66e";
112 | }
113 | 
114 | .icon-direction-ltr:before {
115 |   content: "\e66d";
116 | }
117 | 
118 | .icon-selectall:before {
119 |   content: "\e62b";
120 | }
121 | 
122 | .icon-fuzhi:before {
123 |   content: "\ec7a";
124 | }
125 | 
126 | .icon-shanchu:before {
127 |   content: "\ec7b";
128 | }
129 | 
130 | .icon-bianjisekuai:before {
131 |   content: "\ec7c";
132 | }
133 | 
134 | .icon-fengexian:before {
135 |   content: "\ec7f";
136 | }
137 | 
138 | .icon-dianzan:before {
139 |   content: "\ec80";
140 | }
141 | 
142 | .icon-charulianjie:before {
143 |   content: "\ec81";
144 | }
145 | 
146 | .icon-charutupian:before {
147 |   content: "\ec82";
148 | }
149 | 
150 | .icon-wuxupailie:before {
151 |   content: "\ec83";
152 | }
153 | 
154 | .icon-juzhongduiqi:before {
155 |   content: "\ec84";
156 | }
157 | 
158 | .icon-yinyong:before {
159 |   content: "\ec85";
160 | }
161 | 
162 | .icon-youxupailie:before {
163 |   content: "\ec86";
164 | }
165 | 
166 | .icon-youduiqi:before {
167 |   content: "\ec87";
168 | }
169 | 
170 | .icon-zitidaima:before {
171 |   content: "\ec88";
172 | }
173 | 
174 | .icon-xiaolian:before {
175 |   content: "\ec89";
176 | }
177 | 
178 | .icon-zitijiacu:before {
179 |   content: "\ec8a";
180 | }
181 | 
182 | .icon-zitishanchuxian:before {
183 |   content: "\ec8b";
184 | }
185 | 
186 | .icon-zitishangbiao:before {
187 |   content: "\ec8c";
188 | }
189 | 
190 | .icon-zitibiaoti:before {
191 |   content: "\ec8d";
192 | }
193 | 
194 | .icon-zitixiahuaxian:before {
195 |   content: "\ec8e";
196 | }
197 | 
198 | .icon-zitixieti:before {
199 |   content: "\ec8f";
200 | }
201 | 
202 | .icon-zitiyanse:before {
203 |   content: "\ec90";
204 | }
205 | 
206 | .icon-zuoduiqi:before {
207 |   content: "\ec91";
208 | }
209 | 
210 | .icon-zitiyulan:before {
211 |   content: "\ec92";
212 | }
213 | 
214 | .icon-zitixiabiao:before {
215 |   content: "\ec93";
216 | }
217 | 
218 | .icon-zuoyouduiqi:before {
219 |   content: "\ec94";
220 | }
221 | 
222 | .icon-duigoux:before {
223 |   content: "\ec9e";
224 | }
225 | 
226 | .icon-guanbi:before {
227 |   content: "\eca0";
228 | }
229 | 
230 | .icon-shengyin_shiti:before {
231 |   content: "\eca5";
232 | }
233 | 
234 | .icon-Character-Spacing:before {
235 |   content: "\e964";
236 | }
237 | 


--------------------------------------------------------------------------------
/components/robin-editor/editor-icon.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/health901/uniapp-editor/b9fb2aac6f6764bcd5f2d164e39a982ef12d5887/components/robin-editor/editor-icon.ttf


--------------------------------------------------------------------------------
/components/robin-editor/robin-editor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <view class="wrapper" :style="{ 'padding-top': keyboardHeight }">
  3 |         <robin-editor-header class="header" @cancel="cancel" @save="save" :labelConfirm="labelConfirm" :labelCancel="labelCancel"></robin-editor-header>
  4 |         <view :style="'height:' + editorHeight + 'px;'" class="container" v-if="!previewMode" v-show="!showPreview">
  5 |             <editor
  6 |                 v-if="!previewMode"
  7 |                 v-show="!showPreview"
  8 |                 id="editor"
  9 |                 class="ql-container"
 10 |                 placeholder="开始输入..."
 11 |                 showImgSize
 12 |                 showImgToolbar
 13 |                 showImgResize
 14 |                 @statuschange="onStatusChange"
 15 |                 :read-only="readOnly"
 16 |                 @ready="onEditorReady"
 17 |             ></editor>
 18 |         </view>
 19 |         <view class="toolbar" @tap="format" v-if="!showPreview" v-show="keyboardHeight || !autoHideToolbar" :style="'bottom:' + (isIOS ? keyboardHeight : 0) + 'px'">
 20 |             <block v-for="(t, i) in tools" :key="i">
 21 |                 <view v-if="t == 'bold'" :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold" data-label="加粗"></view>
 22 |                 <view v-if="t == 'italic'" :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic" data-label="斜体"></view>
 23 |                 <view v-if="t == 'underline'" :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline" data-label="下滑线"></view>
 24 |                 <view v-if="t == 'strike'" :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike" data-label="删除线"></view>
 25 |                 <view
 26 |                     v-if="t == 'align-left'"
 27 |                     :class="formats.align === 'left' || !formats.align ? 'ql-active' : ''"
 28 |                     class="iconfont icon-zuoduiqi"
 29 |                     data-name="align"
 30 |                     data-value="left"
 31 |                     data-label="居左"
 32 |                 ></view>
 33 |                 <view
 34 |                     v-if="t == 'align-center'"
 35 |                     :class="formats.align === 'center' ? 'ql-active' : ''"
 36 |                     class="iconfont icon-juzhongduiqi"
 37 |                     data-name="align"
 38 |                     data-value="center"
 39 |                     data-label="居中"
 40 |                 ></view>
 41 |                 <view
 42 |                     v-if="t == 'align-right'"
 43 |                     :class="formats.align === 'right' ? 'ql-active' : ''"
 44 |                     class="iconfont icon-youduiqi"
 45 |                     data-name="align"
 46 |                     data-value="right"
 47 |                     data-label="居右"
 48 |                 ></view>
 49 |                 <view
 50 |                     v-if="t == 'align-justify'"
 51 |                     :class="formats.align === 'justify' ? 'ql-active' : ''"
 52 |                     class="iconfont icon-zuoyouduiqi"
 53 |                     data-name="align"
 54 |                     data-value="justify"
 55 |                     data-label="平铺"
 56 |                 ></view>
 57 |                 <!--                  <view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight"
 58 |                              data-value="2"></view>
 59 |                     <view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing" data-name="letterSpacing"
 60 |                              data-value="2em"></view>
 61 |                     <view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop"
 62 |                              data-value="20px"></view>
 63 |                     <view :class="formats.previewarginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"
 64 |                              data-name="marginBottom" data-value="20px"></view> -->
 65 |                 <view v-if="t == 'remove'" class="iconfont icon-clearedformat" @tap.stop="removeFormat"></view>
 66 |                 <picker v-if="t == 'font'" class="iconfont" mode="selector" :range="fontSizeRange" @change="fontSize"><view class="icon-fontsize"></view></picker>
 67 |                 <view
 68 |                     v-if="t == 'color'"
 69 |                     :style="fontColor != '#FFFFFF' ? 'color:' + formats.color : ''"
 70 |                     class="iconfont icon-text_color"
 71 |                     data-name="color"
 72 |                     @tap.stop="openColor"
 73 |                 ></view>
 74 |                 <view
 75 |                     v-if="t == 'backgroundColor'"
 76 |                     :style="bgColor ? 'color:' + formats.backgroundColor : ''"
 77 |                     class="iconfont icon-fontbgcolor"
 78 |                     data-name="backgroundColor"
 79 |                     @tap.stop="openColor"
 80 |                 ></view>
 81 |                 <view v-if="t == 'image'" class="iconfont icon-charutupian" @tap.stop="insertImage"></view>
 82 |                 <view v-if="t == 'clear'" class="iconfont icon-shanchu" @tap.stop="clear"></view>
 83 |                 <view v-if="t == 'preview'" class="iconfont icon-preview" @tap.stop="preview"></view>
 84 |                 <view v-if="t == 'date'" class="iconfont icon-date" @tap="insertDate"></view>
 85 |                 <view v-if="t == 'list-check'" class="iconfont icon-checklist" data-name="list" data-value="check"></view>
 86 |                 <view
 87 |                     v-if="t == 'list-ordered'"
 88 |                     :class="formats.list === 'ordered' ? 'ql-active' : ''"
 89 |                     class="iconfont icon-youxupailie"
 90 |                     data-name="list"
 91 |                     data-value="ordered"
 92 |                 ></view>
 93 |                 <view v-if="t == 'list-bullet'" :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list" data-value="bullet"></view>
 94 |                 <view v-if="t == 'undo'" class="iconfont icon-undo" @tap="undo"></view>
 95 |                 <view v-if="t == 'redo'" class="iconfont icon-redo" @tap="redo"></view>
 96 |                 <view v-if="t == 'outdent'" class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
 97 |                 <view v-if="t == 'indent'" class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
 98 |                 <view v-if="t == 'divider'" class="iconfont icon-fengexian" @tap="insertDivider"></view>
 99 |                 <view v-if="t == 'h1'" :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header" :data-value="1"></view>
100 |                 <view v-if="t == 'h2'" :class="formats.header === 2 ? 'ql-active' : ''" class="iconfont icon-format-header-2" data-name="header" :data-value="2"></view>
101 |                 <view v-if="t == 'h3'" :class="formats.header === 3 ? 'ql-active' : ''" class="iconfont icon-format-header-3" data-name="header" :data-value="3"></view>
102 |                 <view v-if="t == 'h4'" :class="formats.header === 4 ? 'ql-active' : ''" class="iconfont icon-format-header-4" data-name="header" :data-value="4"></view>
103 |                 <view v-if="t == 'h5'" :class="formats.header === 5 ? 'ql-active' : ''" class="iconfont icon-format-header-5" data-name="header" :data-value="5"></view>
104 |                 <view v-if="t == 'h6'" :class="formats.header === 6 ? 'ql-active' : ''" class="iconfont icon-format-header-6" data-name="header" :data-value="6"></view>
105 |                 <view v-if="t == 'sub'" :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script" data-value="sub"></view>
106 |                 <view v-if="t == 'super'" :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script" data-value="super"></view>
107 |                 <view
108 |                     v-if="t == 'rtl'"
109 |                     :class="formats.direction === 'rtl' ? 'ql-active' : ''"
110 |                     class="iconfont icon-direction-rtl"
111 |                     data-name="direction"
112 |                     :data-value="formats.direction === 'rtl' ? '' : 'rtl'"
113 |                 ></view>
114 |             </block>
115 |         </view>
116 |         <uni-popup type="bottom"><robin-color-picker :color="color" @confirm="colorChanged" ref="color"></robin-color-picker></uni-popup>
117 |         <view class="preview" v-show="showPreview"><rich-text :nodes="htmlData" class="previewNodes"></rich-text></view>
118 |     </view>
119 | </template>
120 | 
121 | <script>
122 | export default {
123 |     props: {
124 |         value: {
125 |             type: String
126 |         },
127 |         imageUploader: {
128 |             type: Function
129 |         },
130 |         muiltImage: {
131 |             type: Boolean,
132 |             default: false
133 |         },
134 |         compressImage: {
135 |             type: Boolean,
136 |             default: false
137 |         },
138 |         previewMode: {
139 |             type: Boolean,
140 |             default: false
141 |         },
142 |         autoHideToolbar: {
143 |             type: Boolean,
144 |             default: false
145 |         },
146 |         tools: {
147 |             type: Array,
148 |             default: function() {
149 |                 return [
150 |                     'bold',
151 |                     'italic',
152 |                     'underline',
153 |                     'strike',
154 |                     'align-left',
155 |                     'align-center',
156 |                     'align-right',
157 |                     'remove',
158 |                     'font',
159 |                     'color',
160 |                     'backgroundColor',
161 |                     'image',
162 |                     'clear',
163 |                     'preview'
164 |                 ];
165 |             }
166 |         }
167 |     },
168 |     data() {
169 |         return {
170 |             show: true,
171 |             readOnly: false,
172 |             formats: {},
173 |             fontColor: '#000000',
174 |             bgColor: '',
175 |             color: '',
176 |             colorPickerName: '',
177 |             showColor: true,
178 |             fontSizeRange: [10, 12, 14, 16, 18, 24, 32],
179 |             showPreview: false,
180 |             htmlData: '',
181 |             html: '',
182 |             keyboardHeight: 0,
183 |             editorHeight: 0,
184 |             isIOS: false
185 |         };
186 |     },
187 |     watch: {
188 |         value: function(newvar) {
189 |             this.html = newvar;
190 |         },
191 |         html: function(newvar) {
192 |             if (this.previewMode) {
193 |                 this.previewData(this.html);
194 |             }
195 |             if (this.editorCtx) {
196 |                 this.editorCtx.setContents({
197 |                     html: this.html
198 |                 });
199 |             }
200 |         }
201 |     },
202 |     created() {
203 |         this.html = this.value;
204 |     },
205 |     mounted: function() {
206 |         const platform = uni.getSystemInfoSync().platform;
207 |         this.isIOS = platform === 'ios';
208 |         if (this.previewMode) {
209 |             this.previewData(this.html);
210 |         }
211 |         let keyboardHeight = 0;
212 |         this.updatePosition(0);
213 |         uni.onKeyboardHeightChange(res => {
214 |             if (res.height === keyboardHeight) return;
215 |             const duration = res.height > 0 ? res.duration * 1000 : 0;
216 |             keyboardHeight = res.height;
217 |             setTimeout(() => {
218 |                 uni.pageScrollTo({
219 |                     scrollTop: 0,
220 |                     success: () => {
221 |                         this.updatePosition(keyboardHeight);
222 |                         this.editorCtx && this.editorCtx.scrollIntoView();
223 |                     }
224 |                 });
225 |             }, duration);
226 |         });
227 |     },
228 |     computed: {
229 |         labelConfirm: function() {
230 |             return this.showPreview ? '关闭' : '保存';
231 |         },
232 |         labelCancel: function() {
233 |             return this.showPreview ? '' : '取消';
234 |         }
235 |     },
236 |     methods: {
237 |         updatePosition(keyboardHeight) {
238 |             const { windowHeight, windowWidth, platform } = uni.getSystemInfoSync();
239 |             const rpx = windowWidth / 750;
240 |             let titleHeight = 0;
241 |             //#ifdef H5
242 |             titleHeight = 44; //H5标题栏高度
243 |             //#endif
244 |             const toolbarHeight = (70 * Math.ceil(this.tools.length / 15) + 1) * rpx; //底部工具栏高度
245 | 
246 |             const bodyHeight = windowHeight - titleHeight;
247 |             this.keyboardHeight = keyboardHeight;
248 |             this.editorHeight = keyboardHeight > 0 ? bodyHeight - keyboardHeight - toolbarHeight : this.autoHideToolbar ? bodyHeight : bodyHeight - toolbarHeight;
249 |         },
250 |         openColor(e) {
251 |             var name = e.currentTarget.dataset.name;
252 |             var color = this.formats[name];
253 |             this.colorPickerName = name;
254 |             if (name == 'backgroundColor' && !color) {
255 |                 color = '#FFFFFF';
256 |             }
257 |             if (name == 'color' && !color) {
258 |                 color = '#000000';
259 |             }
260 |             this.color = color;
261 |             this.$refs.color.open(color);
262 |             
263 |         },
264 |         colorChanged(e) {
265 |             let label = '';
266 |             switch (this.colorPickerName) {
267 |                 case 'backgroundColor':
268 |                     if (e.color == '#FFFFFF') {
269 |                         e.color = '';
270 |                     }
271 |                     this.bgColor = e.color;
272 |                     label = '背景色';
273 |                     break;
274 |                 case 'color':
275 |                     this.fontColor = e.color;
276 |                     label = '颜色';
277 |                     break;
278 |             }
279 |             this._format(this.colorPickerName, e.color, label + e.color);
280 |         },
281 |         readOnlyChange() {
282 |             this.readOnly = !this.readOnly;
283 |         },
284 |         onEditorReady() {
285 |             uni.createSelectorQuery()
286 |                 .in(this)
287 |                 .select('#editor')
288 |                 .context(res => {
289 |                     this.editorCtx = res.context;
290 |                     if (this.html) {
291 |                         this.editorCtx.setContents({
292 |                             html: this.html
293 |                         });
294 |                     }
295 |                 })
296 |                 .exec();
297 |         },
298 |         undo() {
299 |             this.editorCtx.undo();
300 |             this.toast('撤销');
301 |         },
302 |         redo() {
303 |             this.editorCtx.redo();
304 |             this.toast('重做');
305 |         },
306 |         format(e) {
307 |             let { name, value, label } = e.target.dataset;
308 |             if (!name) return;
309 |             this._format(name, value, label);
310 |         },
311 |         _format(name, value, label) {
312 |             this.editorCtx.format(name, value);
313 |             this.toast(label);
314 |         },
315 |         toast(label) {
316 |             uni.showToast({
317 |                 duration: 600,
318 |                 icon: 'none',
319 |                 title: label
320 |             });
321 |         },
322 |         onStatusChange(e) {
323 |             const formats = e.detail;
324 |             this.formats = formats;
325 |         },
326 |         insertDivider() {
327 |             this.editorCtx.insertDivider({
328 |                 success: function() {
329 |                     this.toast('插入分割线');
330 |                 }
331 |             });
332 |         },
333 |         clear() {
334 |             this.editorCtx.clear({
335 |                 success: res => {
336 |                     this.toast('清空');
337 |                 }
338 |             });
339 |         },
340 |         removeFormat() {
341 |             this.editorCtx.removeFormat();
342 |             this.toast('清除格式');
343 |         },
344 |         insertDate() {
345 |             const date = new Date();
346 |             const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
347 |             this.editorCtx.insertText({
348 |                 text: formatDate
349 |             });
350 |             this.toast('插入日期');
351 |         },
352 |         insertImage() {
353 |             let params = {};
354 |             params.count = this.muiltImage ? 9 : 1;
355 |             params.sizeType = this.compressImage ? ['compressed'] : ['original'];
356 |             uni.chooseImage({
357 |                 ...params,
358 |                 success: res => {
359 |                     res.tempFilePaths.map(path => {
360 |                         this.imageUploader(path, url => {
361 |                             this.editorCtx.insertImage({
362 |                                 src: url,
363 |                                 alt: '图像'
364 |                             });
365 |                         });
366 |                     });
367 |                 }
368 |             });
369 |         },
370 |         fontSize(e) {
371 |             const index = e.detail.value;
372 |             const fz = this.fontSizeRange[index] + 'px';
373 |             this._format('fontSize', fz, '字体大小:' + fz);
374 |         },
375 |         cancel() {
376 |             this.$emit('cancel');
377 |         },
378 |         save() {
379 |             if (this.showPreview) {
380 |                 if (this.previewMode) {
381 |                     this.cancel();
382 |                 } else {
383 |                     this.showPreview = false;
384 |                 }
385 |             } else {
386 |                 this.editorCtx.getContents({
387 |                     success: res => {
388 |                         this.$emit('save', res);
389 |                         this.$emit('input', res.html);
390 |                     }
391 |                 });
392 |             }
393 |         },
394 |         previewData: function(html) {
395 |             this.htmlData = html.replace(/\<img/gi, '<img style="max-width:100%;height:auto"');
396 |             this.showPreview = true;
397 |         },
398 |         preview: function() {
399 |             this.editorCtx.getContents({
400 |                 success: res => {
401 |                     this.previewData(res.html);
402 |                 }
403 |             });
404 |         }
405 |     }
406 | };
407 | </script>
408 | 
409 | <style lang="scss" scoped>
410 | @import './editor-icon.css';
411 | 
412 | .wrapper {
413 |     padding: 5px;
414 |     width: 100%;
415 |     position: relative;
416 |     .header {
417 |         width: 100%;
418 |         position: fixed;
419 |         z-index: 9;
420 |         left: 0;
421 |         height: 75rpx;
422 |         /* #ifndef H5 */
423 |         top: 0;
424 |         /* #endif */
425 |         /* #ifdef H5 */
426 |         top: 44px;
427 |         /* #endif */
428 |     }
429 | 
430 |     .container {
431 |         width: 100%;
432 |         margin-top: 75rpx;
433 |         background: #fff;
434 | 
435 |         .ql-container {
436 |             box-sizing: border-box;
437 |             width: 100%;
438 |             height: 100%;
439 |             font-size: 16px;
440 |             line-height: 1.5;
441 |             overflow: auto;
442 |             padding: 20rpx;
443 |         }
444 |     }
445 | 
446 |     .toolbar {
447 |         position: fixed;
448 |         width: 100%;
449 |         left: 0;
450 |         bottom: 0;
451 |         box-sizing: border-box;
452 |         font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
453 |         background-color: #fff;
454 |         border-top: 1px solid #eee;
455 |         line-height: 50rpx;
456 | 
457 |         .iconfont {
458 |             display: inline-block;
459 |             padding: 10rpx 0;
460 |             width: 50rpx;
461 |             text-align: center;
462 |             font-size: 34rpx;
463 |             box-sizing: border-box;
464 |         }
465 |     }
466 | }
467 | 
468 | .preview {
469 |     width: 100%;
470 |     margin-top: 90rpx;
471 | 
472 |     .previewNodes {
473 |         width: 100%;
474 |         word-break: break-all;
475 |     }
476 | }
477 | 
478 | .ql-active {
479 |     color: #06c;
480 | }
481 | </style>
482 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "id": "robin-editor",
 3 |     "displayName": "robin-editor",
 4 |     "version": "2.1.0",
 5 |     "description": "基于原生editor组件的富文本编辑器组件,支持颜色选择,插入图片",
 6 |     "keywords": [
 7 |         "robin-editor",
 8 |         "编辑器",
 9 |         "富文本",
10 |         "小程序"
11 |     ],
12 |     "repository": "https://github.com/health901/uniapp-editor",
13 |     "engines": {
14 |         "HBuilderX": "^3.1.0"
15 |     },
16 |     "dcloudext": {
17 |         "category": [
18 |             "前端组件",
19 |             "通用组件"
20 |         ],
21 |         "sale": {
22 |             "regular": {
23 |                 "price": "0.00"
24 |             },
25 |             "sourcecode": {
26 |                 "price": "0.00"
27 |             }
28 |         },
29 |         "contact": {
30 |             "qq": ""
31 |         },
32 |         "declaration": {
33 |             "ads": "无",
34 |             "data": "无",
35 |             "permissions": "无"
36 |         },
37 |         "npmurl": ""
38 |     },
39 |     "uni_modules": {
40 |         "dependencies": ["uni-popup"],
41 |         "encrypt": [],
42 |         "platforms": {
43 |             "cloud": {
44 |                 "tcb": "y",
45 |                 "aliyun": "y"
46 |             },
47 |             "client": {
48 |                 "App": {
49 |                     "app-vue": "u",
50 |                     "app-nvue": "u"
51 |                 },
52 |                 "H5-mobile": {
53 |                     "Safari": "y",
54 |                     "Android Browser": "y",
55 |                     "微信浏览器(Android)": "y",
56 |                     "QQ浏览器(Android)": "y"
57 |                 },
58 |                 "H5-pc": {
59 |                     "Chrome": "y",
60 |                     "IE": "y",
61 |                     "Edge": "y",
62 |                     "Firefox": "y",
63 |                     "Safari": "u"
64 |                 },
65 |                 "小程序": {
66 |                     "微信": "y",
67 |                     "阿里": "u",
68 |                     "百度": "u",
69 |                     "字节跳动": "u",
70 |                     "QQ": "u"
71 |                 },
72 |                 "快应用": {
73 |                     "华为": "u",
74 |                     "联盟": "u"
75 |                 }
76 |             }
77 |         }
78 |     }
79 | }
80 | 


--------------------------------------------------------------------------------