|
@@ -0,0 +1,169 @@
|
|
|
+<template>
|
|
|
+ <view class="editor">
|
|
|
+ <view class="cons">
|
|
|
+ <view v-if="read">
|
|
|
+ <u-parse :content="value"></u-parse>
|
|
|
+ </view>
|
|
|
+ <view v-else>
|
|
|
+ <view class="toolbar" @tap="format">
|
|
|
+ <view :class="formats.bold ? 'ql-active' : ''" class="icon" data-name="bold" title="加粗"></view>
|
|
|
+ <view :class="formats.align === 'left' ? 'ql-active' : ''" class="icon" data-name="align" data-value="left" title="左对齐"></view>
|
|
|
+ <view :class="formats.align === 'center' ? 'ql-active' : ''" class="icon" data-name="align" data-value="center" title="居中对齐"></view>
|
|
|
+ <view :class="formats.align === 'right' ? 'ql-active' : ''" class="icon" data-name="align" data-value="right" title="右对齐"></view>
|
|
|
+ <view :class="formats.align === 'justify' ? 'ql-active' : ''" class="icon" data-name="align" data-value="justify" title="两端对齐"></view>
|
|
|
+ <view :class="formats.lineHeight ? 'ql-active' : ''" class="icon" data-name="lineHeight" data-value="2" title="行距"></view>
|
|
|
+ <view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="icon" data-name="list" data-value="ordered" title="编号"></view>
|
|
|
+ <!-- <view class="icon" title="分割线" @tap="insertDivider"></view> -->
|
|
|
+ <view class="icon" @tap="insertDate"></view>
|
|
|
+ <view class="icon" @tap="insertImage" title="插入图片"></view>
|
|
|
+ <view class="icon" @tap="clear" title="清空内容"></view>
|
|
|
+ </view>
|
|
|
+ <editor id="editor" class="ql-container" :placeholder="placeholder" showImgSize showImgToolbar showImgResize @input="editorChange" @statuschange="onStatusChange" :read-only="false" @ready="onEditorReady"></editor>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'leditor',
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ read: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ placeholder: {
|
|
|
+ type: String,
|
|
|
+ default: '输入内容'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ip: this.http.ip,
|
|
|
+ ready: false,
|
|
|
+ formats: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //初始化
|
|
|
+ onEditorReady() {
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .in(this)
|
|
|
+ .select('#editor')
|
|
|
+ .context((res) => {
|
|
|
+ this.editorCtx = res.context;
|
|
|
+ })
|
|
|
+ .exec();
|
|
|
+ },
|
|
|
+ //设置编辑器内容
|
|
|
+ setContents() {
|
|
|
+ if (!this.read) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.editorCtx.setContents({
|
|
|
+ html: this.value
|
|
|
+ });
|
|
|
+ }, 3000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //修改样式
|
|
|
+ format(e) {
|
|
|
+ let { name, value } = e.target.dataset;
|
|
|
+ if (!name) return;
|
|
|
+ this.editorCtx.format(name, value);
|
|
|
+ },
|
|
|
+ //插入分割线
|
|
|
+ insertDivider() {
|
|
|
+ this.editorCtx.insertDivider();
|
|
|
+ },
|
|
|
+ //插入日期
|
|
|
+ insertDate() {
|
|
|
+ const date = new Date();
|
|
|
+ const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
|
|
|
+ this.editorCtx.insertText({
|
|
|
+ text: formatDate
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //改变编辑器内样式
|
|
|
+ onStatusChange(e) {
|
|
|
+ const formats = e.detail;
|
|
|
+ this.formats = formats;
|
|
|
+ },
|
|
|
+ //清除全部内容
|
|
|
+ clear() {
|
|
|
+ this.editorCtx.clear();
|
|
|
+ },
|
|
|
+ //内容改变时
|
|
|
+ editorChange: function (e) {
|
|
|
+ this.$emit('input', e.detail.html);
|
|
|
+ },
|
|
|
+ //插入图片
|
|
|
+ insertImage() {
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 9, //默认9
|
|
|
+ sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
|
|
|
+ sourceType: ['album'], //从相册选择
|
|
|
+ success: (chooseImageRes) => {
|
|
|
+ chooseImageRes.tempFilePaths.forEach((item) => {
|
|
|
+ uni.showLoading({ title: '正在上传图片...', mask: true });
|
|
|
+ uni.uploadFile({
|
|
|
+ url: this.ip + '/common/upload',
|
|
|
+ filePath: item,
|
|
|
+ name: 'file',
|
|
|
+ header: { Authorization: this.getUser().token },
|
|
|
+ success: (res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ let result = JSON.parse(res.data);
|
|
|
+ if (result.code === 200) {
|
|
|
+ this.editorCtx.insertImage({
|
|
|
+ src: this.ip + result.fileName,
|
|
|
+ alt: '图像'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showModal({ content: result.msg, showCancel: false });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.editor {
|
|
|
+ padding: 0px 0px 0px 0px;
|
|
|
+ .cons {
|
|
|
+ width: 100%;
|
|
|
+ .toolbar {
|
|
|
+ border-bottom: 0px;
|
|
|
+ background-color: whitesmoke;
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ .icon {
|
|
|
+ display: inline-block;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 20px;
|
|
|
+ padding: 6px 6px;
|
|
|
+ width: 23px;
|
|
|
+ height: 23px;
|
|
|
+ }
|
|
|
+ .ql-active {
|
|
|
+ color: #06c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ql-container {
|
|
|
+ padding: 10px;
|
|
|
+ height: 320px;
|
|
|
+ font-size: 15px;
|
|
|
+ background-color: white;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|