All features test

Toolbar

It should contain as many features as we developed. By resizing your viewport you can observe whether grouping toolbar items work.

Editor

There should be "three pages" with couple of sections per each page. Pages should be separated by the page break feature.

First page

Lists in the table – In the table (2x3) in the second row should be 3 lists (bulleted, numbered and todo). The styles for list item markers for unordered and ordered list can be changed via the dropdown that opens when you click the arrow next to the appropriate list button in the toolbar. There are 3 styles for unordered lists and 6 styles for ordered lists.

Basic features overview - a few paragraphs of text (that contain text formatted using basic styles feature), an image, and a blockquote.

Second page

Media with previews in the table - in the table (3x3), in the middle column you should see a preview of attached media embed elements.

Code blocks in the table - in the table (4x3), in the second and fourth columns should be visible code snippets.

Horizontal line - There is the <hr> in the source HTML. It should be displayed in the editor.

Link images + Link decorators - in the table (3x2), there are a linked text and two linked images that uses the manual decorators feature:

Third page

HTML embed - there are 3 widgets with embedded HTML:

The "previews in view" mode is enabled, which means that previews should be visible.

Paste from Office - Copy & paste some content from Word.

Text part language - There are 2 paragraphs with applied language: Spanish with left-to-right direction and Arabic with right-to-left direction. Both should have italic style. Play with the selection and the language dropdown.

HTML comments - There are 10 comments in this section: from C1 to C10. Open the source editing mode (or just call the editor.getData()) and verify that they are present.

Action buttons

Console

Wordcount plugin logs into the console number of characters and words in the editor's data.

Additional

Lists in the table

Bulleted list Numbered list To do list
  • UL List item 1
  • UL List item 2
  1. OL List item 1
  2. OL List item 2

Basic features overview

Lorem ipsum dolor sit amet, consectetur adipisicing elit.1

Basic styles

Ad alias, architecto culpa cumque dignissimos dolor eos incidunt ipsa itaque laboriosam magnam molestias nihil numquam odit quam, suscipit veritatis voluptate voluptatum.2

Image

bar
Caption

Blockquote

Quote

Quote

 

Media with previews in the table

Service Preview URL
YouTube
https://www.youtube.com/watch?v=ZVv7UMQPEWk
Vimeo
https://vimeo.com/1084537

Code blocks in the table

Language Code snippet Language Code snippet
CSS 
body {
	color: red;
}

p {
	font-size: 10px;
}
 PHP 
<?php

function dump( array ...$args ) {
	foreach ( $args as $item ) {
		var_dump( $item );
	}

	die;
}
JavaScript 
function foo() {
	console.log( 'indented using 1 tab' );
}

function bar() {
    console.log( 'indented using spaces' );
}
 Plaintext 
Plain text

Link images + Link decorators

Linked text Linked image (figure > a > img) Linked image (a > img)

https://cksource.com

bar
Caption
 bar
 

HTML embed

<details> and <summary> tags as HTML snippet

Details Something small enough to escape casual notice.

<video> tag as HTML snippet

<iframe> tag as HTML snippet

Paste from Office

Paste here:

Text part language

Un lenguaje (del provenzal lenguatge y este del latín lingua) es un sistema de comunicación estructurado para el que existe un contexto de uso y ciertos principios combinatorios formales. Existen contextos tanto naturales como artificiales.

اللغة نسق من الإشارات والرموز، يشكل أداة من أدوات المعرفة، وتعتبر اللغة أهم وسائل التفاهم والاحتكاك بين أفراد امجتمع في جميع ميادين الحياة. وبدون اللغة يتعذر نشاط الناس المعرفي.

HTML comments

Paragraph

Table cell #1 Table cell #2 Table cell #3
  1. Item #1
  2. Item #2
  3. Item #3
    • Nested item #3.1
    • Nested item #3.2
    • Nested item #3.3