Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c7a14483 1 parent 0f8b2757

新增富文本录入组件

Inline Side-by-side
Showing 3 changed files with 266 additions and 3 deletions
1 +<!--
2 + * @Date: 2022-09-26 21:52:25
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-09-27 09:09:44
5 + * @FilePath: /swx/src/components/activity-editor.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <view class="editor-box">
10 + <view class="editor-box-header" v-if="showTabBar">
11 + <view class="operate-box" :data-uploadImageURL="uploadImageURL" @tap="_addImage">
12 + <text class="iconfont icon-image"></text>
13 + </view>
14 + <view class="operate-box" @tap="_addItalic">
15 + <text class="iconfont icon-italic"></text>
16 + </view>
17 + <view class="operate-box" @tap="_addBold">
18 + <text class="iconfont icon-bold"></text>
19 + </view>
20 + <view class="operate-box" data-header="h1" @tap="_addHeader">
21 + <text class="iconfont icon-h1"></text>
22 + </view>
23 + <view class="operate-box" data-header="h2" @tap="_addHeader">
24 + <text class="iconfont icon-h2"></text>
25 + </view>
26 + <view class="operate-box" data-header="h3" @tap="_addHeader">
27 + <text class="iconfont icon-h3"></text>
28 + </view>
29 + <view class="operate-box" data-align="left" @tap="_addAlign">
30 + <text class="iconfont icon-alignLeft"></text>
31 + </view>
32 + <view class="operate-box" data-align="right" @tap="_addAlign">
33 + <text class="iconfont icon-alignRight"></text>
34 + </view>
35 + <view class="operate-box" data-list="ordered" @tap="_addList">
36 + <text class="iconfont icon-orderedList"></text>
37 + </view>
38 + <view class="operate-box" data-list="bullet" @tap="_addList">
39 + <text class="iconfont icon-unorderedList"></text>
40 + </view>
41 + <view class="operate-box" @tap="_undo">
42 + <text class="iconfont icon-undo"></text>
43 + </view>
44 + </view>
45 + <view class="editor-box-content">
46 + <editor id="editor" :name="name" :placeholder="placeholder" @ready="_onEditorReady"
47 + @input="_onInputting" :show-img-resize="true"></editor>
48 + </view>
49 + </view>
50 +</template>
51 +
52 +<script setup>
53 +import { ref } from 'vue'
54 +
55 +</script>
56 +<script>
57 +import Taro from '@tarojs/taro'
58 +
59 +export default {
60 + props: ['showTabBar', 'placeholder', 'name', 'uploadImageURL'],
61 + data () {
62 + return {
63 +
64 + }
65 + },
66 + methods: {
67 + _onEditorReady: function () {
68 + const that = this;
69 + Taro.createSelectorQuery().select('#editor').context(function (res) {
70 + that.editorCtx = res.context
71 + }).exec()
72 + },
73 + //插入图片
74 + _addImage: function (event) {
75 + let _this = this;
76 + wx.chooseImage({
77 + count: 1,
78 + sizeType: ['compressed'],
79 + sourceType: ['album'],
80 + success: function (res) {
81 + wx.showLoading({
82 + title: '上传中',
83 + mask: true
84 + });
85 + _this._uploadImage(res.tempFilePaths[0], event.currentTarget.dataset.uploadimageurl);
86 + }
87 + });
88 + },
89 + _uploadImage: function (tempFilePath, uploadImageURL) {
90 + let _this = this;
91 + wx.uploadFile({
92 + filePath: tempFilePath,
93 + name: 'image',
94 + url: uploadImageURL,
95 + success: function (res) {
96 + res = JSON.parse(res.data);
97 + wx.hideLoading({
98 + success: () => {
99 + if (res.code === 200) {
100 + _this.editorCtx.insertImage({
101 + src: res.data
102 + });
103 + } else {
104 + wx.showToast({
105 + icon: 'error',
106 + title: '服务器错误,稍后重试！',
107 + mask: true
108 + })
109 + }
110 + },
111 + });
112 + }
113 + });
114 + },
115 + //设置斜体
116 + _addItalic: function () {
117 + this.editorCtx.format("italic")
118 + },
119 + //添加粗体样式
120 + _addBold: function () {
121 + this.editorCtx.format("bold")
122 + },
123 + //设置标题
124 + _addHeader: function (e) {
125 + let headerType = e.currentTarget.dataset.header;
126 + this.editorCtx.format("header", headerType)
127 + },
128 + //设置文字的排列方式
129 + _addAlign: function (e) {
130 + let alignType = e.currentTarget.dataset.align;
131 + this.editorCtx.format("align", alignType);
132 + },
133 + //设置列表
134 + _addList: function (e) {
135 + let listType = e.currentTarget.dataset.list;
136 + this.editorCtx.format("list", listType);
137 + },
138 + //撤销
139 + _undo: function () {
140 + this.editorCtx.undo();
141 + },
142 + //监控输入
143 + _onInputting: function (e) {
144 + let html = e.detail.html;
145 + let text = e.detail.text;
146 + // this.triggerEvent("input", { html: html, text: text }, {});
147 + console.warn(html);
148 + console.warn(text);
149 + }
150 + }
151 +}
152 +</script>
153 +
154 +
155 +<style lang="less">
156 +/* components/hg-editor/hg-editor.wxss */
157 +@import "./iconfont.less";
158 +
159 +.editor-box {
160 + width: 100%;
161 + padding: 0;
162 + box-sizing: border-box;
163 + background-color: #fff;
164 + border: 2px solid #f6f6f6;
165 +}
166 +
167 +.editor-box-header,
168 +.editor-box-content {
169 + width: 100%;
170 +}
171 +
172 +.editor-box-header {
173 + display: flex;
174 + flex-flow: row nowrap;
175 + align-items: center;
176 + justify-content: flex-start;
177 + padding: 20rpx 20rpx;
178 + box-sizing: border-box;
179 + border-bottom: 2rpx solid #f6f6f6;
180 + background-color: #f6f6f6;
181 +}
182 +
183 +.editor-box-header>.operate-box {
184 + margin-right: 20rpx;
185 + width: 40rpx;
186 + height: 40rpx;
187 + overflow: hidden;
188 + color: gray;
189 +}
190 +
191 +.editor-box-content {
192 + padding: 20rpx;
193 + box-sizing: border-box;
194 +}
195 +</style>
1 +@font-face {
2 + font-family: 'iconfont'; /* Project id 2549449 */
3 + src: url('//at.alicdn.com/t/font_2549449_hxmflg4qsr6.woff2?t=1621002720450') format('woff2'),
4 + url('//at.alicdn.com/t/font_2549449_hxmflg4qsr6.woff?t=1621002720450') format('woff'),
5 + url('//at.alicdn.com/t/font_2549449_hxmflg4qsr6.ttf?t=1621002720450') format('truetype');
6 +}
7 +
8 +.iconfont {
9 + font-family: "iconfont" !important;
10 + font-size: 38rpx;
11 + font-style: normal;
12 + -webkit-font-smoothing: antialiased;
13 + -moz-osx-font-smoothing: grayscale;
14 +}
15 +
16 +.icon-undo:before {
17 + content: "\e609";
18 +}
19 +
20 +.icon-hr:before {
21 + content: "\e60a";
22 +}
23 +
24 +.icon-h3:before {
25 + content: "\e60b";
26 +}
27 +
28 +.icon-quote:before {
29 + content: "\e60c";
30 +}
31 +
32 +.icon-bold:before {
33 + content: "\e60e";
34 +}
35 +
36 +.icon-orderedList:before {
37 + content: "\e612";
38 +}
39 +
40 +.icon-h2:before {
41 + content: "\e61a";
42 +}
43 +
44 +.icon-italic:before {
45 + content: "\e61c";
46 +}
47 +
48 +.icon-unorderedList:before {
49 + content: "\e620";
50 +}
51 +
52 +.icon-alignLeft:before {
53 + content: "\e621";
54 +}
55 +
56 +.icon-alignRight:before {
57 + content: "\e622";
58 +}
59 +
60 +.icon-h1:before {
61 + content: "\e623";
62 +}
63 +
64 +.icon-image:before {
65 + content: "\e629";
66 +}
1 <!-- 1 <!--
2 * @Date: 2022-09-21 16:04:10 2 * @Date: 2022-09-21 16:04:10
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-26 14:25:45 4 + * @LastEditTime: 2022-09-26 23:02:43
5 * @FilePath: /swx/src/pages/createActivity/index.vue 5 * @FilePath: /swx/src/pages/createActivity/index.vue
6 * @Description: 创建活动页面 6 * @Description: 创建活动页面
7 --> 7 -->
...@@ -31,9 +31,10 @@ ...@@ -31,9 +31,10 @@
31 <view class="divide-line"></view> 31 <view class="divide-line"></view>
32 <view class="form-item"> 32 <view class="form-item">
33 <view class="form-item-title border">活动详情</view> 33 <view class="form-item-title border">活动详情</view>
34 - <van-field :value="message" input-class="input-class" label="" inputAlign="" maxlength="" placeholderStyle="" 34 + <!-- <van-field :value="message" input-class="input-class" label="" inputAlign="" maxlength="" placeholderStyle=""
35 rightIcon="" type="textarea" placeholder="开始输入活动详情介绍" :autosize="{ maxHeight: 200, minHeight: 100 }" 35 rightIcon="" type="textarea" placeholder="开始输入活动详情介绍" :autosize="{ maxHeight: 200, minHeight: 100 }"
36 - custom-style="padding-left: 0;" /> 36 + custom-style="padding-left: 0;" /> -->
37 + <activity-editor name="editor" :showTabBar="true" placeholder="开始输入活动详情介绍"></activity-editor>
37 </view> 38 </view>
38 <view class="divide-line"></view> 39 <view class="divide-line"></view>
39 <view class="form-item"> 40 <view class="form-item">
...@@ -276,6 +277,7 @@ import icon_upload from '@/images/icon/upload@2x.png' ...@@ -276,6 +277,7 @@ import icon_upload from '@/images/icon/upload@2x.png'
276 import icon_vip from '@/images/icon/vip@2x.png' 277 import icon_vip from '@/images/icon/vip@2x.png'
277 import icon_sel from '@/images/icon/sel@2x.png' 278 import icon_sel from '@/images/icon/sel@2x.png'
278 import timePickerData from "@/components/time-picker-data/picker"; 279 import timePickerData from "@/components/time-picker-data/picker";
280 +import activityEditor from "@/components/activity-editor";
279 281
280 const value1 = ref(''); 282 const value1 = ref('');
281 const message = ref(''); 283 const message = ref('');
......