From 6bb7257fe46d36d8f9374557276275bd0998b052 Mon Sep 17 00:00:00 2001 From: nwind Date: Tue, 27 Sep 2022 15:14:09 +0800 Subject: [PATCH] =?UTF-8?q?amis-saas-6890=20=E4=BC=98=E5=8C=96=20tinymce?= =?UTF-8?q?=20=E7=9A=84=E9=BB=98=E8=AE=A4=E5=80=BC=EF=BC=8C=E5=B9=B6?= =?UTF-8?q?=E5=9C=A8=E9=85=8D=E7=BD=AE=20richTextToken=20=E5=90=8E?= =?UTF-8?q?=E8=87=AA=E5=8A=A8=E5=88=87=E6=8D=A2=E4=B8=BA=20froala?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I6e03c8abef18720903e12546c70e4cc0c27b9546 --- .../src/plugin/Form/InputRichText.tsx | 332 ++++++++++-------- 1 file changed, 183 insertions(+), 149 deletions(-) diff --git a/packages/amis-editor/src/plugin/Form/InputRichText.tsx b/packages/amis-editor/src/plugin/Form/InputRichText.tsx index 312911480..38dd7d6db 100644 --- a/packages/amis-editor/src/plugin/Form/InputRichText.tsx +++ b/packages/amis-editor/src/plugin/Form/InputRichText.tsx @@ -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: - '使用空格分开配置，使用|可将配置栏分组，参考文档', - 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: - '使用空格分开配置，使用|可将配置栏分组，参考文档', - 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: - '使用空格分开配置，使用|可将配置栏分组，参考文档', - 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: - '使用空格分开配置，参考文档', - 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: + '使用空格分开配置，使用|可将配置栏分组，参考文档', + 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: + '使用空格分开配置，使用|可将配置栏分组，参考文档', + 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: + '使用空格分开配置，使用|可将配置栏分组，参考文档', + 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: + '参考文档', + + 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);