如何解决如何在 React 中将 fontColor、fontBackgroundColor、fontSize 添加到 ckeditor5
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。 我的问题是上面项目数组中的所有选项都在工具栏中可见除了
'fontfamily','fontBackgroundColor'
我知道我在这里遗漏了一些东西。我在 ckeditor5 文档中搜索了解决方案,但找不到专门针对 React 的解决方案。
非常感谢您的帮助。先谢谢了。
解决方法
似乎@ckeditor/ckeditor5-build-balloon
不支持Font plugin。
你必须Customize one of the existing builds
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;
创建您自己的版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。