如何将fontColor、fontBackgroundColor、fontSize添加到ckeditor5中
如何将fontColor、fontBackgroundColor、fontSize添加到ckeditor5中
提问于 2021-04-05 07:04:20
import React, { Component } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import BalloonEditor from "@ckeditor/ckeditor5-build-balloon";
class MyEditor extends Component {
render() {
return (
<div>
<h2>HEllo world</h2>
<CKEditor
config={{
toolbar: {
items: [
'heading', '|',
'alignment', '|',
'italic', 'strikethrough', 'underline', 'subscript', 'superscript', '|',
'link', '|',
'bulletedList', 'numberedList', 'todoList',
'-', // break point
'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor', '|',
'code', 'codeBlock', '|',
'insertTable', '|',
'outdent', 'indent', '|',
'uploadImage', 'blockQuote', '|',
'undo', 'redo'
],
shouldNotGroupWhenFull: true
}
}}
editor={BalloonEditor}
data="<p>Hello from CKEditor 5!</p>"
onChange={ ( event, editor ) => {
const data = editor.getData();
console.log( { event, editor, data } );
} }
/>
</div>
);
}
}
export default MyEditor;在上面的代码中没有什么复杂的东西，我试着熟悉ckeditor5。我在这里的问题是，上面的items数组中的所有选项在工具栏中都是可见的，除了
'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor'我知道我漏掉了一些东西。我在ckeditor5文档中搜索解决方案，但没有找到专门用于React的解决方案。
我非常感谢你的帮助。谢谢你提前了。
回答 1
Stack Overflow用户
发布于 2021-04-05 07:36:03
似乎@ckeditor/ckeditor5-build-balloon不支持字体插件。
你必须要自定义现有构建之一
import Font from '@ckeditor/ckeditor5-font/src/font';
...
class MyEditor extends Component {
render() {
return (
<div>
<h2>HEllo world</h2>
<CKEditor
config={{
plugins: [ Font, ... ],
toolbar: [ 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', ... ]
...
}}
// rest props
} }
/>
</div>
);
}
}
export default MyEditor;或者使用CKEditor在线构建器创建自己的
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66949389
复制相关文章
相似问题
腾讯云开发者
