Skip to content
项目
群组
代码片段
帮助
正在加载...
帮助
提交反馈
为 GitLab 提交贡献
登录
切换导航
iBiz-Vue-R7-Res
项目
项目
详情
动态
版本
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
计划
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
统计图
创建新议题
作业
提交
议题看板
打开侧边栏
iBiz-R7前端标准模板
iBiz-Vue-R7-Res
提交
14c3b206
提交
14c3b206
编写于
5月 08, 2020
作者:
WodahsOrez
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
lxm--富文本国际化切换失效bug修复
上级
0ce71eda
变更
1
显示空白字符变更
内嵌
并排
正在显示
1 个修改的文件
包含
140 行增加
和
68 行删除
+140
-68
app-rich-text-editor.vue
src/components/app-rich-text-editor/app-rich-text-editor.vue
+140
-68
未找到文件。
src/components/app-rich-text-editor/app-rich-text-editor.vue
浏览文件 @
14c3b206
...
@@ -26,94 +26,112 @@ const tinymceCode:any = tinymce;
...
@@ -26,94 +26,112 @@ const tinymceCode:any = tinymce;
@
Component
({})
@
Component
({})
export
default
class
AppRichTextEditor
extends
Vue
{
export
default
class
AppRichTextEditor
extends
Vue
{
/**
/**
* 传入值
* 传入值
*
* @type {*}
* @memberof AppRichTextEditor
*/
*/
@
Prop
()
value
?:
any
;
@
Prop
()
value
?:
any
;
/**
* 监听value值
*/
@
Watch
(
'value'
,
{
immediate
:
true
,
deep
:
true
})
oncurrentContent
(
newval
:
any
,
val
:
any
)
{
if
(
newval
)
{
if
(
this
.
editor
){
tinymceCode
.
remove
(
'#'
+
this
.
id
);
}
this
.
init
(
newval
);
}
}
/**
/**
* 输入name
* 输入name
*
* @type {string}
* @memberof AppRichTextEditor
*/
*/
@
Prop
()
name
?:
string
;
@
Prop
()
name
?:
string
;
/**
/**
* 输入高度
* 输入高度
*
* @type {*}
* @memberof AppRichTextEditor
*/
*/
@
Prop
()
height
?:
any
;
@
Prop
()
height
?:
any
;
/**
/**
* 是否禁用
* 是否禁用
*
* @type {boolean}
* @memberof AppRichTextEditor
*/
*/
@
Prop
()
disabled
?:
any
;
@
Prop
()
disabled
?:
boolean
;
/**
* 当前语言,默认中文
*/
public
langu
:
any
=
localStorage
.
getItem
(
'local'
)
?
localStorage
.
getItem
(
'local'
)
:
'zh_CN'
;
/**
/**
* 监听语言变化
* 表单状态
*/
*
@
Watch
(
'$i18n.locale'
)
* @type {Subject<any>}
onLocaleChange
(
newval
:
any
,
val
:
any
)
{
* @memberof AppRichTextEditor
console
.
log
(
"语言变更"
+
newval
)
this
.
langu
=
newval
;
if
(
this
.
editor
){
tinymceCode
.
remove
(
'#'
+
this
.
id
);
}
this
.
init
(
''
);
}
/**
* 语言映射文件
*/
*/
public
languMap
:
any
=
{
@
Prop
()
public
formState
?:
Subject
<
any
>
;
'zh-CN'
:
'zh_CN'
,
'en-US'
:
'en_US'
,
};
/**
/**
* 上传文件路径
* 上传文件路径
*
* @type {string}
* @memberof AppRichTextEditor
*/
*/
public
uploadUrl
=
Environment
.
BaseUrl
+
Environment
.
UploadFile
;
public
uploadUrl
=
Environment
.
BaseUrl
+
Environment
.
UploadFile
;
/**
/**
* 下载路径
* 下载路径
*
* @type {string}
* @memberof AppRichTextEditor
*/
*/
public
downloadUrl
=
Environment
.
BaseUrl
+
Environment
.
ExportFile
;
public
downloadUrl
=
Environment
.
BaseUrl
+
Environment
.
ExportFile
;
/**
/**
* 当前富文本
* 当前富文本
*
* @type {*}
* @memberof AppRichTextEditor
*/
*/
public
editor
:
any
=
null
;
public
editor
:
any
=
null
;
/**
/**
* 当前富文本id
* 当前富文本id
*
* @type {string}
* @memberof AppRichTextEditor
*/
*/
id
:
string
=
this
.
$util
.
createUUID
();
public
id
:
string
=
this
.
$util
.
createUUID
();
/**
/**
*
表单状态
*
当前语言,默认中文
*
*
* @type {
Subject<any>
}
* @type {
*
}
* @memberof AppRichTextEditor
* @memberof AppRichTextEditor
*/
*/
@
Prop
()
public
formState
?:
Subject
<
any
>
;
public
langu
:
any
=
localStorage
.
getItem
(
'local'
)
?
localStorage
.
getItem
(
'local'
)
:
'zh_CN'
;
/**
* 语言映射文件
*
* @type {*}
* @memberof AppRichTextEditor
*/
public
languMap
:
any
=
{
'zh-CN'
:
'zh_CN'
,
'en-US'
:
'en_US'
,
};
/**
* 是否处于激活状态
*
* @type {boolean}
* @memberof AppRichTextEditor
*/
public
isActived
:
boolean
=
true
;
/**
* 是否需要初始化
*
* @type {boolean}
* @memberof AppRichTextEditor
*/
public
isNeedInit
:
boolean
=
false
;
/**
/**
* 生命周期
* 生命周期
...
@@ -125,10 +143,7 @@ export default class AppRichTextEditor extends Vue {
...
@@ -125,10 +143,7 @@ export default class AppRichTextEditor extends Vue {
this
.
formState
.
subscribe
(({
type
,
data
})
=>
{
this
.
formState
.
subscribe
(({
type
,
data
})
=>
{
if
(
Object
.
is
(
'load'
,
type
))
{
if
(
Object
.
is
(
'load'
,
type
))
{
if
(
!
this
.
value
)
{
if
(
!
this
.
value
)
{
if
(
this
.
editor
){
this
.
init
();
tinymceCode
.
remove
(
'#'
+
this
.
id
);
}
this
.
init
(
this
.
value
);
}
}
}
}
});
});
...
@@ -136,29 +151,84 @@ export default class AppRichTextEditor extends Vue {
...
@@ -136,29 +151,84 @@ export default class AppRichTextEditor extends Vue {
}
}
/**
/**
* 初始化富文本
* 生命周期:激活
*
* @memberof AppRichTextEditor
*/
public
activated
(){
this
.
isActived
=
true
;
if
(
this
.
isNeedInit
){
this
.
init
();
this
.
isNeedInit
=
false
;
}
}
/**
* 生命周期:缓存
*
* @memberof AppRichTextEditor
*/
public
deactivated
(){
this
.
isActived
=
false
;
}
/**
* 生命周期:初始化富文本
*
* @memberof AppRichTextEditor
*/
*/
public
mounted
()
{
public
mounted
()
{
this
.
init
(
''
);
this
.
init
();
}
}
/**
/**
* 销毁富文本
* 生命周期:销毁富文本
*
* @memberof AppRichTextEditor
*/
*/
public
destoryed
(){
public
destoryed
(){
tinymceCode
.
remove
(
this
.
editor
);
if
(
this
.
editor
){
tinymceCode
.
remove
(
'#'
+
this
.
id
);
}
}
/**
* 监听value值
*
* @memberof AppRichTextEditor
*/
@
Watch
(
'value'
,
{
immediate
:
true
,
deep
:
true
})
oncurrentContent
(
newval
:
any
,
val
:
any
)
{
if
(
newval
)
{
this
.
init
();
}
}
/**
* 监听语言变化
*/
@
Watch
(
'$i18n.locale'
)
onLocaleChange
(
newval
:
any
,
val
:
any
)
{
this
.
langu
=
newval
;
if
(
this
.
isActived
){
this
.
init
();
}
else
{
this
.
isNeedInit
=
true
;
}
}
}
/**
/**
* 初始化富文本
* 初始化富文本
* @param val
*
* @memberof AppRichTextEditor
*/
*/
public
init
(
val
:
any
)
{
public
init
()
{
this
.
destoryed
();
let
richtexteditor
=
this
;
let
richtexteditor
=
this
;
tinymceCode
.
init
({
tinymceCode
.
init
({
selector
:
'#'
+
this
.
id
,
selector
:
'#'
+
richtexteditor
.
id
,
width
:
'calc( 100% - 2px )'
,
width
:
'calc( 100% - 2px )'
,
height
:
this
.
height
,
height
:
richtexteditor
.
height
,
min_height
:
400
,
min_height
:
400
,
branding
:
false
,
branding
:
false
,
plugins
:
[
'link'
,
'paste'
,
'table'
,
'image'
,
'codesample'
,
'code'
,
'fullscreen'
,
'preview'
],
plugins
:
[
'link'
,
'paste'
,
'table'
,
'image'
,
'codesample'
,
'code'
,
'fullscreen'
,
'preview'
],
...
@@ -177,13 +247,13 @@ export default class AppRichTextEditor extends Vue {
...
@@ -177,13 +247,13 @@ export default class AppRichTextEditor extends Vue {
paste_data_images
:
true
,
paste_data_images
:
true
,
codesample_content_css
:
'assets/tinymce/prism.css'
,
codesample_content_css
:
'assets/tinymce/prism.css'
,
skin_url
:
'./assets/tinymce/skins/lightgray'
,
skin_url
:
'./assets/tinymce/skins/lightgray'
,
language_url
:
'./assets/tinymce/langs/'
+
this
.
languMap
[
this
.
langu
]
+
'.js'
,
language_url
:
'./assets/tinymce/langs/'
+
richtexteditor
.
languMap
[
richtexteditor
.
langu
]
+
'.js'
,
language
:
this
.
languMap
[
this
.
langu
],
language
:
richtexteditor
.
languMap
[
richtexteditor
.
langu
],
setup
:
(
editor
:
any
)
=>
{
setup
:
(
editor
:
any
)
=>
{
this
.
editor
=
editor
;
richtexteditor
.
editor
=
editor
;
editor
.
on
(
'blur'
,
()
=>
{
editor
.
on
(
'blur'
,
()
=>
{
const
content
=
editor
.
getContent
();
const
content
=
editor
.
getContent
();
this
.
$emit
(
'change'
,
content
);
richtexteditor
.
$emit
(
'change'
,
content
);
});
});
},
},
images_upload_handler
:
(
bolbinfo
:
any
,
success
:
any
,
failure
:
any
)
=>
{
images_upload_handler
:
(
bolbinfo
:
any
,
success
:
any
,
failure
:
any
)
=>
{
...
@@ -202,13 +272,13 @@ export default class AppRichTextEditor extends Vue {
...
@@ -202,13 +272,13 @@ export default class AppRichTextEditor extends Vue {
});
});
},
},
init_instance_callback
:
(
editor
:
any
)
=>
{
init_instance_callback
:
(
editor
:
any
)
=>
{
this
.
editor
=
editor
;
richtexteditor
.
editor
=
editor
;
let
value
=
(
this
.
value
&&
this
.
value
.
length
>
0
)
?
this
.
value
:
''
;
let
value
=
(
richtexteditor
.
value
&&
richtexteditor
.
value
.
length
>
0
)
?
richtexteditor
.
value
:
''
;
if
(
this
.
editor
)
{
if
(
richtexteditor
.
editor
)
{
this
.
editor
.
setContent
(
value
);
richtexteditor
.
editor
.
setContent
(
value
);
}
}
if
(
this
.
disabled
)
{
if
(
richtexteditor
.
disabled
)
{
this
.
editor
.
setMode
(
'readonly'
);
richtexteditor
.
editor
.
setMode
(
'readonly'
);
}
}
}
}
});
});
...
@@ -216,8 +286,10 @@ export default class AppRichTextEditor extends Vue {
...
@@ -216,8 +286,10 @@ export default class AppRichTextEditor extends Vue {
/**
/**
* 上传文件
* 上传文件
* @param url
*
* @param formData
* @param url 路径
* @param formData 文件对象
* @memberof AppRichTextEditor
*/
*/
public
uploadFile
(
url
:
string
,
formData
:
any
)
{
public
uploadFile
(
url
:
string
,
formData
:
any
)
{
let
_this
=
this
;
let
_this
=
this
;
...
...
编辑
预览
Markdown
格式
0%
请重试
or
添加新附件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
先完成此消息的编辑!
取消
想要评论请
注册
或
登录