Skip to content

C
court-inner
Commit f22fd116 by 杨琪琪
Options

更新

parent d13449be
Showing with 75 additions and 20 deletions
src/components/EditorTinymce.vue
<template>
<div class="editor">
<div class="editor">
<editor v-model="myValue" :init="init"></editor>
</div>
</div>
</template>
<script>
......@@ -21,6 +21,7 @@ import "tinymce/plugins/fullscreen";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/hr";
import "tinymce/plugins/code";
import "tinymce/plugins/paste";
export default {
components: {
......@@ -38,12 +39,15 @@ export default {
},
plugins: {
type: [String, Array],
// default: "lists image media table wordcount link fullscreen insertdatetime hr code",
default: "lists image table wordcount link fullscreen insertdatetime hr code",
// default: "lists image media table wordcount link fullscreen insertdatetime hr code", paste // 粘贴
default:
"lists image table wordcount link fullscreen insertdatetime hr code",
},
toolbar: {
type: [String, Array],
default: "table undo redo | formatselect | fontselect fontsizeselect lineheight | fullscreen code | bold underline italic forecolor backcolor removeformat hr | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | insertdatetime link lists image media",
// paste 粘贴
default:
"table undo redo | formatselect | fontselect fontsizeselect lineheight | fullscreen code | bold underline italic forecolor backcolor removeformat hr | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | insertdatetime link lists image media",
// default: "",
},
},
......@@ -52,7 +56,7 @@ export default {
this.myValue = newValue;
},
myValue(newValue) {
this.$emit('update:value', newValue)
this.$emit("update:value", newValue);
// console.log(newValue)
// this.$emit("input", newValue);
// this.$emit('getContent',this.myValue)
......@@ -71,13 +75,17 @@ export default {
toolbar: this.toolbar,
branding: false,
menubar: false, // 菜单栏
toolbar_mode: 'wrap',
font_formats: "方正大标宋简体='方正大标宋简体';方正小标宋简体='方正小标宋简体';微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
toolbar_mode: "wrap",
font_formats:
"方正大标宋简体='方正大标宋简体';方正小标宋简体='方正小标宋简体';微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
//时间处理
insertdatetime_formats: ["%Y年%m月%d日", "%Y年%m月%d日 %H点%M分"],
// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
paste_data_images: true, // 默认是false的，记得要改为true才能粘贴
// paste_enable_default_filters: false,
images_upload_handler: (blobInfo, success, failure) => {
console.log("------------ image-upload 粘贴图片", blobInfo);
const img = "data:image/jpeg;base64," + blobInfo.base64();
// console.log('旧',img.length/1024);
this.dealImage(img, 1400, (newBase64) => {
......@@ -85,6 +93,25 @@ export default {
// console.log('新',newBase64.length/1024);
});
},
// paste_preprocess: (plugin, args) => {
// console.log("-------粘贴前文本过滤", args.content);
// var id = Date.parse(new Date()); //作用是给所有的img一个不会重复的id
// var sizeArr = []; //存储所有图片的尺寸信息,格式:[{id:123,width:234,height:123}]
// let lastIndex = 0; //存储args.content查询的下标
// var flag = false; //判断有没有图片
// //此处给所有img加上id
// for (let i = 0; args.content.indexOf("<img", lastIndex) != -1; i++) {
// flag = true;
// args.content = args.content.replace("<img", `<img id=${id + i}`);
// i++;
// lastIndex = args.content.indexOf("<img", lastIndex) + 1;
// }
// // 如果存在图片就执行获取图片尺寸的方法;
// if (flag) {
// console.log("-------图片处理", args.content);
// // this.getImageSize(args.content);
// }
// },
},
myValue: this.value,
};
......@@ -93,11 +120,14 @@ export default {
tinymce.init({});
},
methods: {
getImageSize(str) {
console.log("-------图片处理", str);
},
dealImage(base64, w, callback) {
var newImage = new Image();
var quality = 0.6; //压缩系数(越小导出base64越小)
newImage.src = base64;
newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要
newImage.setAttribute("crossOrigin", "Anonymous"); //url为外域时需要
var imgWidth, imgHeight;
newImage.onload = function () {
imgWidth = this.width;
......@@ -107,10 +137,10 @@ export default {
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = w * imgHeight / imgWidth;
canvas.height = (w * imgHeight) / imgWidth;
} else {
canvas.height = w;
canvas.width = w * imgWidth / imgHeight;
canvas.width = (w * imgWidth) / imgHeight;
}
} else {
canvas.width = imgWidth;
......@@ -131,12 +161,12 @@ export default {
// base64 = canvas.toDataURL("image/jpeg", quality);
// }
callback(base64); //必须通过回调函数返回，否则无法及时拿到该值
}
};
},
// 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
// 需要什么事件可以自己增加
getHtml() {
return this.myValue
return this.myValue;
},
// 可以添加一些自己的自定义事件，如清空内容
clear() {
......@@ -144,8 +174,8 @@ export default {
},
setHtml(html) {
this.myValue = html
}
this.myValue = html;
},
},
};
</script>
......
src/views/homePage/index.vue
......@@ -148,9 +148,9 @@
<!--第二栏按钮列表开始-->
<el-row class="mt-15 out-zone-style" :gutter="10">
<el-col class="mb-10" :span="3" v-for="(item,index) in btnsList" :key="index">
<el-button style="width:100%;" @click="toUrl(item.url)">
<el-button class="home-btn" style="width:100%;min-width:95px;" @click="toUrl(item.url)">
<el-image class="mr-5 gong-icon" :src="item.icon"></el-image>
{{item.name}}
<span style="width: calc(100% - 13px)">{{item.name}}</span>
</el-button>
</el-col>
</el-row>
......@@ -1588,4 +1588,8 @@ export default {
right: -1px;
top: 10px;
}
.home-btn {
padding: 9px 10px;
}
</style>
src/views/manage/index.vue
......@@ -147,7 +147,7 @@
<el-option label="普通格式" value="0"></el-option>
<!--<el-option label="区域二" value="beijing"></el-option>-->
</el-select>
<span class="ml-15">提示：在word文档中编辑好后，复制黏贴到编辑框</span>
<span class="ml-15">提示：在word文档中编辑好后，复制黏贴到编辑框（图片需单独上传）</span>
</el-form-item>
<!-- old --- v-show="isShowColumn" -->
<el-form-item label="所属栏目">
......@@ -205,6 +205,9 @@
:on-remove="handleRemove"
>
<el-button class="area-btn">浏览文件</el-button>
<span style="margin-left: 10px"
>注：附件用于下载或首张图片用于首页轮播展示</span
>
</el-upload>
</el-form-item>
<el-form-item label="今日头条">
......@@ -678,7 +681,7 @@
<el-select v-model="newsFormEdit.geshi" placeholder="请选择格式">
<el-option label="普通格式" value="0"></el-option>
</el-select>
<span class="ml-15">提示：在word文档中编辑好后，复制黏贴到编辑框</span>
<span class="ml-15">提示：在word文档中编辑好后，复制黏贴到编辑框（图片需单独上传）</span>
</el-form-item>
<el-form-item label="标题">
<el-input v-model="newsFormEdit.subject"></el-input>
......@@ -716,6 +719,9 @@
:on-preview="handlePreviewEdit"
>
<el-button class="area-btn">浏览文件</el-button>
<span style="margin-left: 10px"
>注：附件用于下载或首张图片用于首页轮播展示</span
>
</el-upload>
</el-form-item>
<el-form-item label="今日头条">
......@@ -796,7 +802,7 @@
<el-select v-model="newsFormEdit.geshi" placeholder="请选择格式" disabled>
<el-option label="普通格式" value="0"></el-option>
</el-select>
<span class="ml-15">提示：在word文档中编辑好后，复制黏贴到编辑框</span>
<span class="ml-15">提示：在word文档中编辑好后，复制黏贴到编辑框（图片需单独上传）</span>
</el-form-item>
<el-form-item label="所属栏目">
<el-row>
......@@ -855,6 +861,9 @@
:on-preview="handlePreviewEdit"
>
<el-button class="area-btn">浏览文件</el-button>
<span style="margin-left: 10px"
>注：附件用于下载或首张图片用于首页轮播展示</span
>
</el-upload>
</el-form-item>
<el-form-item label="今日头条">
......@@ -2744,3 +2753,14 @@ ul {
}
}
</style>
<style lang="scss">
.el-dialog__wrapper {
z-index: 1000 !important;
}
.el-dialog {
z-index: 1001 !important;
}
.v-modal {
z-index: 999 !important;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment