@ -1,84 +1,110 @@
< template >
< div :class ="{fullscreen:fullscreen}" class = "tinymce-container editor-container" >
< div
: class = "{ fullscreen: fullscreen }"
class = "tinymce-container editor-container"
>
< textarea :id ="tinymceId" class = "tinymce-textarea" / >
< el -dialog id = "editor-dialog" class = "image-dialog" title = "选择图片" :visible.sync ="dialogVisible" width = "70%" :close-on-click-modal ="false" append -to -body >
< upload -image :multiple ="true" :branch-id ="userInfo.branchId" :dept-id ="userInfo.deptid" :visible ="dialogVisible" @cancel ="dialogVisible=false" @confirm ="handleConfirm" > < / upload -image >
< el -dialog
id = "editor-dialog"
class = "image-dialog"
title = "选择图片"
: visible . sync = "dialogVisible"
width = "70%"
: close - on - click - modal = "false"
append - to - body
>
< upload -image
: multiple = "true"
: branch - id = "userInfo.branchId"
: dept - id = "userInfo.deptid"
: visible = "dialogVisible"
@ cancel = "dialogVisible = false"
@ confirm = "handleConfirm"
> < / u p l o a d - i m a g e >
< / e l - d i a l o g >
< el -upload v -show = " false " :disabled ="uploadOptions.categoryId==''||uploadOptions.categoryId==null" class = "upload-demo" :show-file-list ="false" :action ="uploadAction" :on-success ="handleSuccess" :before-upload ="beforeupload" :data ="uploadOptions" multiple >
< el -button type = "primary" :id ="tinymceId+'-uploadImageBtn'" > 点击上传 < / e l - b u t t o n >
< / e l - u p l o a d >
< / div >
< / template >
< script >
import config from '@/common/config' ; / / 全 局 公 共 库 i m p o r t
import UploadImage from '@/components/Image/UploadImage' ;
import { mapGetters } from 'vuex'
import plugins from './plugins'
import toolbar from './toolbar'
import config from "@/common/config" ; / / 全 局 公 共 库 i m p o r t
import UploadImage from "@/components/Image/UploadImage" ;
import { uploadBase64 } from '@/api/mdp/arc/image' ;
import { mapGetters } from "vuex" ;
import plugins from "./plugins" ;
import toolbar from "./toolbar" ;
export default {
name : 'Tinymce' ,
name : "Tinymce" ,
components : { UploadImage } ,
props : {
value : {
type : String ,
default : ''
default : "" ,
} ,
toolbar : {
type : Array ,
required : false ,
default ( ) {
return [ ]
}
return [ ] ;
} ,
} ,
menubar : {
type : String ,
default : 'file edit insert view format table'
default : "file edit insert view format table" ,
} ,
height : {
type : Number ,
required : false ,
default : 360
}
default : 360 ,
} ,
} ,
data ( ) {
return {
uploadAction : config . getArcImagePath ( ) + "/arc/image/upload" ,
uploadOptions : { branchId : '' , categoryId : 'uploadImm' , fileName : '' , remark : '' , deptid : '' } , / / 当 前 选 择 上 传 图 片 的 类 型
imageList : [ ] ,
dialogVisible : false ,
editorHtmlData : this . value ,
tinymceId : 'vue-tinymce-' + new Date ( ) . getTime ( ) + ( ( Math . random ( ) * 1000 ) . toFixed ( 0 ) + '' ) ,
tinymceId :
"vue-tinymce-" +
new Date ( ) . getTime ( ) +
( ( Math . random ( ) * 1000 ) . toFixed ( 0 ) + "" ) ,
fullscreen : false ,
languageTypeList : {
'en' : 'en' ,
'zh' : 'zh_CN'
}
}
en : "en" ,
zh : "zh_CN" ,
} ,
} ;
} ,
computed : {
language ( ) {
return this . languageTypeList [ this . $store . getters . language ]
return this . languageTypeList [ this . $store . getters . language ] ;
} ,
... mapGetters ( [
'userInfo'
] )
... mapGetters ( [ "userInfo" ] ) ,
} ,
watch : {
value ( val ) {
if ( val == this . editorHtmlData ) {
return ;
}
this . $nextTick ( ( ) => window . tinymce . get ( this . tinymceId ) . setContent ( val || '' ) )
this . $nextTick ( ( ) =>
window . tinymce . get ( this . tinymceId ) . setContent ( val || "" )
) ;
} ,
editorHtmlData ( val ) {
this . $emit ( "input" , val )
this . $emit ( "input" , val ) ;
} ,
language ( ) {
this . destroyTinymce ( )
this . destroyTinymce ( ) ;
/ / t h i s . $ n e x t T i c k ( ( ) = > t h i s . i n i t T i n y m c e ( ) )
}
} ,
} ,
mounted ( ) {
this . $nextTick ( ( ) => this . initTinymce ( ) )
this . $nextTick ( ( ) => this . initTinymce ( ) ) ;
} ,
/ * *
activated ( ) {
@ -94,56 +120,62 @@ export default {
* /
methods : {
initTinymce ( ) {
debugger
const _this = this
const _this = this ;
window . tinymce . init ( {
language : this . language ,
selector : ` # ${ this . tinymceId } ` ,
height : this . height ,
body_class : 'panel-body ' ,
body_class : "panel-body " ,
object_resizing : false ,
toolbar : this . toolbar . length > 0 ? this . toolbar : toolbar ,
menubar : this . menubar ,
plugins : plugins ,
end_container_on_empty_block : true ,
powerpaste_word_import : 'clean' ,
powerpaste_word_import : "clean" ,
code_dialog_height : 450 ,
code_dialog_width : 1000 ,
advlist_bullet_styles : 'square' ,
advlist_number_styles : 'default' ,
imagetools_cors_hosts : [ 'www.qingqinkj.com' , 'codepen.io' ] ,
default_link_target : '_blank' ,
advlist_bullet_styles : "square" ,
advlist_number_styles : "default" ,
imagetools_cors_hosts : [ "www.qingqinkj.com" , "codepen.io" ] ,
default_link_target : "_blank" ,
link_title : false ,
convert_urls : false ,
fontsize_formats : "8pt 10pt 12pt 14pt 18pt 20pt 24pt 28pt 30pt 36pt 38pt 40pt 42pt 46pt 48pt" ,
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" ,
paste_data_images : true ,
fontsize_formats :
"8pt 10pt 12pt 14pt 18pt 20pt 24pt 28pt 30pt 36pt 38pt 40pt 42pt 46pt 48pt" ,
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" ,
nonbreaking_force_tab : true , / / i n s e r t i n g n o n b r e a k i n g s p a c e & n b s p ; n e e d N o n b r e a k i n g S p a c e P l u g i n
init_instance_callback : editor => {
init_instance_callback : ( editor ) => {
if ( _this . value ) {
editor . setContent ( _this . value )
editor . setContent ( _this . value ) ;
}
editor . on ( 'NodeChange Change KeyUp SetContent' , ( ) => {
_this . editorHtmlData = editor . getContent ( )
} )
editor . on ( "NodeChange Change KeyUp SetContent" , ( ) => {
_this . editorHtmlData = editor . getContent ( ) ;
} ) ;
} ,
setup ( editor ) {
editor . on ( 'FullscreenStateChanged' , ( e ) => {
_this . fullscreen = e . state
} )
editor . addButton ( 'imageList' , {
text : '图片库' ,
editor . on ( "FullscreenStateChanged" , ( e ) => {
_this . fullscreen = e . state ;
} ) ;
editor . addButton ( 'insertImage' , {
text : "插入图片" ,
icon : false ,
onclick : function ( ) {
document . getElementById ( _this . tinymceId + "-uploadImageBtn" ) . click ( ) ;
} ,
} ) ;
editor . addButton ( "imageList" , {
text : "图片库" ,
icon : false ,
onclick : function ( ) {
_this . dialogVisible = true ;
_this . $nextTick ( ( ) => {
/ / d o c u m e n t . g e t E l e m e n t B y I d ( " e d i t o r - d i a l o g " ) . s t y l e . z I n d e x = " 1 0 0 0 0 0 "
} )
}
} )
}
} ) ;
} ,
} ) ;
} ,
/ / 整 合 七 牛 上 传
/ / i m a g e s _ d a t a i m g _ f i l t e r ( i m g ) {
/ / s e t T i m e o u t ( ( ) = > {
@ -160,66 +192,82 @@ export default {
/ / r e t u r n i m g
/ / } ,
/ / i m a g e s _ u p l o a d _ h a n d l e r ( b l o b I n f o , s u c c e s s , f a i l u r e , p r o g r e s s ) {
/ / p r o g r e s s ( 0 ) ;
/ / c o n s t t o k e n = _ t h i s . $ s t o r e . g e t t e r s . t o k e n ;
/ / g e t T o k e n ( t o k e n ) . t h e n ( r e s p o n s e = > {
/ / c o n s t u r l = r e s p o n s e . d a t a . q i n i u _ u r l ;
/ / c o n s t f o r m D a t a = n e w F o r m D a t a ( ) ;
/ / f o r m D a t a . a p p e n d ( ' t o k e n ' , r e s p o n s e . d a t a . q i n i u _ t o k e n ) ;
/ / f o r m D a t a . a p p e n d ( ' k e y ' , r e s p o n s e . d a t a . q i n i u _ k e y ) ;
/ / f o r m D a t a . a p p e n d ( ' f i l e ' , b l o b I n f o . b l o b ( ) , u r l ) ;
/ / u p l o a d ( f o r m D a t a ) . t h e n ( ( ) = > {
/ / s u c c e s s ( u r l ) ;
/ / p r o g r e s s ( 1 0 0 ) ;
/ / v a r p a r a m s = t h i s . u p l o a d O p t i o n s ;
/ / p a r a m s . s t o r e d b = " 0 "
/ / p a r a m s . f i l e D a t a = b l o b I n f o . b l o b ( ) ;
/ / u p l o a d B a s e 6 4 ( f o r m D a t a ) . t h e n ( ( r e s ) = > {
/ / h a n d l e C o n f i r m ( [ r e s . d a t a ] )
/ / } )
/ / } ) . c a t c h ( e r r = > {
/ / f a i l u r e ( ' 出 现 未 知 问 题 ， 刷 新 页 面 ， 或 者 联 系 程 序 员 ' )
/ / c o n s o l e . l o g ( e r r ) ;
/ / } ) ;
/ / } ,
} )
this . setContent ( this . value )
/ / } ,
} ) ;
this . setContent ( this . value ) ;
} ,
destroyTinymce ( ) {
const tinymce = window . tinymce . get ( this . tinymceId )
const tinymce = window . tinymce . get ( this . tinymceId ) ;
if ( this . fullscreen ) {
tinymce . execCommand ( 'mceFullScreen' )
tinymce . execCommand ( "mceFullScreen" ) ;
}
if ( tinymce ) {
tinymce . destroy ( )
tinymce . destroy ( ) ;
}
} ,
setContent ( value ) {
window . tinymce . get ( this . tinymceId ) . setContent ( value )
window . tinymce . get ( this . tinymceId ) . setContent ( value ) ;
} ,
getContent ( ) {
window . tinymce . get ( this . tinymceId ) . getContent ( )
window . tinymce . get ( this . tinymceId ) . getContent ( ) ;
} ,
insertImage ( ) {
let imageList = this . imageList ;
let imageHtml = "" ;
( imageList || [ ] ) . map ( item => {
imageHtml = imageHtml + "<p><img class='image' src=\"" + item . url + "\"/></p>" ;
} )
( imageList || [ ] ) . map ( ( item ) => {
imageHtml =
imageHtml + "<p><img class='image' src='" + item . url + "'></p>" ;
} ) ;
if ( imageHtml != "" ) {
window . tinymce . get ( this . tinymceId ) . insertContent ( ` ${ imageHtml } ` )
window . tinymce . get ( this . tinymceId ) . insertContent ( ` ${ imageHtml } ` ) ;
}
this . dialogVisible = false ;
} ,
handleConfirm ( imgs ) {
this . imageList = imgs / / { u r l : x x x , r e m a r k : x x x x }
this . imageList = imgs ; / / { u r l : x x x , r e m a r k : x x x x }
this . insertImage ( ) ;
} ,
imageSuccessCBK ( arr ) {
const _this = this
arr . forEach ( v => {
window . tinymce . get ( _this . tinymceId ) . insertContent ( ` <img class="wscnph" src=" ${ v . url } " > ` )
const _this = this ;
arr . forEach ( ( v ) => {
window . tinymce
. get ( _this . tinymceId )
. insertContent ( ` <img class="wscnph" src=" ${ v . url } " > ` ) ;
} ) ;
} ,
handleSuccess ( res , file ) {
this . $nextTick ( ( ) => {
this . handleConfirm ( [ res . data ] )
} )
} ,
beforeupload ( file ) {
if ( this . uploadOptions . categoryId == '' || this . uploadOptions . categoryId == null ) {
this . $message ( { message : "请选择分类" , type : "warning" } ) ;
return false ;
}
if ( file . size <= 1024 * 2024 ) { / / 1 M
return true ;
} else {
this . $message ( { message : '为了良好的客户体验，大于2M的文件需经过裁剪压缩处理' , type : 'warning' } ) ;
return false ;
}
}
} ,
} ,
} ;
< / script >
< style scoped >
@ -250,5 +298,4 @@ export default {
# editor - dialog {
z - index : 20000 ! important ;
}
< / style >
陈裕财
4 years ago