Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
102 lines (75 sloc) 2.93 KB
description layout title weight
Is there an existing CKEditor plugin you like? Chances are you will be able to use it with AlloyEditor as well!
How to use CKEditor Plugins?
There are some CKEDITOR plugins that it add button through their UI. This tutorial is about using this kind of plugins.

Example to use 'font' Plugin

You can download font plugin and, after that, you can paste it into plugins folder

Note: Keep in mind, if this plugin has dependencies, we need to download and to configure them too.

Configuration AlloyEditor

Our UI bridges allow us to use CKEDITOR plugin easier, you only need to add appropriates plugins to extraPlugins configuration and to retrieve its buttons using AlloyEditor.getButtons(['PLUGIN_NAME', MORE_BUTTONS])

  AlloyEditor.editable('MyEditable', {
    extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value + ',font',
      toolbars: {
        styles: {
          selections: [
              name: 'text',
              buttons: AlloyEditor.getButtons(['font']), //['FontFamily', 'FontSize']
              test: AlloyEditor.SelectionTest.text

If you want to customize and to add other buttons to text selections you can add them like this:

  buttons: AlloyEditor.getButtons(['font', 'bold', 'italic', ...]),

Or if you prefer to keep previous buttons you can do:

  var selections = AlloyEditor.Selections;
  var textButtons = selections[3].buttons; // ['styles', 'bold, 'italic', 'underline', 'link', twitter']
  var customButtons = textButtons.concat('font'); // ['styles', 'bold, 'italic', 'underline', 'link', twitter', 'FontFamily', 'FontSize']

  selections[3].buttons = AlloyEditor.getButtons(customButtons);

  AlloyEditor.editable('MyEditable', {
    extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value + ',font'

Use moono skin for visual compatibility

AlloyEditor's UI Bridge is in its early stages, so there are still some uncovered areas. For example, dialogs are not converted and will still appear with CKEditor's default look and feel.

Use the new moono skin to close the gap between AlloyEditor default look and feel and CKEditor's.

  <link href="alloy-editor/assets/alloy-editor-moono-min.css" rel="stylesheet">