Skip to content

Commit d67871b

Browse files
Otto-JOtto-J
committed
fix: 修复字体链接失效，优化编辑器功能展示效果
1 parent 3279333 commit d67871b

File tree

2 files changed

+76
-35
lines changed

2 files changed

+76
-35
lines changed

‎pages/component/editor/editor.vue

+76-35
Original file line numberDiff line numberDiff line change
@@ -2,58 +2,83 @@
22
<view class="container">
33
<view class="page-body">
44
<view class='wrapper'>
5-
<view class='toolbar' @tap="format" style="height: 120px;overflow-y: auto;">
6-
<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
7-
<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></view>
8-
<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></view>
9-
<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></view>
5+
<view class='toolbar' @tap="format" style="height: 80px;overflow-y: auto;">
6+
<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold">
7+
</view>
8+
<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic">
9+
</view>
10+
<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
11+
data-name="underline"></view>
12+
<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
13+
data-name="strike"></view>
1014
<!-- #ifndef MP-BAIDU -->
11-
<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align" data-value="left"></view>
15+
<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
16+
data-name="align" data-value="left"></view>
1217
<!-- #endif -->
13-
<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align" data-value="center"></view>
14-
<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align" data-value="right"></view>
15-
<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi" data-name="align" data-value="justify"></view>
18+
<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
19+
data-name="align" data-value="center"></view>
20+
<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
21+
data-name="align" data-value="right"></view>
22+
<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
23+
data-name="align" data-value="justify"></view>
1624
<!-- #ifndef MP-BAIDU -->
17-
<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight" data-value="2"></view>
18-
<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing" data-name="letterSpacing" data-value="2em"></view>
19-
<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop" data-value="20px"></view>
20-
<view :class="formats.marginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom" data-value="20px"></view>
25+
<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
26+
data-name="lineHeight" data-value="2"></view>
27+
<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing"
28+
data-name="letterSpacing" data-value="2em"></view>
29+
<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju"
30+
data-name="marginTop" data-value="20px"></view>
31+
<view :class="formats.marginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"
32+
data-name="marginBottom" data-value="20px"></view>
2133
<!-- #endif -->
22-
34+
2335
<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
24-
36+
2537
<!-- #ifndef MP-BAIDU -->
26-
<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font" data-name="fontFamily" data-value="Pacifico"></view>
27-
<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize" data-name="fontSize" data-value="24px"></view>
38+
<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
39+
data-name="fontFamily" data-value="Pacifico"></view>
40+
<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
41+
data-name="fontSize" data-value="24px"></view>
2842
<!-- #endif -->
29-
<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color" data-name="color" data-value="#0000ff"></view>
30-
<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''" class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
43+
<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color"
44+
data-name="color" data-value="#0000ff"></view>
45+
<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
46+
class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
3147
<view class="iconfont icon-date" @tap="insertDate"></view>
3248
<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
33-
<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list" data-value="ordered"></view>
34-
<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list" data-value="bullet"></view>
35-
49+
<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
50+
data-name="list" data-value="ordered"></view>
51+
<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
52+
data-name="list" data-value="bullet"></view>
53+
3654
<view class="iconfont icon-undo" @tap="undo"></view>
3755
<view class="iconfont icon-redo" @tap="redo"></view>
38-
56+
3957
<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
4058
<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
4159
<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
4260
<view class="iconfont icon-charutupian" @tap="insertImage"></view>
43-
<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header" :data-value="1"></view>
44-
<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script" data-value="sub"></view>
45-
<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script" data-value="super"></view>
46-
61+
<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
62+
data-name="header" :data-value="1"></view>
63+
<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
64+
data-name="script" data-value="sub"></view>
65+
<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao"
66+
data-name="script" data-value="super"></view>
67+
4768
<view class="iconfont icon-shanchu" @tap="clear"></view>
48-
49-
<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl" data-name="direction" data-value="rtl"></view>
69+
70+
<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl"
71+
data-name="direction" data-value="rtl"></view>
5072
</view>
51-
73+
5274
<view class="editor-wrapper">
5375
<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar
5476
show-img-resize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
5577
</editor>
5678
</view>
79+
<view>
80+
<button @tap="getCon">打印文本内容</button>
81+
</view>
5782
</view>
5883
</view>
5984
</view>
@@ -68,17 +93,33 @@
6893
}
6994
},
7095
onLoad() {
71-
// #ifndef MP-BAIDU
96+
// #ifndef MP-BAIDU
7297
uni.loadFontFace({
7398
family: 'Pacifico',
74-
source: 'url("https://sungd.github.io/Pacifico.ttf")'
99+
source: 'url("/static/font/Pacifico-Regular.ttf")',
100+
success() {
101+
console.log('success load font')
102+
},
103+
fail() {
104+
console.log('fail load font load')
105+
}
75106
})
76107
// #endif
77108
},
78109
methods: {
79110
readOnlyChange() {
80111
this.readOnly = !this.readOnly
81112
},
113+
getCon() {
114+
this.editorCtx.getContents({
115+
success: (res) => {
116+
console.log('文本详情：', res)
117+
},
118+
fail: (err) => {
119+
// console.log(err)
120+
}
121+
})
122+
},
82123
onEditorReady() {
83124
// #ifdef MP-BAIDU
84125
this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
@@ -171,7 +212,7 @@
171212
}
172213
173214
.editor-wrapper {
174-
height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);
215+
height: calc(100vh - var(--window-top) - var(--status-bar-height) - 80px - 46px);
175216
background: #fff;
176217
}
177218
@@ -196,12 +237,12 @@
196237
width: 100%;
197238
min-height: 30vh;
198239
height: 100%;
199-
margin-top: 20px;
240+
/* margin-top: 20px; */
200241
font-size: 16px;
201242
line-height: 1.5;
202243
}
203244
204245
.ql-active {
205246
color: #06c;
206247
}
207-
</style>
248+
</style>

‎static/font/Pacifico-Regular.ttf

308 KB
Binary file not shown.

0 commit comments

Comments
 (0)