|
|
@@ -0,0 +1,326 @@
|
|
|
+<template lang="html">
|
|
|
+ <div class="editor cont">
|
|
|
+ <div ref="toolbar" class="toolbar">
|
|
|
+ </div>
|
|
|
+ <div ref="editor" class="text">
|
|
|
+ </div>
|
|
|
+ <slot></slot>
|
|
|
+ <div v-if="proVisible" class="mask">
|
|
|
+ <div class="progressBox">
|
|
|
+ <div class="lbox">
|
|
|
+ <img src="../../../../assets/loading.gif" />上传中，请稍后
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import E from "wangeditor";
|
|
|
+import "../../../../common/aws-sdk-2.235.1.min";
|
|
|
+import { Loading } from 'element-ui';
|
|
|
+// import 'wangeditor/release/wangEditor.min.css'
|
|
|
+export default {
|
|
|
+ name: "editoritem",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // uploadPath,
|
|
|
+ editor: null,
|
|
|
+ info_: null,
|
|
|
+ proVisible:false,
|
|
|
+ progress:0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ model: {
|
|
|
+ prop: "value",
|
|
|
+ event: "change",
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ isClear: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ placeholder: {
|
|
|
+ type: String,
|
|
|
+ default: "请输入正文"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isClear(val) {
|
|
|
+ // 触发清除文本域内容
|
|
|
+ if (val) {
|
|
|
+ this.editor.txt.clear();
|
|
|
+ this.info_ = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ value: function (value) {
|
|
|
+ if (value !== this.editor.txt.html()) {
|
|
|
+ this.editor.txt.html(this.value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.seteditor();
|
|
|
+ this.editor.txt.html(this.value);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ seteditor() {
|
|
|
+ this.editor = new E(this.$refs.toolbar, this.$refs.editor);
|
|
|
+ // 关闭菜单栏fixed
|
|
|
+ this.editor.config.menuFixed = false;
|
|
|
+ // 普通的自定义菜单
|
|
|
+ this.editor.config.menus = [
|
|
|
+ "head", //标题
|
|
|
+ "bold", //加粗
|
|
|
+ "fontSize", //字体大小
|
|
|
+ // "fontName", //字体
|
|
|
+ // "italic", //斜体
|
|
|
+ // "underline", //下划线
|
|
|
+ // "strikeThrough", //删除线
|
|
|
+ "indent", //缩进
|
|
|
+ // "lineHeight", //行高
|
|
|
+ // "foreColor",
|
|
|
+ // "backColor",
|
|
|
+ // "link",
|
|
|
+ // "list",
|
|
|
+ // "todo",
|
|
|
+ "justify",
|
|
|
+ // "quote",
|
|
|
+ // "emoticon",
|
|
|
+ "image",
|
|
|
+ // "video",
|
|
|
+ "table",
|
|
|
+ // "code",
|
|
|
+ // "splitLine",
|
|
|
+ "undo",
|
|
|
+ "redo",
|
|
|
+ ];
|
|
|
+ // 带格式粘贴
|
|
|
+ this.editor.config.pasteFilterStyle = false;
|
|
|
+ //忽略粘贴内容中的图片
|
|
|
+ this.editor.config.pasteIgnoreImg = false;
|
|
|
+ this.editor.config.showLinkImg = false;
|
|
|
+ this.editor.config.placeholder = this.placeholder;
|
|
|
+ var that = this;
|
|
|
+ this.editor.config.customUploadImg = function (files, insert) {
|
|
|
+ // const loading = Loading.service({
|
|
|
+ // lock: true,
|
|
|
+ // background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ // });
|
|
|
+ // 图片自定义上传方法
|
|
|
+ var kk = 0
|
|
|
+ for (var i = 0; i < files.length; i++) {
|
|
|
+ var file = files[i];
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
+ }; //秘钥形式的登录上传
|
|
|
+ window.AWS.config.update(credentials);
|
|
|
+ window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
+
|
|
|
+ var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
+ that.proVisible = true
|
|
|
+ if (file) {
|
|
|
+ var params = {
|
|
|
+ Key:
|
|
|
+ file.name.split(".")[0] +
|
|
|
+ new Date().getTime() +
|
|
|
+ "." +
|
|
|
+ file.name.split(".")[file.name.split(".").length - 1],
|
|
|
+ ContentType: file.type,
|
|
|
+ Body: file,
|
|
|
+ "Access-Control-Allow-Credentials": "*",
|
|
|
+ ACL: "public-read",
|
|
|
+ }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
|
|
|
+ var options = {
|
|
|
+ partSize: 2048 * 1024 * 1024,
|
|
|
+ queueSize: 2,
|
|
|
+ leavePartsOnError: true,
|
|
|
+ };
|
|
|
+ bucket
|
|
|
+ .upload(params, options)
|
|
|
+ .on("httpUploadProgress", function (evt) {
|
|
|
+ //这里可以写进度条
|
|
|
+ // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
|
|
|
+ })
|
|
|
+ .send(function (err, data) {
|
|
|
+ kk++
|
|
|
+ if(kk == files.length - 1 || kk > files.length - 1){
|
|
|
+ that.proVisible = false
|
|
|
+ }
|
|
|
+ // loading.close();
|
|
|
+ if (err) {
|
|
|
+ that.$message.error("上传失败");
|
|
|
+ } else {
|
|
|
+ //上传成功处理
|
|
|
+ insert(data.Location);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ //配置 自定义处理粘贴的文本内容
|
|
|
+ this.editor.config.pasteTextHandle = function (content) {
|
|
|
+ if (content == '' && !content) return ''
|
|
|
+ var str = content
|
|
|
+ str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
|
|
|
+ str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
|
|
|
+ str = str.replace(/<\/?[^>]*>/g, '')
|
|
|
+ str = str.replace(/[ | ]*\n/g, '\n')
|
|
|
+ str = str.replace(/ /ig, '')
|
|
|
+ // console.log('****', content)
|
|
|
+ // console.log('****', str)
|
|
|
+ return str
|
|
|
+ };
|
|
|
+ this.editor.config.onchange = (html) => {
|
|
|
+ this.info_ = html; // 绑定当前逐渐地值
|
|
|
+ this.$emit("change", this.info_); // 将内容同步到父组件中
|
|
|
+ };
|
|
|
+ // 创建富文本编辑器
|
|
|
+ this.editor.create();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="css" scoped>
|
|
|
+.editor {
|
|
|
+ width: 100%;
|
|
|
+ margin: 10px auto;
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toolbar {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ height: 230px;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /* table 样式 */
|
|
|
+ .cont>>>table {
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
+ border-left: 1px solid #ccc;
|
|
|
+}
|
|
|
+
|
|
|
+.cont>>>table td,
|
|
|
+.cont>>>table th {
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
+ /* padding: 20px 5px; */
|
|
|
+ padding: 5px 10px;
|
|
|
+ max-width: 0px;
|
|
|
+ height: 30px;
|
|
|
+ vertical-align: baseline;
|
|
|
+}
|
|
|
+
|
|
|
+.cont>>>table th {
|
|
|
+ border-bottom: 2px solid #ccc;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+ /* blockquote 样式 */
|
|
|
+ .cont>>>blockquote {
|
|
|
+ display: block;
|
|
|
+ border-left: 8px solid #d0e5f2;
|
|
|
+ padding: 5px 10px;
|
|
|
+ margin: 10px 0;
|
|
|
+ line-height: 1.4;
|
|
|
+ font-size: 100%;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* code 样式 */
|
|
|
+ .cont>>>code {
|
|
|
+ display: inline-block;
|
|
|
+ *display: inline;
|
|
|
+ *zoom: 1;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ border-radius: 3px;
|
|
|
+ padding: 3px 5px;
|
|
|
+ margin: 0 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cont>>>pre code {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ul ol 样式 */
|
|
|
+ .cont>>>ul,
|
|
|
+ ol {
|
|
|
+ margin: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* .cont>>>.w-e-droplist{
|
|
|
+ width: 80px !important;
|
|
|
+ } */
|
|
|
+
|
|
|
+ .mask {
|
|
|
+ background-color: rgb(0 0 0 / 30%);
|
|
|
+ /* position: fixed; */
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 99999;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.mask2 {
|
|
|
+ position: fixed !important;
|
|
|
+ z-index: 999999;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBox {
|
|
|
+ width: 300px;
|
|
|
+ height: 150px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 0 6px 1px #bfbfbf;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBox .lbox {
|
|
|
+ height: 100px;
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBox .lbox img {
|
|
|
+ width: 40px;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBox>>>.el-progress-bar__outer {
|
|
|
+ background-color: #d1dfff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBox .lbox {
|
|
|
+ height: 100px;
|
|
|
+ font-size: 19px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBox .lbox img {
|
|
|
+ width: 40px;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+</style>
|
SanHQin