8
0
Просмотр исходного кода

Added to all-features a case with decorators and images.

Kamil Piechaczek 5 лет назад
Родитель
Сommit
052032c508
3 измененных файлов с 74 добавлено и 0 удалено
  1. 32 0
      tests/manual/all-features.html
  2. 26 0
      tests/manual/all-features.js
  3. 16 0
      tests/manual/all-features.md

+ 32 - 0
tests/manual/all-features.html

@@ -157,6 +157,38 @@ function bar() {
 			</tbody>
 		</table>
 	</figure>
+
+	<hr>
+
+	<h2>Link images + Link decorators</h2>
+
+	<table>
+		<tr>
+			<td>Linked text</td>
+			<td>Linked image (<code>figure > a > img</code>)</td>
+			<td>Linked image (<code>a > img</code>)</td>
+		</tr>
+		<tr>
+			<td>
+				<p>
+					<a href="https://cksource.com" target="_blank" rel="noopener noreferrer" download="download">https://cksource.com</a>
+				</p>
+			</td>
+			<td>
+				<figure class="image">
+					<a class="gallery" href="https://cksource.com">
+						<img src="sample.jpg" alt="bar">
+					</a>
+					<figcaption>Caption</figcaption>
+				</figure>
+			</td>
+			<td>
+				<a class="gallery" href="https://cksource.com" target="_blank" rel="noopener noreferrer" download="download">
+					<img src="sample.jpg" alt="bar">
+				</a>
+			</td>
+		</tr>
+	</table>
 </div>
 
 <style>

+ 26 - 0
tests/manual/all-features.js

@@ -117,6 +117,32 @@ ClassicEditor
 					minimumCharacters: 1
 				}
 			]
+		},
+		link: {
+			decorators: {
+				isExternal: {
+					mode: 'manual',
+					label: 'Open in a new tab',
+					attributes: {
+						target: '_blank',
+						rel: 'noopener noreferrer'
+					}
+				},
+				isDownloadable: {
+					mode: 'manual',
+					label: 'Downloadable',
+					attributes: {
+						download: 'download'
+					}
+				},
+				isGallery: {
+					mode: 'manual',
+					label: 'Gallery link',
+					attributes: {
+						class: 'gallery'
+					}
+				}
+			}
 		}
 	} )
 	.then( editor => {

+ 16 - 0
tests/manual/all-features.md

@@ -4,6 +4,8 @@
 
 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 "two pages" with two sections per each page. Pages should be separated by the page break feature.
@@ -20,16 +22,30 @@ There should be "two pages" with two sections per each page. Pages should be sep
 
 **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 be a link and two linked images that uses the manual decorators feature:
+
+  - Left column: a plain text with two decorators enabled: `Open in a new tab`, `Downloadable`
+  - Middle column: an image with the caption that is a `Gallery link`
+  - Right column: an image without the caption with enabled all decorators (listed above)
+  
+---
+
 ## Action buttons
 
 - Clear editor - calls `editor.setData( '' )`
 - Open print preview - opens the print preview window
 - Turn on/off read-only mode - toggle read-only mode
 
+---
+
 ## Console
 
 Wordcount plugin logs into the console number of characters and words in the editor's data.
 
+---
+
 ## Additional
 
 - Empty editor should display a placeholder: `'Type the content here!'`