javascript 编辑编辑器工具栏按钮

wwwo4jvm  于 2023-04-28  发布在  Java
关注(0)|答案(2)|浏览(175)

我使用<script src="https://nightly.ckeditor.com/full/ckeditor.js"></script>语法添加了ckeditor。我的ckeditor编辑器工具栏如下所示。

我想添加新的功能到现有的图标。
我该怎么做?

wi3ka0sx

wi3ka0sx1#

使用此CKEditor版本CDN

<script src="https://cdn.ckeditor.com/ckeditor5/35.3.2/super-build/ckeditor.js"></script>

供参考:- www.example.com

qco9c6ql

qco9c6ql2#

让我知道你正在使用的技术堆栈,

纯Javascript

<script>
  editor = CKEDITOR.replace("container");
  editor.addCommand("mySimpleCommand", {
    exec: function (edt) {
      alert(edt.getData());
    },
  });
  editor.ui.addButton("SuperButton", {
    label: "Click me",
    command: "mySimpleCommand",
    toolbar: "insert",
    icon: "https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Clock.png",
  });
</script>

检查planet icon之外的工具栏选项中的时钟图标。
检查codesandbox演示here

像React这样的框架。js:

尝试添加这样的插件,

CKEDITOR.plugins.add("timestamp", {
  init: function (editor) {
    editor.addCommand("insertTimestamp", {
      exec: function (editor) {
        var now = new Date();
        editor.insertHtml(now.toString());
      },
    });
    editor.ui.addButton("Timestamp", {
      label: "Insert Timestamp",
      command: "insertTimestamp",
      toolbar: "insert",
      icon: "https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Clock.png",
    });
  },
});

检查工具栏选项中smiley icon旁边的clock icon。您可以添加要在exec函数中执行的功能
希望这对你有帮助

相关问题