interru/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix[Tinymce]: custom-btn bug in fullscreen

Browse source
This commit is contained in:
Pan 2018-05-09 14:36:17 +08:00
parent 597df4844a
commit 6795c26d02
2 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/Tinymce/index.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="tinymce-container editor-container"> <div class="tinymce-container editor-container" :class="{fullscreen:fullscreen}">
<textarea class="tinymce-textarea" :id="tinymceId"></textarea> <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
<div class="editor-custom-btn-container"> <div class="editor-custom-btn-container">
<editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage> <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
@ -43,7 +43,8 @@ export default {
return { return {
hasChange: false, hasChange: false,
hasInit: false, hasInit: false,
tinymceId: this.id || 'vue-tinymce-' + +new Date() tinymceId: this.id || 'vue-tinymce-' + +new Date(),
fullscreen: false
} }
}, },
watch: { watch: {
@ -91,6 +92,11 @@ export default {
this.hasChange = true this.hasChange = true
this.$emit('input', editor.getContent()) this.$emit('input', editor.getContent())
}) })
},
setup(editor) {
editor.on('FullscreenStateChanged', (e) => {
_this.fullscreen = e.state
})
} }
// 整合七牛上传 // 整合七牛上传
// images_dataimg_filter(img) { // images_dataimg_filter(img) {
@ -168,6 +174,10 @@ export default {
top: 4px; top: 4px;
/*z-index: 2005;*/ /*z-index: 2005;*/
} }
.fullscreen .editor-custom-btn-container {
z-index: 10000;
position: fixed;
}
.editor-upload-btn { .editor-upload-btn {
display: inline-block; display: inline-block;
} }

2
src/components/Tinymce/toolbar.js
View file

@ -1,6 +1,6 @@
// Here is a list of the toolbar // Here is a list of the toolbar
// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols // Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak fullscreen insertdatetime media table emoticons forecolor backcolor'] const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
export default toolbar export default toolbar