You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.2 KiB
118 lines
3.2 KiB
<template> |
|
<div class="content"> |
|
<div class='toolbar' @tap="format"> |
|
<div :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></div> |
|
<div :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></div> |
|
<div :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></div> |
|
<div :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></div> |
|
<div :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align" |
|
data-value="left"></div> |
|
<div :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align" |
|
data-value="center"></div> |
|
|
|
<div class="iconfont icon-fengexian" @tap="insertdivider"></div> |
|
<div class="iconfont icon-charutupian" @tap="insertimage"></div> |
|
</div> |
|
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="oneditorready" @statuschange="onstatuschange"></editor> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
placeholder: '开始输入...' |
|
} |
|
}, |
|
methods: { |
|
//撤销、重做这些不需要可以不写 |
|
undo() { |
|
this.editorCtx.undo() |
|
}, |
|
|
|
redo() { |
|
this.editorCtx.redo() |
|
}, |
|
|
|
format(e) { |
|
let { |
|
name, |
|
value |
|
} = e.target.dataset |
|
if (!name) return |
|
// console.log('format', name, value) |
|
this.editorCtx.format(name, value) |
|
}, |
|
|
|
oneditorready() { |
|
uni.createSelectorQuery().select('#editor').context((res) => { |
|
this.editorCtx = res.context |
|
}).exec() |
|
}, |
|
|
|
insertImage() { |
|
var that = this; |
|
uni.chooseImage({ |
|
sizeType: ['original', 'compressed'], |
|
sourceType: ['album', 'camera'], |
|
success(res) { |
|
console.log(res.tempFilePaths[0]) |
|
uni.uploadFile({ |
|
url: 'http://0.0.0.0/file/upload-img', //域名+上传文件的请求接口 (根据你实际的接口来) |
|
filePath: res.tempFilePaths[0], // tempFilePath可以作为img标签的src属性显示图片 服务器图片的路径 |
|
name: 'img', //上传到服务器的参数，自定义 |
|
header: { |
|
"Content-Type": "multipart/form-data" |
|
}, |
|
success(res) { |
|
var data = JSON.parse(res.data) |
|
that.editorCtx.insertImage({ |
|
width: '100%', //设置宽度为100%防止宽度溢出手机屏幕 |
|
height: 'auto', |
|
src: data.url, //服务端返回的url |
|
alt: '图像', |
|
success: function() { |
|
console.log('insert image success') |
|
} |
|
}) |
|
console.log(that.editorCtx) |
|
} |
|
}) |
|
} |
|
}) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
.ql-container { |
|
box-sizing: border-box; |
|
padding: 12px 15px; |
|
width: 100%; |
|
min-height: 30vh; |
|
height: auto; |
|
background: #fff; |
|
font-size: 16px; |
|
line-height: 1.5; |
|
} |
|
|
|
.ql-active { |
|
color: #06c; |
|
} |
|
|
|
.iconfont { |
|
display: inline-block; |
|
padding: 8px 8px; |
|
width: 24px; |
|
height: 24px; |
|
cursor: pointer; |
|
font-size: 20px; |
|
} |
|
|
|
.toolbar { |
|
box-sizing: border-box; |
|
border-bottom: 0; |
|
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; |
|
} |
|
</style>
|
|
|