Skip to content

C
court-inner
Commit f22fd116 by 杨琪琪
Options

更新

parent d13449be
Showing with 180 additions and 125 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,142 +21,172 @@ import "tinymce/plugins/fullscreen"; ...@@ -21,142 +21,172 @@ 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: {
Editor, Editor,
},
name: "tinymce",
props: {
value: {
type: String,
default: "",
}, },
name: "tinymce", disabled: {
props: { type: Boolean,
value: { default: false,
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
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",
},
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",
// default: "",
},
}, },
watch: { plugins: {
value(newValue) { type: [String, Array],
this.myValue = newValue; // default: "lists image media table wordcount link fullscreen insertdatetime hr code", paste // 粘贴
}, default:
myValue(newValue) { "lists image table wordcount link fullscreen insertdatetime hr code",
this.$emit('update:value', newValue)
// console.log(newValue)
// this.$emit("input", newValue);
// this.$emit('getContent',this.myValue)
},
}, },
data() { toolbar: {
return { type: [String, Array],
init: { // paste 粘贴
fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt", // 第二步 default:
language_url: "/tinymce/langs/zh_CN.js", "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",
language: "zh_CN", // default: "",
skin_url: "/tinymce/skins/ui/oxide",
// skin_url: 'tinymce/skins/ui/oxide-dark',//暗色系
height: 500,
plugins: this.plugins,
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",
//时间处理
insertdatetime_formats: ["%Y年%m月%d日", "%Y年%m月%d日 %H点%M分"],
// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
images_upload_handler: (blobInfo, success, failure) => {
const img = "data:image/jpeg;base64," + blobInfo.base64();
// console.log('旧',img.length/1024);
this.dealImage(img, 1400, (newBase64) => {
success(newBase64);
// console.log('新',newBase64.length/1024);
});
},
},
myValue: this.value,
};
}, },
mounted() { },
tinymce.init({}); watch: {
value(newValue) {
this.myValue = newValue;
}, },
methods: { myValue(newValue) {
dealImage(base64, w, callback) { this.$emit("update:value", newValue);
var newImage = new Image(); // console.log(newValue)
var quality = 0.6; //压缩系数(越小导出base64越小) // this.$emit("input", newValue);
newImage.src = base64; // this.$emit('getContent',this.myValue)
newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要 },
var imgWidth, imgHeight; },
newImage.onload = function () { data() {
imgWidth = this.width; return {
imgHeight = this.height; init: {
var canvas = document.createElement("canvas"); fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt", // 第二步
var ctx = canvas.getContext("2d"); language_url: "/tinymce/langs/zh_CN.js",
if (Math.max(imgWidth, imgHeight) > w) { language: "zh_CN",
if (imgWidth > imgHeight) { skin_url: "/tinymce/skins/ui/oxide",
canvas.width = w; // skin_url: 'tinymce/skins/ui/oxide-dark',//暗色系
canvas.height = w * imgHeight / imgWidth; height: 500,
} else { plugins: this.plugins,
canvas.height = w; toolbar: this.toolbar,
canvas.width = w * imgWidth / imgHeight; branding: false,
} menubar: false, // 菜单栏
} else { toolbar_mode: "wrap",
canvas.width = imgWidth; font_formats:
canvas.height = imgHeight; "方正大标宋简体='方正大标宋简体';方正小标宋简体='方正小标宋简体';微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';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",
quality = 0.6; //时间处理
} insertdatetime_formats: ["%Y年%m月%d日", "%Y年%m月%d日 %H点%M分"],
ctx.clearRect(0, 0, canvas.width, canvas.height); // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
ctx.drawImage(this, 0, 0, canvas.width, canvas.height); // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句 paste_data_images: true, // 默认是false的，记得要改为true才能粘贴
// 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定 // paste_enable_default_filters: false,
// while (base64.length / 1024 > 150) { images_upload_handler: (blobInfo, success, failure) => {
// quality -= 0.01; console.log("------------ image-upload 粘贴图片", blobInfo);
// base64 = canvas.toDataURL("image/jpeg", quality); const img = "data:image/jpeg;base64," + blobInfo.base64();
// } // console.log('旧',img.length/1024);
// 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑 this.dealImage(img, 1400, (newBase64) => {
// while (base64.length / 1024 < 50) { success(newBase64);
// quality += 0.001; // console.log('新',newBase64.length/1024);
// base64 = canvas.toDataURL("image/jpeg", quality); });
// }
callback(base64); //必须通过回调函数返回，否则无法及时拿到该值
}
},
// 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
// 需要什么事件可以自己增加
getHtml() {
return this.myValue
},
// 可以添加一些自己的自定义事件，如清空内容
clear() {
this.myValue = "";
}, },
// paste_preprocess: (plugin, args) => {
setHtml(html) { // console.log("-------粘贴前文本过滤", args.content);
this.myValue = html // 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,
};
},
mounted() {
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为外域时需要
var imgWidth, imgHeight;
newImage.onload = function () {
imgWidth = this.width;
imgHeight = this.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = (w * imgHeight) / imgWidth;
} else {
canvas.height = w;
canvas.width = (w * imgWidth) / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
quality = 0.6;
} }
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
// 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
// while (base64.length / 1024 > 150) {
// quality -= 0.01;
// base64 = canvas.toDataURL("image/jpeg", quality);
// }
// 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
// while (base64.length / 1024 < 50) {
// quality += 0.001;
// base64 = canvas.toDataURL("image/jpeg", quality);
// }
callback(base64); //必须通过回调函数返回，否则无法及时拿到该值
};
},
// 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
// 需要什么事件可以自己增加
getHtml() {
return this.myValue;
},
// 可以添加一些自己的自定义事件，如清空内容
clear() {
this.myValue = "";
},
setHtml(html) {
this.myValue = html;
}, },
},
}; };
</script> </script>
<style> <style>
.editor { .editor {
/* min-width: 800px !important; /* min-width: 800px !important;
max-width: 1000px; */ max-width: 1000px; */
} }
.tinymce-box { .tinymce-box {
height: 350px; height: 350px;
} }
</style> </style>
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="今日头条">
...@@ -2743,4 +2752,15 @@ ul { ...@@ -2743,4 +2752,15 @@ 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> </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