iT邦幫忙

1

CKEditor4 設定問題

目前想要在Angular專案下引入CKEditor 4
這邊遇到個設定的問題,我想把預設Toolbar上面的Image拿掉,以下是我的code但沒有成效

<ckeditor
    [config]="{ removePlugins  : 'Image' }"
    data="<p>Hello, world!</p>">
</ckeditor>

有爬到一篇文章和我遇到相同問題 這邊,它裡面有提到的config.js是指另外新建的設定檔用來控制CKEditor還是內建就有(沒找到/images/emoticon/emoticon04.gif)


找到問題了,原來是他不支援removePlugins的寫法!!/images/emoticon/emoticon10.gif

<ckeditor
    [config]="{ removeButtons  : 'Image' }"
    data="<p>Hello, world!</p>">
</ckeditor>

2 個回答

0
ccutmis
iT邦高手 4 級 ‧ 2019-08-20 11:49:54
最佳解答

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>&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</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>

0
firecold
iT邦新手 2 級 ‧ 2019-08-20 11:41:35

ckeditor資料夾下面有個config.js
在function裡面
+上兩行

Markdown 常用語法

config.removePlugins = 'about';
config.removeButtons = 'About
hugo8319 iT邦新手 5 級 ‧ 2019-08-20 11:46:49 檢舉

因為我是直接用 npm install的方式,想問一下你說的資料夾是指?我剛翻了一下,沒看到/images/emoticon/emoticon10.gif

我要發表回答

立即登入回答