ckeditor5 - 使用在线构建生成器时,CKEditor5 工具栏未在 Angular 中显示
问题描述
我正在使用从在线构建生成器生成的自定义构建。
然后我遵循了用Angular 富文本编辑器组件编写的文档,但使用自定义构建而不是使用官方编辑器构建之一。
不知何故,我的工具栏及其图像工具栏和表格工具栏等项目没有出现在我的 Angular 项目中。执行npm install
提供工具栏所需的文件,以"image"
在在线构建示例页面上显示完整的项目(包括等)。
我在这里缺少什么来成功显示使用在线构建生成器定义的工具栏及其项目?
解决方案
目前也在经历同样的事情。
我假设您也只是简单地ckeditor.js
从build
文件夹中导入了。在我的情况下,我必须config
为编辑器手动定义:
零件
import * as CustomEditor from "src/app/ckeditor5-custom-build/build/ckeditor";
//...
public Editor = CustomEditor;
config: CKEditorConfig = {
placeholder: "Write your answer here.",
// BUG: Current CKEditor5's generated build does not
// show the default toolbar as defined in the online builder
toolbar: [
"bold", "italic", "underline", "code", "|",
"blockquote", "codeblock", "bulletedlist", "numberedlist", "|",
"link", "image", "|",
"Format",
],
};
模板
<ckeditor [editor]="Editor" [config]="config" [data]="data"></ckeditor>
免责声明
当前的问题是"image"
工具栏项未按预期工作。上面的代码只显示了工具栏并成功显示了"code"
和"codeblock"
工具栏项(这是单独的CKEditor Plugins 就像"image"
)
更新 (截至 2020 年 11 月 9 日)
- FilipTokarski在此处确认了该问题。
我可以确认,当您从在线构建器直接将编辑器构建添加到 Angular 应用程序时,工具栏丢失了。这里的情况是 - 从 OB 构建有
builtinPlugins
,但缺少defaultConfig
- 配置在ckeditor5/sample/index.html
. 如果将此配置添加到ckeditor5/src/ckeditor.js
,例如像这样:
Editor.defaultConfig = {
toolbar: {
items: [
'heading', '|', 'bold', 'italic', 'link',
'bulletedList', numberedList', '|', 'indent', 'outdent', '|',
'imageUpload',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo', 'redo'
]
},
language: 'en',
image: {
toolbar: [
'imageTextAlternative',
'imageStyle:full',
'imageStyle:side'
]
},
- 我提交的相关问题, 使用在线构建器生成的自定义构建时默认情况下不显示工具栏,已关闭并标记为使用在线构建器创建的包的副本与仍然打开的官方构建不同(ATTOW,11 月 20 日, 2020)。
推荐阅读
- html - 我使用引导卡,在小型设备上,这些卡与我的下一个 div 重叠,我找不到什么问题
- c++ - 如何处理cpp中指向数组的指针的未定义行为?
- javascript - 仅当 URL 存在时如何从 URL 获取过滤器值
- ios - Objective-C iOS 14:将极性设置为立体声会产生全向。关注苹果文档
- python - 对函数中导入变量的全局访问是否违反了黑盒范式?
- python - 在 kafka 值中使用 protobuf 消息存储失败
- amazon-web-services - 从 AMI 恢复 Bitbucket 时,远程身份验证服务器不可用
- node.js - 是否可以将 nodejs 流与 Shaka Packager 一起使用?
- azure-devops - 我应该为 dev 和 prod 提供不同的 CI/CD,还是可以为我在 azure devops 中的所有环境和应用程序提供一个
- html - 我如何打破 flex 的元素