Skip to content

C
court-inner
Commit f22fd116 by 杨琪琪
Options

更新

parent d13449be
Showing with 75 additions and 20 deletions
src/components/EditorTinymce.vue
<template> <template>
<div class="editor"> <div class="editor">
<editor v-model="myValue" :init="init"></editor> <editor v-model="myValue" :init="init"></editor>
</div> </div>
</template> </template>
<script> <script>
...@@ -21,6 +21,7 @@ import "tinymce/plugins/fullscreen"; ...@@ -21,6 +21,7 @@ import "tinymce/plugins/fullscreen";
import "tinymce/plugins/insertdatetime"; import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/hr"; import "tinymce/plugins/hr";
import "tinymce/plugins/code"; import "tinymce/plugins/code";
import "tinymce/plugins/paste";
export default { export default {
components: { components: {
...@@ -38,12 +39,15 @@ export default { ...@@ -38,12 +39,15 @@ export default {
}, },
plugins: { plugins: {
type: [String, Array], type: [String, Array],
// default: "lists image media 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", default:
"lists image table wordcount link fullscreen insertdatetime hr code",
}, },
toolbar: { toolbar: {
type: [String, Array], 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: "", // default: "",
}, },
}, },
...@@ -52,7 +56,7 @@ export default { ...@@ -52,7 +56,7 @@ export default {
this.myValue = newValue; this.myValue = newValue;
}, },
myValue(newValue) { myValue(newValue) {
this.$emit('update:value', newValue) this.$emit("update:value", newValue);
// console.log(newValue) // console.log(newValue)
// this.$emit("input", newValue); // this.$emit("input", newValue);
// this.$emit('getContent',this.myValue) // this.$emit('getContent',this.myValue)
...@@ -71,13 +75,17 @@ export default { ...@@ -71,13 +75,17 @@ export default {
toolbar: this.toolbar, toolbar: this.toolbar,
branding: false, branding: false,
menubar: false, // 菜单栏 menubar: false, // 菜单栏
toolbar_mode: 'wrap', 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", 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分"], insertdatetime_formats: ["%Y年%m月%d日", "%Y年%m月%d日 %H点%M分"],
// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片， // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler // 如需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) => { images_upload_handler: (blobInfo, success, failure) => {
console.log("------------ image-upload 粘贴图片", blobInfo);
const img = "data:image/jpeg;base64," + blobInfo.base64(); const img = "data:image/jpeg;base64," + blobInfo.base64();
// console.log('旧',img.length/1024); // console.log('旧',img.length/1024);
this.dealImage(img, 1400, (newBase64) => { this.dealImage(img, 1400, (newBase64) => {
...@@ -85,6 +93,25 @@ export default { ...@@ -85,6 +93,25 @@ export default {
// console.log('新',newBase64.length/1024); // 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, myValue: this.value,
}; };
...@@ -93,11 +120,14 @@ export default { ...@@ -93,11 +120,14 @@ export default {
tinymce.init({}); tinymce.init({});
}, },
methods: { methods: {
getImageSize(str) {
console.log("-------图片处理", str);
},
dealImage(base64, w, callback) { dealImage(base64, w, callback) {
var newImage = new Image(); var newImage = new Image();
var quality = 0.6; //压缩系数(越小导出base64越小) var quality = 0.6; //压缩系数(越小导出base64越小)
newImage.src = base64; newImage.src = base64;
newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要 newImage.setAttribute("crossOrigin", "Anonymous"); //url为外域时需要
var imgWidth, imgHeight; var imgWidth, imgHeight;
newImage.onload = function () { newImage.onload = function () {
imgWidth = this.width; imgWidth = this.width;
...@@ -107,10 +137,10 @@ export default { ...@@ -107,10 +137,10 @@ export default {
if (Math.max(imgWidth, imgHeight) > w) { if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) { if (imgWidth > imgHeight) {
canvas.width = w; canvas.width = w;
canvas.height = w * imgHeight / imgWidth; canvas.height = (w * imgHeight) / imgWidth;
} else { } else {
canvas.height = w; canvas.height = w;
canvas.width = w * imgWidth / imgHeight; canvas.width = (w * imgWidth) / imgHeight;
} }
} else { } else {
canvas.width = imgWidth; canvas.width = imgWidth;
...@@ -131,12 +161,12 @@ export default { ...@@ -131,12 +161,12 @@ export default {
// base64 = canvas.toDataURL("image/jpeg", quality); // base64 = canvas.toDataURL("image/jpeg", quality);
// } // }
callback(base64); //必须通过回调函数返回，否则无法及时拿到该值 callback(base64); //必须通过回调函数返回，否则无法及时拿到该值
} };
}, },
// 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
// 需要什么事件可以自己增加 // 需要什么事件可以自己增加
getHtml() { getHtml() {
return this.myValue return this.myValue;
}, },
// 可以添加一些自己的自定义事件，如清空内容 // 可以添加一些自己的自定义事件，如清空内容
clear() { clear() {
...@@ -144,8 +174,8 @@ export default { ...@@ -144,8 +174,8 @@ export default {
}, },
setHtml(html) { setHtml(html) {
this.myValue = html this.myValue = html;
} },
}, },
}; };
</script> </script>
......
src/views/homePage/index.vue
...@@ -148,9 +148,9 @@ ...@@ -148,9 +148,9 @@
<!--第二栏按钮列表开始--> <!--第二栏按钮列表开始-->
<el-row class="mt-15 out-zone-style" :gutter="10"> <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-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> <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-button>
</el-col> </el-col>
</el-row> </el-row>
...@@ -1588,4 +1588,8 @@ export default { ...@@ -1588,4 +1588,8 @@ export default {
right: -1px; right: -1px;
top: 10px; top: 10px;
} }
.home-btn {
padding: 9px 10px;
}
</style> </style>
src/views/manage/index.vue
...@@ -147,7 +147,7 @@ ...@@ -147,7 +147,7 @@
<el-option label="普通格式" value="0"></el-option> <el-option label="普通格式" value="0"></el-option>
<!--<el-option label="区域二" value="beijing"></el-option>--> <!--<el-option label="区域二" value="beijing"></el-option>-->
</el-select> </el-select>
<span class="ml-15">提示：在word文档中编辑好后，复制黏贴到编辑框</span> <span class="ml-15">提示：在word文档中编辑好后，复制黏贴到编辑框（图片需单独上传）</span>
</el-form-item> </el-form-item>
<!-- old --- v-show="isShowColumn" --> <!-- old --- v-show="isShowColumn" -->
<el-form-item label="所属栏目"> <el-form-item label="所属栏目">
...@@ -205,6 +205,9 @@ ...@@ -205,6 +205,9 @@
:on-remove="handleRemove" :on-remove="handleRemove"
> >
<el-button class="area-btn">浏览文件</el-button> <el-button class="area-btn">浏览文件</el-button>
<span style="margin-left: 10px"
>注：附件用于下载或首张图片用于首页轮播展示</span
>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item label="今日头条"> <el-form-item label="今日头条">
...@@ -678,7 +681,7 @@ ...@@ -678,7 +681,7 @@
<el-select v-model="newsFormEdit.geshi" placeholder="请选择格式"> <el-select v-model="newsFormEdit.geshi" placeholder="请选择格式">
<el-option label="普通格式" value="0"></el-option> <el-option label="普通格式" value="0"></el-option>
</el-select> </el-select>
<span class="ml-15">提示：在word文档中编辑好后，复制黏贴到编辑框</span> <span class="ml-15">提示：在word文档中编辑好后，复制黏贴到编辑框（图片需单独上传）</span>
</el-form-item> </el-form-item>
<el-form-item label="标题"> <el-form-item label="标题">
<el-input v-model="newsFormEdit.subject"></el-input> <el-input v-model="newsFormEdit.subject"></el-input>
...@@ -716,6 +719,9 @@ ...@@ -716,6 +719,9 @@
:on-preview="handlePreviewEdit" :on-preview="handlePreviewEdit"
> >
<el-button class="area-btn">浏览文件</el-button> <el-button class="area-btn">浏览文件</el-button>
<span style="margin-left: 10px"
>注：附件用于下载或首张图片用于首页轮播展示</span
>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item label="今日头条"> <el-form-item label="今日头条">
...@@ -796,7 +802,7 @@ ...@@ -796,7 +802,7 @@
<el-select v-model="newsFormEdit.geshi" placeholder="请选择格式" disabled> <el-select v-model="newsFormEdit.geshi" placeholder="请选择格式" disabled>
<el-option label="普通格式" value="0"></el-option> <el-option label="普通格式" value="0"></el-option>
</el-select> </el-select>
<span class="ml-15">提示：在word文档中编辑好后，复制黏贴到编辑框</span> <span class="ml-15">提示：在word文档中编辑好后，复制黏贴到编辑框（图片需单独上传）</span>
</el-form-item> </el-form-item>
<el-form-item label="所属栏目"> <el-form-item label="所属栏目">
<el-row> <el-row>
...@@ -855,6 +861,9 @@ ...@@ -855,6 +861,9 @@
:on-preview="handlePreviewEdit" :on-preview="handlePreviewEdit"
> >
<el-button class="area-btn">浏览文件</el-button> <el-button class="area-btn">浏览文件</el-button>
<span style="margin-left: 10px"
>注：附件用于下载或首张图片用于首页轮播展示</span
>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item label="今日头条"> <el-form-item label="今日头条">
...@@ -2744,3 +2753,14 @@ ul { ...@@ -2744,3 +2753,14 @@ ul {
} }
} }
</style> </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