目前想要在Angular專案下引入CKEditor 4
這邊遇到個設定的問題，我想把預設Toolbar上面的Image拿掉，以下是我的code但沒有成效
<ckeditor
[config]="{ removePlugins : 'Image' }"
data="<p>Hello, world!</p>">
</ckeditor>
有爬到一篇文章和我遇到相同問題 這邊，它裡面有提到的config.js是指另外新建的設定檔用來控制CKEditor還是內建就有(沒找到
)
找到問題了，原來是他不支援removePlugins的寫法!!
<ckeditor
[config]="{ removeButtons : 'Image' }"
data="<p>Hello, world!</p>">
</ckeditor>
已邀請的邦友 {{ invite_list.length }}/5
google關鍵字搜 "ckeditor 4 custom toolbar"
找到這個官方文件
https://ckeditor.com/docs/ckeditor4/latest/examples/toolbar.html
裡面最底下的有提供sample source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Custom toolbar</title>
<script src="https://cdn.ckeditor.com/4.12.1/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="editor1" name="editor1" rows="10" data-sample-short><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></textarea>
<script>
CKEDITOR.replace('editor1', {
// Define the toolbar groups as it is a more accessible solution.
toolbarGroups: [{
"name": "basicstyles",
"groups": ["basicstyles"]
},
{
"name": "links",
"groups": ["links"]
},
{
"name": "paragraph",
"groups": ["list", "blocks"]
},
{
"name": "document",
"groups": ["mode"]
},
{
"name": "insert",
"groups": ["insert"]
},
{
"name": "styles",
"groups": ["styles"]
},
{
"name": "about",
"groups": ["about"]
}
],
// Remove the redundant buttons from toolbar groups defined above.
removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,Specialchar'
});
</script>
</body>
</html>
ckeditor資料夾下面有個config.js
在function裡面
+上兩行
Markdown 常用語法
config.removePlugins = 'about';
config.removeButtons = 'About
iThome鐵人賽
看影片追技術