Skip to content
Snippets Groups Projects
Commit 13eaec17 authored by Stew West's avatar Stew West
Browse files

Issue #3413075: CKEditor Highlight Style

parent fa383858
No related branches found
No related tags found
1 merge request!101Issue #3413075 by stewest: CKEditor Highlight Style' --author="Stew West...
......@@ -43,7 +43,7 @@ default:
pathauto: 1
body:
-
value: '<p class="lead">WYSIWYG stands for What-You-See-Is-What-You-Get, an editor interface that allows you to view something very similar to the end result while you create your content.</p><h2>How and when to use the styles</h2><p>Make sure the content on your page is relevant to the title and that the structure is clear and logical to the reader. All building blocks on your sites - the page content as a whole, as well as paragraphs and sentences - should be front-loaded with the important information at the beginning.</p><h2><strong>So ... what''s in the Box?&nbsp;</strong></h2><p>Sorted by the order in the WYSIWYG toolbar we have ...&nbsp;</p><hr><p>Undo and redo</p><hr><p><em><strong>Paragraph styles (HTML block styles)</strong></em></p><p>Normal text&nbsp;</p><h2>Heading 2&nbsp;</h2><p>Headings are numbered based on the HTML hierarchy that reserves H1 for the title of the node.&nbsp;</p><h3>Heading 3</h3><h4>Heading 3</h4><h4>Heading 4&nbsp;</h4><p>We also have headings 5 and 6, but if you need to use those your content might be a bit crowed for <a class="ext" href="https://www.sector.nz/blog/getting-your-content-strategy-work-real-world-part-1-tldr" rel="nofollow noreferrer">an online audience</a>.&nbsp;</p><hr><p><em><strong>Custom styles (HTML paragraph styles)</strong></em></p><p class="lead">Lead text, useful to front-load your content for online audiences.&nbsp;</p><p class="text-center">Centered paragraph&nbsp;</p><p class="callout">Primary Call out to draw your reader''s attention</p><p class="callout callout--notice">Notice Call out to draw your reader''s attention</p><p class="callout callout--alert">Alert Call out to draw your reader''s attention</p><p>&nbsp;</p><p><em><strong>Custom &nbsp;styles (HTML inline styles)</strong></em></p><p>Highlighter</p><p><em><strong>Custom button styles (HTML inline button styles)</strong></em></p><p><a class="btn btn--primary" href="#">Primary button&nbsp;</a> <a class="btn btn--dark" href="#">Dark button</a> <a class="btn btn--light" href="#">Outline button</a> <a class="link--promo--dark--arrow" href="#">Arrow Link style</a>&nbsp;</p><hr><p><em><strong>Special characters</strong></em></p><p>Editors can also insert special characters including Maori macrons also know as tohutō (or pōtae - hat) &nbsp;– ā, ē, ī, ō, ū, Ā, Ē, Ī, Ō and Ū</p><hr><p><em><strong>Internal and external links</strong></em></p><p><a href="https://www.drupal.org/project/linkit">LinkIT</a> provides a sustainable solution for internal links. You don''t have to copy or remember the URL, instead you can highlight the <a href="/node/11" data-entity-type="node" data-entity-uuid="d6e47575-6c1c-4414-8b1f-1ebeb85d4c1b" data-entity-substitution="canonical">text to link</a>, and use an autocomplete search to select the right page. LinkIT embeds internal links based on ID not URLs so that links don''t break when page titles or URL aliases are updated.&nbsp;</p><p>For external links just copy and paste the external link into to <a href="https://www.drupal.org/project/linkit">LinkIt URL field</a> and confirm that it is an external link.</p><p><strong>Advanced link attributes</strong> allow editors to add classes, aria labels, IDs and link relationships.&nbsp;</p><p><strong>HTML anchors</strong> allow you to link within a page. Set an anchor and link to it by setting <a href="#name-of-your-anchor">#name-of-your-anchor </a>as the URL in the LinkIT URL field.&nbsp;</p><p>To edit or remove links, click on the link text.</p><hr><p><em><strong>Basic text formats</strong></em></p><p>You can &nbsp;make text <strong>bold</strong>, <em>italic</em>, <s>strike through it</s>, and use <sup>super</sup>script and <sub>sub</sub>script.</p><hr><p><em><strong>Lists - unordered</strong></em></p><ul><li>List item 1</li><li>List item 2</li><li>List item 3</li><li>List item 4</li></ul><p>You can choose at which number to start and reverse the order</p><p><em><strong>Lists - ordered&nbsp;</strong></em></p><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li><li>List item 4</li></ol><p><em><strong>Increase indent / Decrease indent</strong></em></p><ul><li>Bullet point 1<ul><li>Bullet point 2<ul><li>Bullet point 3</li></ul></li></ul></li><li>Bullet point 4</li></ul><ol><li>List item 1<ol><li>Increase indent / Decrease indent<ol><li>Double Increase indent</li></ol></li></ol></li><li>List item 3</li><li>List item 4</li></ol><hr><p><em><strong>Quotes</strong></em></p><blockquote><p>Not all those who wander are lost.</p></blockquote><hr><p><em><strong>Tables</strong></em></p><p><em>You can define add a table, set a table caption, add and remove rows and columns, and choose between heading rows or column or both. You can also merge and un-merge cells.&nbsp;</em></p><table><caption>table caption</caption><thead><tr><th>&nbsp;</th><th>heading row</th><th>table header</th><th>table header</th><th>table header</th></tr></thead><tbody><tr><th>heading column</th><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr><tr><th>table header</th><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr><tr><th>table header</th><td>cell</td><td rowspan="2"><p>cell</p><p>&nbsp;</p></td><td>cell</td><td>cell</td></tr><tr><th>table header</th><td>cell</td><td>cell</td><td>cell</td></tr><tr><th>table header</th><td>cell</td><td>cell</td><td colspan="2"><p>cell</p><p>&nbsp;</p></td></tr></tbody></table><hr><p><em><strong>Media</strong></em></p><p>Sector includes the media file manager, preconfigured media types and view modes. Use the ''Insert media'' button to upload images and files and insert them into the content or embed remote videos.&nbsp;</p><p><em><strong>Images</strong></em></p><p>Large view mode</p><drupal-media data-entity-type="media" data-entity-uuid="474a7693-59e6-4318-9a55-05694cd58771" data-view-mode="sector_4_lg">&nbsp;</drupal-media><h4>Medium view mode</h4><drupal-media data-entity-type="media" data-entity-uuid="474a7693-59e6-4318-9a55-05694cd58771">&nbsp;</drupal-media><h4>Small view mode</h4><drupal-media data-entity-type="media" data-entity-uuid="474a7693-59e6-4318-9a55-05694cd58771" data-view-mode="sector_2_sm">&nbsp;</drupal-media><h4>Extra Small view mode</h4><drupal-media data-entity-type="media" data-entity-uuid="474a7693-59e6-4318-9a55-05694cd58771" data-view-mode="sector_1_xs">&nbsp;</drupal-media><h3>Documents</h3><drupal-media data-entity-type="media" data-entity-uuid="69dbfcde-0249-4006-af2c-2d5e3d43c202">&nbsp;</drupal-media><h3>Video</h3><drupal-media data-entity-type="media" data-entity-uuid="51204a2a-7ba9-4f35-b7f2-b3bdf902c0ae">&nbsp;</drupal-media><h3>Embedded Video</h3><drupal-media data-entity-type="media" data-entity-uuid="dcf9950c-40ab-4de5-9376-1001a89bb8d9">&nbsp;</drupal-media><h3>Audio</h3><drupal-media data-entity-type="media" data-entity-uuid="196a18e9-b3eb-491a-99df-b0581a9d6496">&nbsp;</drupal-media><hr><p><em><strong>Additional tools&nbsp;</strong></em></p><p>Advanced editors can also edit source code, and remove unwanted formats.</p><h2>Embedded Content</h2><h3>Disclosure</h3><embedded-content data-plugin-config="{&quot;summary&quot;:&quot;Example disclosure title&quot;,&quot;body&quot;:{&quot;value&quot;:&quot;\u003Cp\u003EExample disclosure content\u003C\/p\u003E&quot;,&quot;format&quot;:&quot;sector_restricted_basic_html&quot;}}" data-plugin-id="disclosure">&nbsp;</embedded-content><h3>Note</h3><embedded-content data-plugin-config="{&quot;heading&quot;:&quot;Note heading&quot;,&quot;message&quot;:{&quot;value&quot;:&quot;\u003Cp\u003ENote content\u003C\/p\u003E&quot;,&quot;format&quot;:&quot;sector_restricted_basic_html&quot;},&quot;type&quot;:&quot;note--default&quot;}" data-plugin-id="note">&nbsp;</embedded-content><embedded-content data-plugin-config="{&quot;heading&quot;:&quot;Alert note heading&quot;,&quot;message&quot;:{&quot;value&quot;:&quot;\u003Cp\u003ENote content\u003C\/p\u003E&quot;,&quot;format&quot;:&quot;sector_restricted_basic_html&quot;},&quot;type&quot;:&quot;note--alert&quot;}" data-plugin-id="note">&nbsp;</embedded-content><embedded-content data-plugin-config="{&quot;heading&quot;:&quot;Info note heading&quot;,&quot;message&quot;:{&quot;value&quot;:&quot;\u003Cp\u003ENote content\u003C\/p\u003E&quot;,&quot;format&quot;:&quot;sector_restricted_basic_html&quot;},&quot;type&quot;:&quot;note--info&quot;}" data-plugin-id="note">&nbsp;</embedded-content><embedded-content data-plugin-config="{&quot;heading&quot;:&quot;Danger note heading&quot;,&quot;message&quot;:{&quot;value&quot;:&quot;\u003Cp\u003ENote content\u003C\/p\u003E&quot;,&quot;format&quot;:&quot;sector_restricted_basic_html&quot;},&quot;type&quot;:&quot;note--danger&quot;}" data-plugin-id="note">&nbsp;</embedded-content><h2>Need more?</h2><p>CKEditor 5 has amazing new features included in the new <em><strong>Drupal Premium Features module</strong></em> under a premium subscription model.&nbsp;</p>'
value: '<p class="lead">WYSIWYG stands for What-You-See-Is-What-You-Get, an editor interface that allows you to view something very similar to the end result while you create your content.</p><h2>How and when to use the styles</h2><p>Make sure the content on your page is relevant to the title and that the structure is clear and logical to the reader. All building blocks on your sites - the page content as a whole, as well as paragraphs and sentences - should be front-loaded with the important information at the beginning.</p><h2><strong>So ... what''s in the Box?&nbsp;</strong></h2><p>Sorted by the order in the WYSIWYG toolbar we have ...&nbsp;</p><hr><p>Undo and redo</p><hr><p><em><strong>Paragraph styles (HTML block styles)</strong></em></p><p>Normal text&nbsp;</p><h2>Heading 2&nbsp;</h2><p>Headings are numbered based on the HTML hierarchy that reserves H1 for the title of the node.&nbsp;</p><h3>Heading 3</h3><h4>Heading 3</h4><h4>Heading 4&nbsp;</h4><p>We also have headings 5 and 6, but if you need to use those your content might be a bit crowed for <a class="ext" href="https://www.sector.nz/blog/getting-your-content-strategy-work-real-world-part-1-tldr" rel="nofollow noreferrer">an online audience</a>.&nbsp;</p><hr><p><em><strong>Custom styles (HTML paragraph styles)</strong></em></p><p class="lead">Lead text, useful to front-load your content for online audiences.&nbsp;</p><p class="text-center">Centered paragraph&nbsp;</p><p class="callout">Primary Call out to draw your reader''s attention</p><p class="callout callout--notice">Notice Call out to draw your reader''s attention</p><p class="callout callout--alert">Alert Call out to draw your reader''s attention</p><p>&nbsp;</p><p><em><strong>Custom &nbsp;styles (HTML inline styles)</strong></em></p><p><mark class="highlight">Highlighter</mark></p><p><em><strong>Custom button styles (HTML inline button styles)</strong></em></p><p><a class="btn btn--primary" href="#">Primary button&nbsp;</a> <a class="btn btn--dark" href="#">Dark button</a> <a class="btn btn--light" href="#">Outline button</a> <a class="link--promo--dark--arrow" href="#">Arrow Link style</a>&nbsp;</p><hr><p><em><strong>Special characters</strong></em></p><p>Editors can also insert special characters including Maori macrons also know as tohutō (or pōtae - hat) &nbsp;– ā, ē, ī, ō, ū, Ā, Ē, Ī, Ō and Ū</p><hr><p><em><strong>Internal and external links</strong></em></p><p><a href="https://www.drupal.org/project/linkit">LinkIT</a> provides a sustainable solution for internal links. You don''t have to copy or remember the URL, instead you can highlight the <a href="/node/11" data-entity-type="node" data-entity-uuid="d6e47575-6c1c-4414-8b1f-1ebeb85d4c1b" data-entity-substitution="canonical">text to link</a>, and use an autocomplete search to select the right page. LinkIT embeds internal links based on ID not URLs so that links don''t break when page titles or URL aliases are updated.&nbsp;</p><p>For external links just copy and paste the external link into to <a href="https://www.drupal.org/project/linkit">LinkIt URL field</a> and confirm that it is an external link.</p><p><strong>Advanced link attributes</strong> allow editors to add classes, aria labels, IDs and link relationships.&nbsp;</p><p><strong>HTML anchors</strong> allow you to link within a page. Set an anchor and link to it by setting <a href="#name-of-your-anchor">#name-of-your-anchor </a>as the URL in the LinkIT URL field.&nbsp;</p><p>To edit or remove links, click on the link text.</p><hr><p><em><strong>Basic text formats</strong></em></p><p>You can &nbsp;make text <strong>bold</strong>, <em>italic</em>, <s>strike through it</s>, and use <sup>super</sup>script and <sub>sub</sub>script.</p><hr><p><em><strong>Lists - unordered</strong></em></p><ul><li>List item 1</li><li>List item 2</li><li>List item 3</li><li>List item 4</li></ul><p>You can choose at which number to start and reverse the order</p><p><em><strong>Lists - ordered&nbsp;</strong></em></p><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li><li>List item 4</li></ol><p><em><strong>Increase indent / Decrease indent</strong></em></p><ul><li>Bullet point 1<ul><li>Bullet point 2<ul><li>Bullet point 3</li></ul></li></ul></li><li>Bullet point 4</li></ul><ol><li>List item 1<ol><li>Increase indent / Decrease indent<ol><li>Double Increase indent</li></ol></li></ol></li><li>List item 3</li><li>List item 4</li></ol><hr><p><em><strong>Quotes</strong></em></p><blockquote><p>Not all those who wander are lost.</p></blockquote><hr><p><em><strong>Tables</strong></em></p><p><em>You can define add a table, set a table caption, add and remove rows and columns, and choose between heading rows or column or both. You can also merge and un-merge cells.&nbsp;</em></p><table><caption>table caption</caption><thead><tr><th>&nbsp;</th><th>heading row</th><th>table header</th><th>table header</th><th>table header</th></tr></thead><tbody><tr><th>heading column</th><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr><tr><th>table header</th><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr><tr><th>table header</th><td>cell</td><td rowspan="2"><p>cell</p><p>&nbsp;</p></td><td>cell</td><td>cell</td></tr><tr><th>table header</th><td>cell</td><td>cell</td><td>cell</td></tr><tr><th>table header</th><td>cell</td><td>cell</td><td colspan="2"><p>cell</p><p>&nbsp;</p></td></tr></tbody></table><hr><p><em><strong>Media</strong></em></p><p>Sector includes the media file manager, preconfigured media types and view modes. Use the ''Insert media'' button to upload images and files and insert them into the content or embed remote videos.&nbsp;</p><p><em><strong>Images</strong></em></p><p>Large view mode</p><drupal-media data-entity-type="media" data-entity-uuid="474a7693-59e6-4318-9a55-05694cd58771" data-view-mode="sector_4_lg">&nbsp;</drupal-media><h4>Medium view mode</h4><drupal-media data-entity-type="media" data-entity-uuid="474a7693-59e6-4318-9a55-05694cd58771">&nbsp;</drupal-media><h4>Small view mode</h4><drupal-media data-entity-type="media" data-entity-uuid="474a7693-59e6-4318-9a55-05694cd58771" data-view-mode="sector_2_sm">&nbsp;</drupal-media><h4>Extra Small view mode</h4><drupal-media data-entity-type="media" data-entity-uuid="474a7693-59e6-4318-9a55-05694cd58771" data-view-mode="sector_1_xs">&nbsp;</drupal-media><h3>Documents</h3><drupal-media data-entity-type="media" data-entity-uuid="69dbfcde-0249-4006-af2c-2d5e3d43c202">&nbsp;</drupal-media><h3>Video</h3><drupal-media data-entity-type="media" data-entity-uuid="51204a2a-7ba9-4f35-b7f2-b3bdf902c0ae">&nbsp;</drupal-media><h3>Embedded Video</h3><drupal-media data-entity-type="media" data-entity-uuid="dcf9950c-40ab-4de5-9376-1001a89bb8d9">&nbsp;</drupal-media><h3>Audio</h3><drupal-media data-entity-type="media" data-entity-uuid="196a18e9-b3eb-491a-99df-b0581a9d6496">&nbsp;</drupal-media><hr><p><em><strong>Additional tools&nbsp;</strong></em></p><p>Advanced editors can also edit source code, and remove unwanted formats.</p><h2>Embedded Content</h2><h3>Disclosure</h3><embedded-content data-plugin-config="{&quot;summary&quot;:&quot;Example disclosure title&quot;,&quot;body&quot;:{&quot;value&quot;:&quot;\u003Cp\u003EExample disclosure content\u003C\/p\u003E&quot;,&quot;format&quot;:&quot;sector_restricted_basic_html&quot;}}" data-plugin-id="disclosure">&nbsp;</embedded-content><h3>Note</h3><embedded-content data-plugin-config="{&quot;heading&quot;:&quot;Note heading&quot;,&quot;message&quot;:{&quot;value&quot;:&quot;\u003Cp\u003ENote content\u003C\/p\u003E&quot;,&quot;format&quot;:&quot;sector_restricted_basic_html&quot;},&quot;type&quot;:&quot;note--default&quot;}" data-plugin-id="note">&nbsp;</embedded-content><embedded-content data-plugin-config="{&quot;heading&quot;:&quot;Alert note heading&quot;,&quot;message&quot;:{&quot;value&quot;:&quot;\u003Cp\u003ENote content\u003C\/p\u003E&quot;,&quot;format&quot;:&quot;sector_restricted_basic_html&quot;},&quot;type&quot;:&quot;note--alert&quot;}" data-plugin-id="note">&nbsp;</embedded-content><embedded-content data-plugin-config="{&quot;heading&quot;:&quot;Info note heading&quot;,&quot;message&quot;:{&quot;value&quot;:&quot;\u003Cp\u003ENote content\u003C\/p\u003E&quot;,&quot;format&quot;:&quot;sector_restricted_basic_html&quot;},&quot;type&quot;:&quot;note--info&quot;}" data-plugin-id="note">&nbsp;</embedded-content><embedded-content data-plugin-config="{&quot;heading&quot;:&quot;Danger note heading&quot;,&quot;message&quot;:{&quot;value&quot;:&quot;\u003Cp\u003ENote content\u003C\/p\u003E&quot;,&quot;format&quot;:&quot;sector_restricted_basic_html&quot;},&quot;type&quot;:&quot;note--danger&quot;}" data-plugin-id="note">&nbsp;</embedded-content><h2>Need more?</h2><p>CKEditor 5 has amazing new features included in the new <em><strong>Drupal Premium Features module</strong></em> under a premium subscription model.&nbsp;</p>'
format: sector_basic_html
summary: 'Next to Sector Display options and Content settings on a page level, we have preconfigured styles and design components in the WYSIWYG to let your content shine. '
field_content_options:
......@@ -61,4 +61,4 @@ default:
format: sector_restricted_basic_html
field_text_placement:
-
value: text-left
\ No newline at end of file
value: text-left
......@@ -52,7 +52,8 @@ settings:
ckeditor5_show_block_show_block:
enable_show_block_default: 0
ckeditor5_sourceEditing:
allowed_tags: { }
allowed_tags:
- '<mark class>'
ckeditor5_style:
styles:
-
......@@ -72,7 +73,7 @@ settings:
element: '<p class="text-center">'
-
label: Highlight
element: '<p class="highlight">'
element: '<mark class="highlight">'
ckeditor_link_styles_linkStyles:
styles:
-
......
......@@ -86,7 +86,7 @@ settings:
element: '<p class="text-center">'
-
label: Highlight
element: '<p class="highlight">'
element: '<mark class="highlight">'
ckeditor_link_styles_linkStyles:
styles:
-
......
......@@ -21,7 +21,7 @@ filters:
status: true
weight: -10
settings:
allowed_html: '<br> <p class="lead callout callout--notice callout--alert text-center highlight"> <h2> <h3> <h4> <h5> <strong> <em> <s> <sub> <sup> <blockquote> <a href class aria-label id target="_blank" rel data-entity-type data-entity-uuid data-entity-substitution> <ul> <ol reversed start> <li> <hr> <table> <tr> <td rowspan colspan> <th rowspan colspan> <thead> <tbody> <tfoot> <caption> <drupal-media data-entity-type data-entity-uuid alt data-view-mode data-align> <embedded-content data-plugin-config data-plugin-id>'
allowed_html: '<br> <p class="lead callout callout--notice callout--alert text-center"> <h2> <h3> <h4> <h5> <mark class="highlight"> <strong> <em> <s> <sub> <sup> <blockquote> <a href class aria-label id target="_blank" rel data-entity-type data-entity-uuid data-entity-substitution> <ul> <ol reversed start> <li> <hr> <table> <tr> <td rowspan colspan> <th rowspan colspan> <thead> <tbody> <tfoot> <caption> <drupal-media data-entity-type data-entity-uuid alt data-view-mode data-align> <embedded-content data-plugin-config data-plugin-id>'
filter_html_help: true
filter_html_nofollow: false
linkit:
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment