-
Type:
Epic
-
Status: Closed
-
Priority:
Minor
-
Resolution: Completed
-
Affects Version/s: None
-
Fix Version/s: None
-
Component/s: DXP Editors > Balloon Editor
-
Epic/Theme:
-
Epic Status:To Do
When we started working on AlloyEditor, 4 or 5 years ago, CKEditor had a very limited API that forced us to rebuild the editor UI entirely.
In this lapse of time, CKEditor4 has caught up and introduced many of the features that we built ourselves for AlloyEditor:
As of today, we would likely benefit from a simpler integration leveraging CK4 new features rather than having to develop and maintain a complete editor on top.
Goal of this Epic
To create an editor based exclusively on OOTB features of CK4 that mimics AlloyEditor behaviour and functionality. With ootb features we mean use of ckeditor APIs, creation of skins, buttons and even new plugins.
Acceptance Criteria
- The module frontend-editor-ckeditor-web offers a BallonEditor that mimics the old AlloyEditor behaviour
- No dependencies with AE, no code of AE will be loaded
- IE11 will not be supported
- Editor comes in the form of a React component. See
LPS-127012for the acceptance criteria related to the toolbars - Editor can be also used via <liferay-editor:editor> tag. See
LPS-127015 - Editor visual appearence conforms to the design. See
LPS-127014
Test Scenarios:
Requirements | Test Case | Covered by frontend/backend unit test? (Yes/No) | Test Priority (business impact) |
---|---|---|---|
Given A block of text is present in CKEditor and Balloon toolbar is enabled When Highlight a text Then Assert text edit function on Balloon toolbar (bold, italic, underline, insert/remove number, insert/remove bulleted list, block styles) |
no | 5-critical | |
|
Given A balloon toolbar from a highlighted text When Click on bold icon Then the highlighted text is bold |
no | 5-critical |
|
Given Text contains a hyperlink is present in CKEditor and Balloon toolbar is enabled When click on hyperlinked text Then Toolbar with hyperlink icon is present |
no | 4-major |
|
Given A 3x3 table is present in CKEditor and Balloon toolbar is enabled When Click on the 2x3 table Then Balloon editor contains add/Remove a row/column |
no | 4-major |
|
Given A 3x3 table is present in CKEditor and Balloon toolbar is enabled And Given there is a text in one of the cells When Click on the text Then Balloon editor contains Text Edit Options |
no | 4-major |
|
Given CKEditor toolbar is present and Balloon toolbar is enabled And Given Video element is present on CKEditor When Click on the video element Then Balloon toolbar pops up And Then video edit toolbar is included in balloon toolbars (Right justify, left justify, centered) |
no | 4-major |
|
Given An image is present in CKEditor and balloon toolbar is enabled When Balloon toolbar pops up by clicking on the image Then Assert appropriate items that edits image on balloon toolbar (Right justify, left justify, centered) |
no | 4-major |
|
Given Context is present in CKEditor When Source button is available on CKEditor toolbar Then No balloon toolbar available for source view, assert Source modal pops up |
no | 2-low |
Exploratory testing to consider:
Test Case | Covered by frontend/backend unit test? (Yes/No) | Test Priority (business impact) |
---|---|---|
Given Developer Tool opened to network tab When Navigate to a page with CKEditor with Balloon toolbar enabled Then frontend-editore-alloyeditor-web is not present in URL column |
no | 2-low |
Given Editor visual appearence conforms to the design When Apply the styling to the balloon toolbars Then Toolbars have the same appearence as the ones in the figma |
no | 2-low |
Given new Editor react component files When viewing the files Then it follows basic react patterns |
no | 2-low |
Explore performance testing of Balloon editor: what should be an expected time for balloon to appear? To Disappear? Threshold time from clicking the balloon editor icons to when it takes effect on ckeditor? | no | 2-low |
- is a dependency of
-
LPS-132881 Replace alloyeditor usages with ballooneditor in blogs
-
- In Development
-
-
LPS-137907 Replace alloyeditor usages with ballooneditor in page editor
-
- In Planning
-
- split from
-
LPS-113930 Create a CKEditor-based Balloon Editor
-
- Closed
-
- mentioned in
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...
-
Page Loading...