mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-15 09:21:13 +08:00
amis-saas-6890 优化 tinymce 的默认值，并在配置 richTextToken 后自动切换为 froala
Change-Id: I6e03c8abef18720903e12546c70e4cc0c27b9546
This commit is contained in:
nwind
parent
463a34fb86
commit
6bb7257fe4
@ -1,4 +1,4 @@
|
||||
import {getSchemaTpl} from 'amis-editor-core';
|
||||
import {BaseEventContext, getSchemaTpl} from 'amis-editor-core';
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {BasePlugin} from 'amis-editor-core';
|
||||
|
||||
@ -33,154 +33,188 @@ export class RichTextControlPlugin extends BasePlugin {
|
||||
};
|
||||
|
||||
panelTitle = '富文本';
|
||||
panelBody = [
|
||||
getSchemaTpl('switchDefaultValue'),
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'value',
|
||||
label: '默认值',
|
||||
visibleOn: 'typeof this.value !== "undefined"'
|
||||
},
|
||||
getSchemaTpl('api', {
|
||||
name: 'receiver',
|
||||
label: '文件接收接口',
|
||||
value: '/api/upload/image',
|
||||
__isUpload: true
|
||||
}),
|
||||
{
|
||||
type: 'select',
|
||||
name: 'vendor',
|
||||
label: '编辑器类型',
|
||||
value: 'tinymce',
|
||||
options: ['tinymce', 'froala']
|
||||
},
|
||||
getSchemaTpl('fieldSet', {
|
||||
title: 'froala 设置项',
|
||||
visibleOn: 'data.vendor === "froala"',
|
||||
body: [
|
||||
{
|
||||
type: 'combo',
|
||||
name: 'options',
|
||||
noBorder: true,
|
||||
multiLine: true,
|
||||
items: [
|
||||
{
|
||||
type: 'select',
|
||||
name: 'language',
|
||||
label: '语言',
|
||||
labelRemark: '鼠标覆盖配置栏中配置时显示的提示语言',
|
||||
defaultValue: 'zh_cn',
|
||||
options: [
|
||||
{label: '中文', value: 'zh_cn'},
|
||||
{label: '英文', value: 'en_us'}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'toolbarButtons',
|
||||
label: '大屏时展示的配置项',
|
||||
labelRemark: '屏幕宽度 ≥ 1200px',
|
||||
description:
|
||||
'使用空格分开配置，使用<code>|</code>可将配置栏分组，<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options">参考文档</a>',
|
||||
minRows: 5,
|
||||
value: [
|
||||
'paragraphFormat',
|
||||
'quote',
|
||||
'color',
|
||||
'|',
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'strikeThrough',
|
||||
'|',
|
||||
'formatOL',
|
||||
'formatUL',
|
||||
'align',
|
||||
'|',
|
||||
'insertLink',
|
||||
'insertImage',
|
||||
'insertEmotion',
|
||||
'insertTable',
|
||||
'|',
|
||||
'undo',
|
||||
'redo',
|
||||
'html'
|
||||
],
|
||||
pipeIn: (value: any) =>
|
||||
Array.isArray(value) ? value.join(' ') : '',
|
||||
pipeOut: (value: any) => value.replace(/\s+/g, ' ').split(' ')
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'toolbarButtonsMD',
|
||||
label: '中屏时展示的配置项',
|
||||
labelRemark: '屏幕宽度 ≥ 992px',
|
||||
description:
|
||||
'使用空格分开配置，使用<code>|</code>可将配置栏分组，<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options">参考文档</a>',
|
||||
minRows: 5,
|
||||
pipeIn: (value: any) =>
|
||||
Array.isArray(value) ? value.join(' ') : '',
|
||||
pipeOut: (value: any) => value.replace(/\s+/g, ' ').split(' ')
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'toolbarButtonsSM',
|
||||
label: '小屏时展示的配置项',
|
||||
labelRemark: '屏幕宽度 ≥ 768px',
|
||||
description:
|
||||
'使用空格分开配置，使用<code>|</code>可将配置栏分组，<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options">参考文档</a>',
|
||||
minRows: 5,
|
||||
pipeIn: (value: any) =>
|
||||
Array.isArray(value) ? value.join(' ') : '',
|
||||
pipeOut: (value: any) => value.replace(/\s+/g, ' ').split(' ')
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}),
|
||||
getSchemaTpl('fieldSet', {
|
||||
title: 'tinymce 设置项',
|
||||
visibleOn: 'data.vendor === "tinymce"',
|
||||
body: [
|
||||
{
|
||||
type: 'combo',
|
||||
name: 'options',
|
||||
noBorder: true,
|
||||
multiLine: true,
|
||||
items: [
|
||||
getSchemaTpl('switch', {
|
||||
label: '是否显示菜单栏',
|
||||
value: 'true',
|
||||
name: 'menubar'
|
||||
}),
|
||||
{
|
||||
type: 'input-number',
|
||||
label: '高度',
|
||||
min: 0,
|
||||
value: 400,
|
||||
name: 'height'
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'plugins',
|
||||
label: '启用的插件',
|
||||
description:
|
||||
'使用空格分开配置，<a target="_blank" href="https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/">参考文档</a>',
|
||||
value:
|
||||
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking table emoticons template paste help'
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'toolbar',
|
||||
label: '工具栏',
|
||||
value:
|
||||
'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons | help'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
];
|
||||
|
||||
panelBodyCreator = (context: BaseEventContext) => {
|
||||
// 有设置这个就默认使用 froala
|
||||
const hasRichTextToken = this.manager.env?.richTextToken ? true : false;
|
||||
return [
|
||||
getSchemaTpl('switchDefaultValue'),
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'value',
|
||||
label: '默认值',
|
||||
visibleOn: 'typeof this.value !== "undefined"'
|
||||
},
|
||||
getSchemaTpl('api', {
|
||||
name: 'receiver',
|
||||
label: '文件接收接口',
|
||||
value: '/api/upload/image',
|
||||
__isUpload: true
|
||||
}),
|
||||
{
|
||||
type: 'select',
|
||||
name: 'vendor',
|
||||
label: '编辑器类型',
|
||||
value: hasRichTextToken ? 'froala' : 'tinymce',
|
||||
options: ['tinymce', 'froala']
|
||||
},
|
||||
getSchemaTpl('fieldSet', {
|
||||
title: 'froala 设置项',
|
||||
visibleOn: 'data.vendor === "froala"',
|
||||
body: [
|
||||
{
|
||||
type: 'combo',
|
||||
name: 'options',
|
||||
noBorder: true,
|
||||
multiLine: true,
|
||||
items: [
|
||||
{
|
||||
type: 'select',
|
||||
name: 'language',
|
||||
label: '语言',
|
||||
labelRemark: '鼠标覆盖配置栏中配置时显示的提示语言',
|
||||
defaultValue: 'zh_cn',
|
||||
options: [
|
||||
{label: '中文', value: 'zh_cn'},
|
||||
{label: '英文', value: 'en_us'}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'toolbarButtons',
|
||||
label: '大屏时展示的配置项',
|
||||
labelRemark: '屏幕宽度 ≥ 1200px',
|
||||
description:
|
||||
'使用空格分开配置，使用<code>|</code>可将配置栏分组，<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options">参考文档</a>',
|
||||
minRows: 5,
|
||||
value: [
|
||||
'paragraphFormat',
|
||||
'quote',
|
||||
'color',
|
||||
'|',
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'strikeThrough',
|
||||
'|',
|
||||
'formatOL',
|
||||
'formatUL',
|
||||
'align',
|
||||
'|',
|
||||
'insertLink',
|
||||
'insertImage',
|
||||
'insertEmotion',
|
||||
'insertTable',
|
||||
'|',
|
||||
'undo',
|
||||
'redo',
|
||||
'html'
|
||||
],
|
||||
pipeIn: (value: any) =>
|
||||
Array.isArray(value) ? value.join(' ') : '',
|
||||
pipeOut: (value: any) => value.replace(/\s+/g, ' ').split(' ')
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'toolbarButtonsMD',
|
||||
label: '中屏时展示的配置项',
|
||||
labelRemark: '屏幕宽度 ≥ 992px',
|
||||
description:
|
||||
'使用空格分开配置，使用<code>|</code>可将配置栏分组，<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options">参考文档</a>',
|
||||
minRows: 5,
|
||||
pipeIn: (value: any) =>
|
||||
Array.isArray(value) ? value.join(' ') : '',
|
||||
pipeOut: (value: any) => value.replace(/\s+/g, ' ').split(' ')
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'toolbarButtonsSM',
|
||||
label: '小屏时展示的配置项',
|
||||
labelRemark: '屏幕宽度 ≥ 768px',
|
||||
description:
|
||||
'使用空格分开配置，使用<code>|</code>可将配置栏分组，<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options">参考文档</a>',
|
||||
minRows: 5,
|
||||
pipeIn: (value: any) =>
|
||||
Array.isArray(value) ? value.join(' ') : '',
|
||||
pipeOut: (value: any) => value.replace(/\s+/g, ' ').split(' ')
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}),
|
||||
getSchemaTpl('fieldSet', {
|
||||
title: 'tinymce 设置项',
|
||||
visibleOn: 'data.vendor === "tinymce"',
|
||||
body: [
|
||||
{
|
||||
type: 'combo',
|
||||
name: 'options',
|
||||
noBorder: true,
|
||||
multiLine: true,
|
||||
items: [
|
||||
getSchemaTpl('switch', {
|
||||
label: '是否显示菜单栏',
|
||||
value: 'true',
|
||||
name: 'menubar'
|
||||
}),
|
||||
{
|
||||
type: 'input-number',
|
||||
label: '高度',
|
||||
min: 0,
|
||||
value: 400,
|
||||
name: 'height'
|
||||
},
|
||||
{
|
||||
name: 'plugins',
|
||||
label: '启用的插件',
|
||||
description:
|
||||
'<a target="_blank" href="https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/">参考文档</a>',
|
||||
|
||||
type: 'input-array',
|
||||
|
||||
inline: true,
|
||||
items: {
|
||||
type: 'input-text',
|
||||
clearable: true
|
||||
},
|
||||
value: [
|
||||
'advlist',
|
||||
'autolink',
|
||||
'link',
|
||||
'image',
|
||||
'lists',
|
||||
'charmap',
|
||||
'preview',
|
||||
'anchor',
|
||||
'pagebreak',
|
||||
'searchreplace',
|
||||
'wordcount',
|
||||
'visualblocks',
|
||||
'visualchars',
|
||||
'code',
|
||||
'fullscreen',
|
||||
'insertdatetime',
|
||||
'media',
|
||||
'nonbreaking',
|
||||
'table',
|
||||
'emoticons',
|
||||
'template',
|
||||
'help'
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'toolbar',
|
||||
label: '工具栏',
|
||||
value:
|
||||
'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
];
|
||||
};
|
||||
}
|
||||
|
||||
registerEditorPlugin(RichTextControlPlugin);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user