liferay/alloy-editor

WYSIWYG editor based on CKEditor with completely rewritten UI

Alloy Editor

Alloy Editor is a modern WYSIWYG editor built on top of CKEditor, designed to create modern and gorgeous web content.

Works on IE11, Chrome, Firefox and Safari.

Demo

• Embedded self-guided demo
• Screencasts and code samples for specific features

Features

• Smart toolbars appear right near the selected text and offer different functionality based on context
• Easily add your own buttons (see the "marquee" example in the docs)
• Paste images from clipboard, or Drag&Drop them from another application
• Insert images from the device's camera!
• Paste rich text from any web page and preserve its formatting
• The full styling power of CKEditor...
• ...with a much more modern UI
• The core is fully separated from the UI
• The example UI is built with React
• Plugin architecture

Documentation

Look for documentation and examples on http://alloyeditor.com/

License

LGPL License

alloy-editor's Issues

Cannot toggle strong elements in editor area

If there is already an element with strong style, then after loading the editor, removing of this style is impossible.

Make Toolbars keyboard accessible

Implement different toolbars for Mobile

Current editor toolbars are suitable for Desktop but not for Mobile. We have to implement new toolbars. One idea is to place them just above the native keyboard of the phone/tablet. To be discussed with the UX.

Editor requires a server in order to run in dev mode.

Create vanilla UI

The current UI requires YUI3. We need to create an UI, which does not depend on any Framework.

Project Site: The API Docs links, at the bottom of pages, do not work.

The API Docs links, at the bottom of pages, do not work.

For more information about configuration, check out our API Docs.

• http://alloyeditor.com/tutorials/ui/
• http://alloyeditor.com/tutorials/button/
• http://alloyeditor.com/tutorials/toolbar/

Update the site to match the new design of AlloyUI

Project Site: Page "Create entirely new UI" mentions `gulp ui jquery` which doesn't exist in gulpfile

http://alloyeditor.com/tutorials/ui/

In order to build the project using your UI, execute gulp ui jquery.

$ gulp ui jquery causes Gulp to error:

Task 'ui' is not in your gulpfile

I expected to have Gulp create some basic stub files/folders for my new UI.

ToolbarAdd showAtPoint API is inconsistent

Currently, the add toolbar API showAtPoint is inconsistent with how the rest of toolbars work.

Toolbar	showAtPoint signature
toolbar-add	showAtPoint: function(triggerPosition, toolbarPosition)
toolbar-image	showAtPoint: function(left, top, direction)
toolbar-styles	showAtPoint: function(left, top, direction)

Implement light skin

Project Site: Following the tutorials as-is, I could not get a working demo. I needed to use the included demo in the ZIP as a guide.

http://alloyeditor.com/tutorials/

IE7 errors when viewing the live demo

I get two JS errors in IE7. Also the toolbar does not display. But it seems that I’m still able to edit content.

• ‘stringify’ is null or not an object.
• ‘config’ is null or not an object.

@ipeychev, says that we will be dropping IE7 from the list of supported browsers.

Toolbar config buttons does not accept button configuration.

There's two sides of this bug:

• Documentation is wrong, giving away code that would produce syntax errors in the browser

toolbars: {
    styles: [
        'facebook': {
            customParam: 'param1',
            customParam2: 'param2'
        }
    ];
}

• Toolbar buttons configuration won't accept an object with configuration, nor will treat properly an array of objects for the modules

Link Tooltip is not being destroyed on CKEditor destroying

There is no need to use custom function to retrieve document scroll position

Instead to use custom function to retrieve document scroll position, use CKEDITOR.dom.window getScrollPosition method.

ToolbarAdd should slide to the right on empty lines

On empty lines, when the toolbar add shows, it should slide to the right side and remain positioned in the same line, instead of moving on top of it.

Implement UndoRedo

Project Site: Expand "Get stated" with additional code example.

http://alloyeditor.com/

It's unclear that contenteditable="true" is required for the editor to function.

<div id="editable" contenteditable="true">
    Some sample content...
</div>

Twitter button should add the link to the current site

Modify toolbar add behavior

After UX analysis, the add toolbar should work in the following way:

• The add button should show on the left margin, on the same line where the cursor is.
• On click on the add button, it should hide and show the add toolbar instead.
• When the toolbar is dismissed, the add button shows again.

Things to consider and implement at some point:

• When there's a selection and the toolbar is shown, the selection needs to change to a different colour to indicate that the selection will be replaced by the added element.
• When there's no content in a line, the add toolbar should show to the right of the button, in the empty line, instead of on top.

Project Site: Add inline working editor demos, of code used in tutorials.

http://alloyeditor.com/tutorials/
http://alloyeditor.com/tutorials/toolbar-configuration/
http://alloyeditor.com/tutorials/button/
http://alloyeditor.com/tutorials/toolbar/

Describe how to create an entirely new UI

Button add is missing btn class

Project Site: Move the page Architecture to a main navigation item.

http://alloyeditor.com/tutorials/architecture/

This isn't a tutorial, and it’s buried out of sight. The architecture is a core selling point of this editor. Especially for contributors.

Also, create a "call to action"/highlight on the site's landing page, directing developers to learn more about the architecture.

Project Site: Consolidate the content about the custom UI feature into one page.

Too much important information is scattered throughout the site. I have to view multiple pages just to get an idea what this “customizable UI” is and why it’s so cool and why I’d want to build a custom UI in another language.

Consolidate the content about the custom UI feature into one page. Add links to that new page in content which mentions it.

When there are more than one alloy editor in a page and I click another editor, the button with the options is still displayed in the old editor

Update CKEditor base path in release mode

Project Site: AlloyEditor branding is inconsistent

• AlloyEditor
• Alloy Editor

Fix the example of embedding the editor to a page

Project Site: Using the Get started code, I'm unable to get a working demo

http://alloyeditor.com/

Project Site: Expand Contributing content

http://alloyeditor.com/contributing/

Expand Contributing content, to something more complete, like the one on the AlloyUI project site. http://alloyui.com/contributing/

Consolidate and link all other content, asking for contributions, to here.

Duplicate project description in the README and project description

Add documentation how to create a new button

Project Site: Update site and release ZIPs to 0.2.2

Define add toolbar expected functionality

Initially, the add toolbar should allow adding the following type of contents:

• Quotes from twitter
• Horizontal lines
• Images
• Media elements
• Quotes
• Code

Implement dark skin and make it default one

Add support for multiple skins

In build time, the editor should be able to generate different skins.

Change the license to LGPL

Move documentation from docs to api folder

Implement ocean skin

Creating a link which, crosses element boundaries, causes JS errors and a buggy toolbar.

Example Content:

<p>Some text <strong>with some bold text</strong> and some normal text.</p>

Steps to replicate:

1. Go to Example/Live Demo page. http://alloyeditor.com/examples/
2. Using your cursor, select a range of text which stars in some bold and ends in some normal text.
3. The toolbar will display.
4. Click the [link icon] and input a URL.
5. Click the [checkmark].

Expected Results:

• A single link created around selection. With with a child <strong>.

<p>Some text <strong>with some</strong> <a href="..."><strong>bold text</strong> and some normal</a> text.</p>

Actual Results:

• Two links, one in the <strong> on one outside.

<p>Some text <strong>with some<a href="...">bold text</a></strong> <a href="...">and some normal</a> text.</p>

• JS error: Uncaught TypeError: Cannot read property 'setAttributes' of null
• Toolbar behavior is now buggy.

Project Site: And a note and link above each pages' Disqus comments, to submit bug reports and improvements to Github Issues.

Change license to LGPL

Content editable, Marco Polo

I'm unable to visually determine what content is editable. Which requires me to click into each content section, to determine if I can edit it. I need some visual hint of what I can edit.

Add functionality to create OL & UL lists.

Requirements

Inline/Single Line Selection

• Select inline text, list icon(s) will display in toolbar.
• Clicking icon will create a new list surrounding selection, with a single list item.

Multi-Line Selection

• Select multiple lines, list icon(s) will display in toolbar.
• Clicking icon will create a new list surrounding selection
• Each line (block) selected will be it's own list item.

Unknowns

List button(s) style/behavior suggestions

1. Two buttons [OL] [UL]
2. One button [LIST] with drop down.
3. One button [LIST] which cycles through: [OL], [UL], [LIST (off)]

Buttons don't have btn-default class name

Add functionality to drag/drop selected text content around.

I looks like you can select and drag text around. But when you drop it, nothing happens. This appears to be a native browser feature but has no effect. Maybe because we don't handle it? Not sure.

Project Site: Rename main navigation item, "Example".

Rename main navigation item from "Example" to: "Live Example", "Live Demo", or "Demo".

"Example" is too ambiguous and uncommon to be recognized as a live demonstration of the project. Without navigating to the page, I don't immediately understand what I’d be seeing.

Create UI using Bootstrap & jQuery

Extract toolbar position logic

Toolbar position logic should be extracted to an extension so any toolbar implementation can benefit from it.