init
This commit is contained in:
240
xhs-mini-demos/api-case/editor/assets/iconfont.css
Normal file
240
xhs-mini-demos/api-case/editor/assets/iconfont.css
Normal file
File diff suppressed because one or more lines are too long
51
xhs-mini-demos/api-case/editor/editor.css
Normal file
51
xhs-mini-demos/api-case/editor/editor.css
Normal file
@@ -0,0 +1,51 @@
|
||||
@import './assets/iconfont.css';
|
||||
|
||||
page > view {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ql-container {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
overflow: auto;
|
||||
border: 1px solid #ececec;
|
||||
}
|
||||
|
||||
.ql-active {
|
||||
color: #22c704;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 100%;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #ececec;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
226
xhs-mini-demos/api-case/editor/editor.js
Normal file
226
xhs-mini-demos/api-case/editor/editor.js
Normal file
@@ -0,0 +1,226 @@
|
||||
const contents = {
|
||||
html: `
|
||||
<p>支持插入图片</p>
|
||||
<br>
|
||||
<p>
|
||||
<img src="https://b.bdstatic.com/searchbox/icms/searchbox/img/editor-image-demo.png" data-custom="id=abcd&role=god" alt="image-alt" class="imageCls" width="100%">
|
||||
</p>
|
||||
<hr>
|
||||
<p>支持以下字符样式</p>
|
||||
<p>
|
||||
<b>bold粗体</b>
|
||||
<em>italic斜体</em>
|
||||
<u>underline下划线</u>
|
||||
</p>
|
||||
<p>
|
||||
<sub>sub下标</sub>
|
||||
<sup>super上标</sup>
|
||||
</p>
|
||||
<hr>
|
||||
<p>支持以下列表样式</p>
|
||||
<ol>
|
||||
<li>有序列表</li>
|
||||
<li>有序列表</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>无序列表</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>无序列表</li>
|
||||
</ul>
|
||||
<ul data-checked="true">
|
||||
<li>选框列表</li>
|
||||
</ul>
|
||||
<ul data-checked="false">
|
||||
<li>选框列表</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p>支持以下字符大小</p>
|
||||
<h1>H1 一级标题</h1>
|
||||
<h2>H2 二级标题</h2>
|
||||
<h3>H3 三级标题</h3>
|
||||
<h4>H4 四级标题</h4>
|
||||
<h5>H5 五级标题</h5>
|
||||
<h6>H6 六级标题</h6>
|
||||
<hr>
|
||||
<p>支持以下对齐方式</p>
|
||||
<p style="text-align:center">center中间对齐</p>
|
||||
<p style="text-align:right">right 右对齐</p>
|
||||
<p style="text-align:justify">justify 自动对齐</p>
|
||||
<hr>
|
||||
<span style="color:#00bc89;background-color:#333">color 支持设置字体及背景颜色</span>`,
|
||||
};
|
||||
Page({
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: 'editor',
|
||||
path: 'page/component/pages/editor/editor',
|
||||
};
|
||||
},
|
||||
data: {
|
||||
formats: {},
|
||||
readOnly: false,
|
||||
placeholder: '开始输入...',
|
||||
editorHeight: 300,
|
||||
keyboardHeight: 0,
|
||||
isIOS: false,
|
||||
safeHeight: 0,
|
||||
toolBarHeight: 50,
|
||||
},
|
||||
readOnlyChange() {
|
||||
this.setData({
|
||||
readOnly: !this.data.readOnly,
|
||||
});
|
||||
},
|
||||
onLoad() {
|
||||
const { platform, safeArea, model, screenHeight } = xhs.getSystemInfoSync();
|
||||
let safeHeight;
|
||||
if (safeArea) {
|
||||
safeHeight = screenHeight - safeArea.bottom;
|
||||
} else {
|
||||
safeHeight = 32;
|
||||
}
|
||||
this._safeHeight = safeHeight;
|
||||
const isIOS = platform === 'ios';
|
||||
this.setData({ isIOS, safeHeight, toolBarHeight: isIOS ? safeHeight + 50 : 50 });
|
||||
const that = this;
|
||||
this.updatePosition(0);
|
||||
let keyboardHeight = 0;
|
||||
xhs.onKeyboardHeightChange?.(res => {
|
||||
if (res.height === keyboardHeight) {
|
||||
return;
|
||||
}
|
||||
const duration = res.height > 0 ? res.duration * 1000 : 0;
|
||||
keyboardHeight = res.height;
|
||||
setTimeout(() => {
|
||||
xhs.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
success() {
|
||||
that.updatePosition(keyboardHeight);
|
||||
that.editorCtx.scrollIntoView();
|
||||
},
|
||||
});
|
||||
}, duration);
|
||||
});
|
||||
},
|
||||
updatePosition(keyboardHeight) {
|
||||
const toolbarHeight = 50;
|
||||
const { windowHeight, platform } = xhs.getSystemInfoSync();
|
||||
const editorHeight =
|
||||
keyboardHeight > 0 ? windowHeight - keyboardHeight - toolbarHeight : windowHeight;
|
||||
if (keyboardHeight === 0) {
|
||||
this.setData({
|
||||
editorHeight,
|
||||
keyboardHeight,
|
||||
toolBarHeight: this.data.isIOS ? 50 + this._safeHeight : 50,
|
||||
safeHeight: this._safeHeight,
|
||||
});
|
||||
} else {
|
||||
this.setData({
|
||||
editorHeight,
|
||||
keyboardHeight,
|
||||
toolBarHeight: 50,
|
||||
safeHeight: 0,
|
||||
});
|
||||
}
|
||||
},
|
||||
calNavigationBarAndStatusBar() {
|
||||
const systemInfo = xhs.getSystemInfoSync();
|
||||
const { statusBarHeight, platform } = systemInfo;
|
||||
const isIOS = platform === 'ios';
|
||||
const navigationBarHeight = isIOS ? 44 : 48;
|
||||
return statusBarHeight + navigationBarHeight;
|
||||
},
|
||||
onEditorReady() {
|
||||
const that = this;
|
||||
that.editorCtx = xhs.createEditorContext?.('editor');
|
||||
this.clear();
|
||||
this.setContents();
|
||||
this.removeFormat();
|
||||
this.insertDivider();
|
||||
|
||||
setTimeout(() => {
|
||||
this.editorCtx.getContents({
|
||||
success: res => {
|
||||
console.log('getContents success', res);
|
||||
},
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
blur() {
|
||||
this.editorCtx.blur();
|
||||
},
|
||||
format(e) {
|
||||
const { name, value } = e.target.dataset;
|
||||
if (!name) return;
|
||||
console.log('format', name, value);
|
||||
this.editorCtx.format(name, value);
|
||||
},
|
||||
onStatusChange(e) {
|
||||
const formats = e.detail;
|
||||
console.log('onStatusChange', e);
|
||||
this.setData({ formats });
|
||||
},
|
||||
insertDivider() {
|
||||
this.editorCtx.insertDivider({
|
||||
success() {
|
||||
console.log('insert divider success');
|
||||
},
|
||||
});
|
||||
},
|
||||
clear() {
|
||||
this.editorCtx.clear({
|
||||
success(res) {
|
||||
console.log('clear success', res);
|
||||
},
|
||||
});
|
||||
},
|
||||
removeFormat() {
|
||||
this.editorCtx.removeFormat({
|
||||
success: res => {
|
||||
console.log('removeFormat success', res);
|
||||
},
|
||||
});
|
||||
},
|
||||
setContents() {
|
||||
this.editorCtx.setContents({
|
||||
...contents,
|
||||
success: res => {
|
||||
console.log('setContents success', res);
|
||||
},
|
||||
});
|
||||
},
|
||||
insertDate() {
|
||||
const date = new Date();
|
||||
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
|
||||
this.editorCtx.insertText({
|
||||
text: formatDate,
|
||||
});
|
||||
},
|
||||
insertImage() {
|
||||
const that = this;
|
||||
xhs.chooseImage({
|
||||
count: 1,
|
||||
success(res) {
|
||||
that.editorCtx.insertImage({
|
||||
src: res.tempFilePaths[0],
|
||||
data: {
|
||||
id: 'abcd',
|
||||
role: 'god',
|
||||
},
|
||||
width: '80%',
|
||||
success() {
|
||||
console.log('insert image success');
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
bindfocus(e) {
|
||||
console.log('bindfocus', e);
|
||||
},
|
||||
bindblur(e) {
|
||||
console.log('bindblur', e);
|
||||
},
|
||||
});
|
||||
8
xhs-mini-demos/api-case/editor/editor.json
Normal file
8
xhs-mini-demos/api-case/editor/editor.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "editor",
|
||||
"disableScroll": true,
|
||||
"usingComponents": {
|
||||
"showbox": "../../common/component/showbox/index",
|
||||
"box": "../../common/component/container/index"
|
||||
}
|
||||
}
|
||||
25
xhs-mini-demos/api-case/editor/editor.xhsml
Normal file
25
xhs-mini-demos/api-case/editor/editor.xhsml
Normal file
@@ -0,0 +1,25 @@
|
||||
<view class="container" style="height:{{editorHeight}}px;">
|
||||
<showbox title="默认">
|
||||
<box>
|
||||
<editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady"
|
||||
bindblur="bindblur"
|
||||
bindfocus="bindfocus"
|
||||
show-img-size
|
||||
show-img-resize
|
||||
show-img-toolbar>
|
||||
</editor>
|
||||
</box>
|
||||
</showbox>
|
||||
</view>
|
||||
|
||||
<view class="toolbar" catchtouchend="format" hidden="{{false}}" style="bottom: {{isIOS ? keyboardHeight : 0}}px; height: {{toolBarHeight}}px; padding-bottom: {{isIOS ? safeHeight : 0}}px">
|
||||
<i class="iconfont icon-charutupian" catchtouchend="insertImage"></i>
|
||||
<i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i>
|
||||
<i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i>
|
||||
<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--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>
|
||||
</view>
|
||||
Reference in New Issue
Block a user