kempo-ui 0.0.43 → 0.0.63
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/copilot-instructions.md +11 -0
- package/.github/workflows/publish.yml +66 -0
- package/CONTRIBUTING.md +70 -0
- package/dist/components/Dialog.js +9 -8
- package/dist/components/HtmlEditor.js +91 -0
- package/dist/components/Icon.js +2 -2
- package/dist/components/Main.js +5 -9
- package/dist/components/ShadowComponent.js +1 -1
- package/dist/components/SideMenu.js +1 -1
- package/dist/components/SidePanel.js +46 -35
- package/dist/components/htmlEditorControls/AlignCenter.js +12 -0
- package/dist/components/htmlEditorControls/AlignJustify.js +12 -0
- package/dist/components/htmlEditorControls/AlignLeft.js +12 -0
- package/dist/components/htmlEditorControls/AlignRight.js +12 -0
- package/dist/components/htmlEditorControls/Bold.js +12 -0
- package/dist/components/htmlEditorControls/BulletList.js +12 -0
- package/dist/components/htmlEditorControls/CharacterCount.js +18 -0
- package/dist/components/htmlEditorControls/ClearFormatting.js +12 -0
- package/dist/components/htmlEditorControls/CodeBlock.js +12 -0
- package/dist/components/htmlEditorControls/ControlGroup.js +14 -0
- package/dist/components/htmlEditorControls/ControlSpacer.js +6 -0
- package/dist/components/htmlEditorControls/CreateLink.js +15 -0
- package/dist/components/htmlEditorControls/DropdownControl.js +57 -0
- package/dist/components/htmlEditorControls/FormatBlock.js +12 -0
- package/dist/components/htmlEditorControls/HtmlEditorControl.js +44 -0
- package/dist/components/htmlEditorControls/InlineCode.js +12 -0
- package/dist/components/htmlEditorControls/InsertTable.js +15 -0
- package/dist/components/htmlEditorControls/Italic.js +12 -0
- package/dist/components/htmlEditorControls/Mode.js +9 -0
- package/dist/components/htmlEditorControls/NumberList.js +12 -0
- package/dist/components/htmlEditorControls/Strikethrough.js +12 -0
- package/dist/components/htmlEditorControls/TextBackgroundColor.js +97 -0
- package/dist/components/htmlEditorControls/TextColor.js +97 -0
- package/dist/components/htmlEditorControls/Underline.js +12 -0
- package/dist/components/htmlEditorControls/WordCount.js +18 -0
- package/dist/utils/formatCode.js +1 -0
- package/docs/components/dropdown.html +2 -2
- package/docs/components/html-editor.html +442 -0
- package/docs/components/icon.html +2 -7
- package/docs/components/photo-viewer.html +14 -14
- package/docs/components/side-menu.html +32 -0
- package/docs/components/side-panel-dual.html +70 -0
- package/docs/components/side-panel-scroll.html +176 -0
- package/docs/components/side-panel.html +41 -1
- package/docs/icons/arrow_drop_down.svg +1 -0
- package/docs/icons/circle.svg +1 -0
- package/docs/icons/code.svg +1 -0
- package/docs/icons/code_blocks.svg +1 -0
- package/docs/icons/copy.svg +1 -0
- package/docs/icons/dot.svg +1 -0
- package/docs/icons/format_align_center.svg +1 -0
- package/docs/icons/format_align_justify.svg +1 -0
- package/docs/icons/format_align_left.svg +1 -0
- package/docs/icons/format_align_right.svg +1 -0
- package/docs/icons/format_bold.svg +1 -0
- package/docs/icons/format_clear.svg +1 -0
- package/docs/icons/format_color_fill.svg +1 -0
- package/docs/icons/format_color_text.svg +1 -0
- package/docs/icons/format_h1.svg +1 -0
- package/docs/icons/format_h2.svg +1 -0
- package/docs/icons/format_h3.svg +1 -0
- package/docs/icons/format_h4.svg +1 -0
- package/docs/icons/format_h5.svg +1 -0
- package/docs/icons/format_h6.svg +1 -0
- package/docs/icons/format_italic.svg +1 -0
- package/docs/icons/format_list_bulleted.svg +1 -0
- package/docs/icons/format_list_numbered.svg +1 -0
- package/docs/icons/format_paragraph.svg +1 -0
- package/docs/icons/format_underlined.svg +1 -0
- package/docs/icons/help.svg +1 -0
- package/docs/icons/link.svg +1 -0
- package/docs/icons/more_vert.svg +1 -0
- package/docs/icons/strikethrough_s.svg +1 -0
- package/docs/icons/table.svg +1 -0
- package/docs/icons/wysiwyg.svg +1 -0
- package/docs/index.html +6 -0
- package/docs/nav-1.inc.html +1 -0
- package/docs/nav.inc.html +1 -0
- package/docs/src/components/Dialog.js +9 -8
- package/docs/src/components/HtmlEditor.js +91 -0
- package/docs/src/components/Icon.js +2 -2
- package/docs/src/components/Main.js +5 -9
- package/docs/src/components/ShadowComponent.js +1 -1
- package/docs/src/components/SideMenu.js +1 -1
- package/docs/src/components/SidePanel.js +46 -35
- package/docs/src/components/htmlEditorControls/AlignCenter.js +12 -0
- package/docs/src/components/htmlEditorControls/AlignJustify.js +12 -0
- package/docs/src/components/htmlEditorControls/AlignLeft.js +12 -0
- package/docs/src/components/htmlEditorControls/AlignRight.js +12 -0
- package/docs/src/components/htmlEditorControls/Bold.js +12 -0
- package/docs/src/components/htmlEditorControls/BulletList.js +12 -0
- package/docs/src/components/htmlEditorControls/CharacterCount.js +18 -0
- package/docs/src/components/htmlEditorControls/ClearFormatting.js +12 -0
- package/docs/src/components/htmlEditorControls/CodeBlock.js +12 -0
- package/docs/src/components/htmlEditorControls/ControlGroup.js +14 -0
- package/docs/src/components/htmlEditorControls/ControlSpacer.js +6 -0
- package/docs/src/components/htmlEditorControls/CreateLink.js +15 -0
- package/docs/src/components/htmlEditorControls/DropdownControl.js +57 -0
- package/docs/src/components/htmlEditorControls/FormatBlock.js +12 -0
- package/docs/src/components/htmlEditorControls/HtmlEditorControl.js +44 -0
- package/docs/src/components/htmlEditorControls/InlineCode.js +12 -0
- package/docs/src/components/htmlEditorControls/InsertTable.js +15 -0
- package/docs/src/components/htmlEditorControls/Italic.js +12 -0
- package/docs/src/components/htmlEditorControls/Mode.js +9 -0
- package/docs/src/components/htmlEditorControls/NumberList.js +12 -0
- package/docs/src/components/htmlEditorControls/Strikethrough.js +12 -0
- package/docs/src/components/htmlEditorControls/TextBackgroundColor.js +97 -0
- package/docs/src/components/htmlEditorControls/TextColor.js +97 -0
- package/docs/src/components/htmlEditorControls/Underline.js +12 -0
- package/docs/src/components/htmlEditorControls/WordCount.js +18 -0
- package/docs/src/utils/formatCode.js +1 -0
- package/icons/arrow_drop_down.svg +1 -0
- package/icons/circle.svg +1 -0
- package/icons/code.svg +1 -0
- package/icons/code_blocks.svg +1 -0
- package/icons/copy.svg +1 -0
- package/icons/dot.svg +1 -0
- package/icons/format_align_center.svg +1 -0
- package/icons/format_align_justify.svg +1 -0
- package/icons/format_align_left.svg +1 -0
- package/icons/format_align_right.svg +1 -0
- package/icons/format_bold.svg +1 -0
- package/icons/format_clear.svg +1 -0
- package/icons/format_color_fill.svg +1 -0
- package/icons/format_color_text.svg +1 -0
- package/icons/format_h1.svg +1 -0
- package/icons/format_h2.svg +1 -0
- package/icons/format_h3.svg +1 -0
- package/icons/format_h4.svg +1 -0
- package/icons/format_h5.svg +1 -0
- package/icons/format_h6.svg +1 -0
- package/icons/format_italic.svg +1 -0
- package/icons/format_list_bulleted.svg +1 -0
- package/icons/format_list_numbered.svg +1 -0
- package/icons/format_paragraph.svg +1 -0
- package/icons/format_underlined.svg +1 -0
- package/icons/help.svg +1 -0
- package/icons/link.svg +1 -0
- package/icons/more_vert.svg +1 -0
- package/icons/strikethrough_s.svg +1 -0
- package/icons/table.svg +1 -0
- package/icons/wysiwyg.svg +1 -0
- package/package.json +6 -5
- package/scripts/getIcon.js +52 -0
- package/src/components/Dialog.js +25 -10
- package/src/components/HtmlEditor.js +1548 -0
- package/src/components/Icon.js +6 -3
- package/src/components/Main.js +22 -23
- package/src/components/ShadowComponent.js +0 -1
- package/src/components/SideMenu.js +10 -0
- package/src/components/SidePanel.js +78 -37
- package/src/components/htmlEditorControls/AlignCenter.js +65 -0
- package/src/components/htmlEditorControls/AlignJustify.js +65 -0
- package/src/components/htmlEditorControls/AlignLeft.js +65 -0
- package/src/components/htmlEditorControls/AlignRight.js +65 -0
- package/src/components/htmlEditorControls/Bold.js +65 -0
- package/src/components/htmlEditorControls/BulletList.js +65 -0
- package/src/components/htmlEditorControls/CharacterCount.js +75 -0
- package/src/components/htmlEditorControls/ClearFormatting.js +65 -0
- package/src/components/htmlEditorControls/CodeBlock.js +72 -0
- package/src/components/htmlEditorControls/ControlGroup.js +95 -0
- package/src/components/htmlEditorControls/ControlSpacer.js +23 -0
- package/src/components/htmlEditorControls/CreateLink.js +121 -0
- package/src/components/htmlEditorControls/DropdownControl.js +149 -0
- package/src/components/htmlEditorControls/FormatBlock.js +108 -0
- package/src/components/htmlEditorControls/HtmlEditorControl.js +126 -0
- package/src/components/htmlEditorControls/InlineCode.js +77 -0
- package/src/components/htmlEditorControls/InsertTable.js +171 -0
- package/src/components/htmlEditorControls/Italic.js +65 -0
- package/src/components/htmlEditorControls/Mode.js +66 -0
- package/src/components/htmlEditorControls/NumberList.js +65 -0
- package/src/components/htmlEditorControls/Strikethrough.js +65 -0
- package/src/components/htmlEditorControls/TextBackgroundColor.js +195 -0
- package/src/components/htmlEditorControls/TextColor.js +195 -0
- package/src/components/htmlEditorControls/Underline.js +65 -0
- package/src/components/htmlEditorControls/WordCount.js +76 -0
- package/src/utils/formatCode.js +87 -0
- package/tests/components/Main.browser-test.js +166 -105
- package/tests/components/SidePanel.browser-test.js +62 -8
- package/.github/workflows/publish-major.yml +0 -39
- package/.github/workflows/publish-minor.yml +0 -39
- package/.github/workflows/publish-patch.yml +0 -45
- package/docs/icons/arrow-back.svg +0 -1
- package/docs/icons/arrow-down-double.svg +0 -1
- package/docs/icons/arrow-down.svg +0 -1
- package/docs/icons/arrow-forward.svg +0 -1
- package/docs/icons/arrow-menu-close.svg +0 -1
- package/docs/icons/arrow-menu-open.svg +0 -1
- package/docs/icons/arrow-right.svg +0 -1
- package/docs/icons/arrow-up-double.svg +0 -1
- package/docs/icons/arrow-up.svg +0 -1
- package/docs/icons/chevron-left.svg +0 -1
- package/docs/icons/chevron-right.svg +0 -1
- package/docs/icons/chevron-up.svg +0 -1
|
@@ -0,0 +1,442 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>HtmlEditor - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
|
+
<link rel="manifest" href="../manifest.json" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
13
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
17
|
+
<h1 class="ta-center">HtmlEditor</h1>
|
|
18
|
+
<main>
|
|
19
|
+
<k-accordion persistent-id="toc" class="b r mb">
|
|
20
|
+
<k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
|
|
21
|
+
<k-accordion-panel name="toc-panel">
|
|
22
|
+
<div class="m pl">
|
|
23
|
+
<h6>Examples</h6>
|
|
24
|
+
<a href="#fullExample">Complete Editor Example</a><br />
|
|
25
|
+
<a href="#javascriptUsage">JavaScript API Example</a><br />
|
|
26
|
+
|
|
27
|
+
<h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
|
|
28
|
+
<a href="#constructor">Constructor</a><br />
|
|
29
|
+
<a href="#properties">Properties</a><br />
|
|
30
|
+
<a href="#methods">Methods</a><br />
|
|
31
|
+
<a href="#events">Events</a><br />
|
|
32
|
+
</div>
|
|
33
|
+
</k-accordion-panel>
|
|
34
|
+
</k-accordion>
|
|
35
|
+
|
|
36
|
+
<p>A WYSIWYG HTML editor component with support for visual and code editing modes, form integration, and extensive formatting capabilities.</p>
|
|
37
|
+
|
|
38
|
+
<h3 id="fullExample"><a href="#fullExample" class="no-link">Complete Editor Example</a></h3>
|
|
39
|
+
<p>A fully-featured editor with all controls. Copy and paste this example to get started quickly:</p>
|
|
40
|
+
<div class="row -mx">
|
|
41
|
+
<div class="col m-span-12 px">
|
|
42
|
+
<k-card label="HTML">
|
|
43
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-html-editor</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"content"</span>></span>
|
|
44
|
+
<span class="hljs-comment"><!-- Text formatting --></span>
|
|
45
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-group</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"toolbar-top"</span>></span>
|
|
46
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-bold</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-bold</span>></span>
|
|
47
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-italic</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-italic</span>></span>
|
|
48
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-underline</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-underline</span>></span>
|
|
49
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-strikethrough</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-strikethrough</span>></span>
|
|
50
|
+
<span class="hljs-tag"></<span class="hljs-name">k-hec-group</span>></span>
|
|
51
|
+
|
|
52
|
+
<span class="hljs-comment"><!-- Inline code --></span>
|
|
53
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-inline-code</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"toolbar-top"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-inline-code</span>></span>
|
|
54
|
+
|
|
55
|
+
<span class="hljs-comment"><!-- Text style --></span>
|
|
56
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-dropdown</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"toolbar-top"</span>></span>
|
|
57
|
+
<span class="hljs-tag"><<span class="hljs-name">k-icon</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span>></span><span class="hljs-tag"></<span class="hljs-name">k-icon</span>></span>
|
|
58
|
+
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span>></span>Text Style<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
|
59
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">"p"</span>></span>Paragraph<span class="hljs-tag"></<span class="hljs-name">k-hec-format-block</span>></span>
|
|
60
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">"h1"</span>></span>Heading 1<span class="hljs-tag"></<span class="hljs-name">k-hec-format-block</span>></span>
|
|
61
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">"h2"</span>></span>Heading 2<span class="hljs-tag"></<span class="hljs-name">k-hec-format-block</span>></span>
|
|
62
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">"h3"</span>></span>Heading 3<span class="hljs-tag"></<span class="hljs-name">k-hec-format-block</span>></span>
|
|
63
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-code-block</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-code-block</span>></span>
|
|
64
|
+
<span class="hljs-tag"></<span class="hljs-name">k-hec-dropdown</span>></span>
|
|
65
|
+
|
|
66
|
+
<span class="hljs-comment"><!-- Lists --></span>
|
|
67
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-group</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"toolbar-top"</span>></span>
|
|
68
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-bullet-list</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-bullet-list</span>></span>
|
|
69
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-number-list</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-number-list</span>></span>
|
|
70
|
+
<span class="hljs-tag"></<span class="hljs-name">k-hec-group</span>></span>
|
|
71
|
+
|
|
72
|
+
<span class="hljs-comment"><!-- Alignment --></span>
|
|
73
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-group</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"toolbar-top"</span>></span>
|
|
74
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-align-left</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-align-left</span>></span>
|
|
75
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-align-center</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-align-center</span>></span>
|
|
76
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-align-right</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-align-right</span>></span>
|
|
77
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-align-justify</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-align-justify</span>></span>
|
|
78
|
+
<span class="hljs-tag"></<span class="hljs-name">k-hec-group</span>></span>
|
|
79
|
+
|
|
80
|
+
<span class="hljs-comment"><!-- Colors --></span>
|
|
81
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-group</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"toolbar-top"</span>></span>
|
|
82
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-text-color</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-text-color</span>></span>
|
|
83
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-text-background-color</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-text-background-color</span>></span>
|
|
84
|
+
<span class="hljs-tag"></<span class="hljs-name">k-hec-group</span>></span>
|
|
85
|
+
|
|
86
|
+
<span class="hljs-comment"><!-- Clear formatting --></span>
|
|
87
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-clear-formatting</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"toolbar-top"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-clear-formatting</span>></span>
|
|
88
|
+
|
|
89
|
+
<span class="hljs-comment"><!-- Link and table --></span>
|
|
90
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-group</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"toolbar-top"</span>></span>
|
|
91
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-create-link</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-create-link</span>></span>
|
|
92
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-insert-table</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-insert-table</span>></span>
|
|
93
|
+
<span class="hljs-tag"></<span class="hljs-name">k-hec-group</span>></span>
|
|
94
|
+
|
|
95
|
+
<span class="hljs-comment"><!-- Spacer and mode toggle --></span>
|
|
96
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-spacer</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"toolbar-top"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-spacer</span>></span>
|
|
97
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-mode</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"toolbar-top"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-mode</span>></span>
|
|
98
|
+
|
|
99
|
+
<span class="hljs-comment"><!-- Bottom toolbar stats --></span>
|
|
100
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-word-count</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"toolbar-bottom"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-word-count</span>></span>
|
|
101
|
+
<span class="hljs-tag"><<span class="hljs-name">k-hec-character-count</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"toolbar-bottom"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-hec-character-count</span>></span>
|
|
102
|
+
<span class="hljs-tag"></<span class="hljs-name">k-html-editor</span>></span></code></pre>
|
|
103
|
+
</k-card>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="col m-span-12 px">
|
|
106
|
+
<k-card label="Output">
|
|
107
|
+
<k-html-editor class="b r" value="<h3>Welcome to the HTML Editor</h3><p>This editor includes all formatting controls. Try selecting text and using the toolbar:</p><ul><li><b>Bold</b>, <i>italic</i>, <u>underline</u>, and <s>strikethrough</s></li><li>Text <span style='color: #e60000;'>colors</span> and <span style='background-color: #ffffcc;'>backgrounds</span></li><li>Lists, alignment, and <a href='#'>links</a></li><li>Format as <code>inline code</code> or code blocks</li></ul><p>Use the mode toggle to switch between visual and code editing.</p>" style="height: 600px">
|
|
108
|
+
<k-hec-group slot="toolbar-top">
|
|
109
|
+
<k-hec-bold></k-hec-bold>
|
|
110
|
+
<k-hec-italic></k-hec-italic>
|
|
111
|
+
<k-hec-underline></k-hec-underline>
|
|
112
|
+
<k-hec-strikethrough></k-hec-strikethrough>
|
|
113
|
+
</k-hec-group>
|
|
114
|
+
<k-hec-inline-code slot="toolbar-top"></k-hec-inline-code>
|
|
115
|
+
<k-hec-dropdown slot="toolbar-top">
|
|
116
|
+
<k-icon slot="icon" name="format_paragraph"></k-icon>
|
|
117
|
+
|
|
118
|
+
<k-hec-format-block tag="p">Paragraph</k-hec-format-block>
|
|
119
|
+
<k-hec-format-block tag="h1">Heading 1</k-hec-format-block>
|
|
120
|
+
<k-hec-format-block tag="h2">Heading 2</k-hec-format-block>
|
|
121
|
+
<k-hec-format-block tag="h3">Heading 3</k-hec-format-block>
|
|
122
|
+
<k-hec-code-block>Code Block</k-hec-code-block>
|
|
123
|
+
</k-hec-dropdown>
|
|
124
|
+
<k-hec-group slot="toolbar-top">
|
|
125
|
+
<k-hec-bullet-list></k-hec-bullet-list>
|
|
126
|
+
<k-hec-number-list></k-hec-number-list>
|
|
127
|
+
</k-hec-group>
|
|
128
|
+
<k-hec-group slot="toolbar-top">
|
|
129
|
+
<k-hec-align-left></k-hec-align-left>
|
|
130
|
+
<k-hec-align-center></k-hec-align-center>
|
|
131
|
+
<k-hec-align-right></k-hec-align-right>
|
|
132
|
+
<k-hec-align-justify></k-hec-align-justify>
|
|
133
|
+
</k-hec-group>
|
|
134
|
+
<k-hec-group slot="toolbar-top">
|
|
135
|
+
<k-hec-text-color></k-hec-text-color>
|
|
136
|
+
<k-hec-text-background-color></k-hec-text-background-color>
|
|
137
|
+
</k-hec-group>
|
|
138
|
+
<k-hec-clear-formatting slot="toolbar-top"></k-hec-clear-formatting>
|
|
139
|
+
<k-hec-group slot="toolbar-top">
|
|
140
|
+
<k-hec-create-link></k-hec-create-link>
|
|
141
|
+
<k-hec-insert-table></k-hec-insert-table>
|
|
142
|
+
</k-hec-group>
|
|
143
|
+
<k-hec-spacer slot="toolbar-top"></k-hec-spacer>
|
|
144
|
+
<k-hec-mode slot="toolbar-top"></k-hec-mode>
|
|
145
|
+
<k-hec-word-count slot="toolbar-bottom"></k-hec-word-count>
|
|
146
|
+
<k-hec-character-count slot="toolbar-bottom"></k-hec-character-count>
|
|
147
|
+
</k-html-editor>
|
|
148
|
+
</k-card>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<h3 id="javascriptUsage"><a href="#javascriptUsage" class="no-link">JavaScript API Example</a></h3>
|
|
153
|
+
<p>Use the editor without controls and interact with it programmatically using custom buttons and the JavaScript API:</p>
|
|
154
|
+
<div class="row -mx">
|
|
155
|
+
<div class="col m-span-12 px">
|
|
156
|
+
<k-card label="HTML">
|
|
157
|
+
<pre><code class="hljs xml"><span class="hljs-comment"><!-- Custom toolbar --></span>
|
|
158
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span>></span>
|
|
159
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"myEditor.bold()"</span>></span>Bold<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
160
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"myEditor.italic()"</span>></span>Italic<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
161
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"myEditor.unorderedList()"</span>></span>List<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
162
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"myEditor.setTextColor('#ff0000')"</span>></span>Red<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
163
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"insertHTML()"</span>></span>Insert<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
164
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"getContent()"</span>></span>Get Value<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
165
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
166
|
+
|
|
167
|
+
<span class="hljs-comment"><!-- Editor without controls --></span>
|
|
168
|
+
<span class="hljs-tag"><<span class="hljs-name">k-html-editor</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"myEditor"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-html-editor</span>></span>
|
|
169
|
+
|
|
170
|
+
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
|
171
|
+
<span class="hljs-keyword">const</span> myEditor = <span class="hljs-variable language_">document</span>.getElementById(<span class="hljs-string">'myEditor'</span>);
|
|
172
|
+
|
|
173
|
+
<span class="hljs-comment">// Set initial content</span>
|
|
174
|
+
myEditor.setValue(<span class="hljs-string">'<p>Select text and use the buttons above!</p>'</span>);
|
|
175
|
+
|
|
176
|
+
<span class="hljs-keyword">function</span> <span class="hljs-title function_">insertHTML</span>(<span class="hljs-params"></span>) {
|
|
177
|
+
myEditor.insertHTML(<span class="hljs-string">'<p><b>Inserted content!</b></p>'</span>);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
<span class="hljs-keyword">function</span> <span class="hljs-title function_">getContent</span>(<span class="hljs-params"></span>) {
|
|
181
|
+
alert(myEditor.getValue());
|
|
182
|
+
}
|
|
183
|
+
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
184
|
+
</k-card>
|
|
185
|
+
</div>
|
|
186
|
+
<div class="col m-span-12 px">
|
|
187
|
+
<k-card label="Output">
|
|
188
|
+
<div class="mb">
|
|
189
|
+
<button onclick="myEditor.bold()">Bold</button>
|
|
190
|
+
<button onclick="myEditor.italic()">Italic</button>
|
|
191
|
+
<button onclick="myEditor.unorderedList()">List</button>
|
|
192
|
+
<button onclick="myEditor.setTextColor('#ff0000')">Red</button>
|
|
193
|
+
<button onclick="insertMyEditorHTML()">Insert</button>
|
|
194
|
+
<button onclick="getMyEditorContent()">Get Value</button>
|
|
195
|
+
</div>
|
|
196
|
+
<k-html-editor id="myEditor" class="b r"></k-html-editor>
|
|
197
|
+
<script>
|
|
198
|
+
const myEditor = document.getElementById('myEditor');
|
|
199
|
+
setTimeout(() => {
|
|
200
|
+
myEditor.setValue('<p>Select text and use the buttons above to format it!</p><p>The editor works without any built-in controls - you have full control via JavaScript.</p>');
|
|
201
|
+
}, 100);
|
|
202
|
+
|
|
203
|
+
function insertMyEditorHTML() {
|
|
204
|
+
myEditor.insertHTML('<p><b>Inserted content!</b></p>');
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
function getMyEditorContent() {
|
|
208
|
+
alert(myEditor.getValue());
|
|
209
|
+
}
|
|
210
|
+
</script>
|
|
211
|
+
</k-card>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
|
|
215
|
+
<h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
|
|
216
|
+
|
|
217
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
218
|
+
<p><code>new HtmlEditor()</code></p>
|
|
219
|
+
<p>Extends <code>ShadowComponent</code> which extends <code>LitElement</code>.</p>
|
|
220
|
+
|
|
221
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
222
|
+
|
|
223
|
+
<h5><code>name<i>: String</i></code></h5>
|
|
224
|
+
<p>The name attribute for form submission.</p>
|
|
225
|
+
|
|
226
|
+
<h5><code>value<i>: String</i></code></h5>
|
|
227
|
+
<p>The HTML content of the editor. Can be get or set via JavaScript or HTML attribute.</p>
|
|
228
|
+
|
|
229
|
+
<h5><code>mode<i>: String</i></code></h5>
|
|
230
|
+
<p>Current editing mode. Either <code>'visual'</code> (WYSIWYG) or <code>'code'</code> (raw HTML). Default: <code>'visual'</code></p>
|
|
231
|
+
|
|
232
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
233
|
+
|
|
234
|
+
<h4>Mode Control</h4>
|
|
235
|
+
<h5><code>setMode(mode)<i>: this</i></code></h5>
|
|
236
|
+
<p>Set the editing mode. Accepts <code>'visual'</code> or <code>'code'</code>.</p>
|
|
237
|
+
|
|
238
|
+
<h5><code>toggleMode()<i>: this</i></code></h5>
|
|
239
|
+
<p>Toggle between visual and code modes.</p>
|
|
240
|
+
|
|
241
|
+
<h4>Content Management</h4>
|
|
242
|
+
<h5><code>getValue()<i>: String</i></code></h5>
|
|
243
|
+
<p>Returns the current HTML content.</p>
|
|
244
|
+
|
|
245
|
+
<h5><code>setValue(html)<i>: this</i></code></h5>
|
|
246
|
+
<p>Sets the HTML content of the editor.</p>
|
|
247
|
+
|
|
248
|
+
<h5><code>clear()<i>: this</i></code></h5>
|
|
249
|
+
<p>Clears all content from the editor.</p>
|
|
250
|
+
|
|
251
|
+
<h4>Text Formatting</h4>
|
|
252
|
+
<h5><code>bold()<i>: this</i></code></h5>
|
|
253
|
+
<p>Applies bold formatting to the selected text.</p>
|
|
254
|
+
|
|
255
|
+
<h5><code>italic()<i>: this</i></code></h5>
|
|
256
|
+
<p>Applies italic formatting to the selected text.</p>
|
|
257
|
+
|
|
258
|
+
<h5><code>underline()<i>: this</i></code></h5>
|
|
259
|
+
<p>Applies underline formatting to the selected text.</p>
|
|
260
|
+
|
|
261
|
+
<h5><code>strikethrough()<i>: this</i></code></h5>
|
|
262
|
+
<p>Applies strikethrough formatting to the selected text.</p>
|
|
263
|
+
|
|
264
|
+
<h4>Lists</h4>
|
|
265
|
+
<h5><code>orderedList()<i>: this</i></code></h5>
|
|
266
|
+
<p>Creates or toggles an ordered (numbered) list.</p>
|
|
267
|
+
|
|
268
|
+
<h5><code>unorderedList()<i>: this</i></code></h5>
|
|
269
|
+
<p>Creates or toggles an unordered (bulleted) list.</p>
|
|
270
|
+
|
|
271
|
+
<h4>Text Alignment</h4>
|
|
272
|
+
<h5><code>alignLeft()<i>: this</i></code></h5>
|
|
273
|
+
<p>Aligns text to the left.</p>
|
|
274
|
+
|
|
275
|
+
<h5><code>alignCenter()<i>: this</i></code></h5>
|
|
276
|
+
<p>Centers the text.</p>
|
|
277
|
+
|
|
278
|
+
<h5><code>alignRight()<i>: this</i></code></h5>
|
|
279
|
+
<p>Aligns text to the right.</p>
|
|
280
|
+
|
|
281
|
+
<h5><code>alignJustify()<i>: this</i></code></h5>
|
|
282
|
+
<p>Justifies the text.</p>
|
|
283
|
+
|
|
284
|
+
<h4>Text Color</h4>
|
|
285
|
+
<h5><code>setTextColor(color)<i>: this</i></code></h5>
|
|
286
|
+
<p>Sets the foreground color of selected text. Accepts any valid CSS color value (hex, rgb, color name).</p>
|
|
287
|
+
|
|
288
|
+
<h5><code>removeTextColor()<i>: this</i></code></h5>
|
|
289
|
+
<p>Removes foreground color from selected text.</p>
|
|
290
|
+
|
|
291
|
+
<h5><code>setTextBackgroundColor(color)<i>: this</i></code></h5>
|
|
292
|
+
<p>Sets the background color of selected text. Accepts any valid CSS color value (hex, rgb, color name).</p>
|
|
293
|
+
|
|
294
|
+
<h5><code>removeTextBackgroundColor()<i>: this</i></code></h5>
|
|
295
|
+
<p>Removes background color from selected text.</p>
|
|
296
|
+
|
|
297
|
+
<h4>Formatting Control</h4>
|
|
298
|
+
<h5><code>removeFormat()<i>: this</i></code></h5>
|
|
299
|
+
<p>Removes all formatting from the selected text.</p>
|
|
300
|
+
|
|
301
|
+
<h5><code>formatBlock(tag)<i>: this</i></code></h5>
|
|
302
|
+
<p>Formats the current block with the specified HTML tag (e.g., 'h1', 'h2', 'h3', 'p', 'pre').</p>
|
|
303
|
+
|
|
304
|
+
<h5><code>insertHTML(html)<i>: this</i></code></h5>
|
|
305
|
+
<p>Inserts HTML at the current cursor position.</p>
|
|
306
|
+
|
|
307
|
+
<h5><code>insertAtCursor(html)<i>: this</i></code></h5>
|
|
308
|
+
<p>Alias for <code>insertHTML()</code>.</p>
|
|
309
|
+
|
|
310
|
+
<h5><code>insertTable(rows, columns, includeHeaders, cellData)<i>: this</i></code></h5>
|
|
311
|
+
<p>Inserts an HTML table at the cursor position.</p>
|
|
312
|
+
<ul>
|
|
313
|
+
<li><code>rows</code> - Number of rows to create</li>
|
|
314
|
+
<li><code>columns</code> - Number of columns to create</li>
|
|
315
|
+
<li><code>includeHeaders</code> - Boolean indicating whether to include header row (default: false)</li>
|
|
316
|
+
<li><code>cellData</code> - Optional 2D array of cell content. If provided, rows/columns are determined from array dimensions</li>
|
|
317
|
+
</ul>
|
|
318
|
+
|
|
319
|
+
<h5><code>insertElementAtCursor(element, selectAfter)<i>: this</i></code></h5>
|
|
320
|
+
<p>Inserts a DOM element at the cursor position or replaces selection.</p>
|
|
321
|
+
<ul>
|
|
322
|
+
<li><code>element</code> - DOM element to insert</li>
|
|
323
|
+
<li><code>selectAfter</code> - Boolean indicating whether to select the inserted element after insertion (default: true)</li>
|
|
324
|
+
</ul>
|
|
325
|
+
|
|
326
|
+
<h5><code>replaceSelectionWithElement(element, selectAfter)<i>: this</i></code></h5>
|
|
327
|
+
<p>Replaces the current selection with a DOM element.</p>
|
|
328
|
+
<ul>
|
|
329
|
+
<li><code>element</code> - DOM element to insert</li>
|
|
330
|
+
<li><code>selectAfter</code> - Boolean indicating whether to select the inserted element after replacement (default: true)</li>
|
|
331
|
+
</ul>
|
|
332
|
+
|
|
333
|
+
<h5><code>wrapSelection(before, after, savedSelection)<i>: this</i></code></h5>
|
|
334
|
+
<p>Wraps the selected text with HTML tags. Handles complex cases like unwrapping existing tags and preventing nested pre tags.</p>
|
|
335
|
+
<ul>
|
|
336
|
+
<li><code>before</code> - Opening HTML tag(s) to wrap with</li>
|
|
337
|
+
<li><code>after</code> - Closing HTML tag(s) to wrap with</li>
|
|
338
|
+
<li><code>savedSelection</code> - Optional previously saved selection text to use instead of current selection</li>
|
|
339
|
+
</ul>
|
|
340
|
+
|
|
341
|
+
<h4>Selection Management</h4>
|
|
342
|
+
<h5><code>getSelection()<i>: Object | null</i></code></h5>
|
|
343
|
+
<p>Returns an object containing information about the current selection: <code>{ text, html, range, selection }</code></p>
|
|
344
|
+
|
|
345
|
+
<h5><code>getSelectedText()<i>: String</i></code></h5>
|
|
346
|
+
<p>Returns the plain text of the current selection.</p>
|
|
347
|
+
|
|
348
|
+
<h5><code>getSelectedHTML()<i>: String</i></code></h5>
|
|
349
|
+
<p>Returns the HTML of the current selection.</p>
|
|
350
|
+
|
|
351
|
+
<h5><code>setSelection(startNode, startOffset, endNode, endOffset)<i>: this</i></code></h5>
|
|
352
|
+
<p>Programmatically sets the selection range.</p>
|
|
353
|
+
|
|
354
|
+
<h5><code>selectAll()<i>: this</i></code></h5>
|
|
355
|
+
<p>Selects all content in the editor.</p>
|
|
356
|
+
|
|
357
|
+
<h5><code>replaceSelection(html)<i>: this</i></code></h5>
|
|
358
|
+
<p>Replaces the current selection with the provided HTML.</p>
|
|
359
|
+
|
|
360
|
+
<h5><code>deleteSelection()<i>: this</i></code></h5>
|
|
361
|
+
<p>Deletes the currently selected content.</p>
|
|
362
|
+
|
|
363
|
+
<h5><code>getValueWithSelectionMarkers()<i>: Object</i></code></h5>
|
|
364
|
+
<p>Returns the editor content with special Unicode markers indicating cursor position or selection boundaries. Useful for preserving selection state during content transformations.</p>
|
|
365
|
+
<p>Returns object with properties:</p>
|
|
366
|
+
<ul>
|
|
367
|
+
<li><code>html</code> - HTML content with markers inserted</li>
|
|
368
|
+
<li><code>hasCursor</code> - Boolean indicating if cursor position is marked</li>
|
|
369
|
+
<li><code>hasSelection</code> - Boolean indicating if selection is marked</li>
|
|
370
|
+
<li><code>cursorMarker</code> - Unicode character used for cursor (\uFFF0)</li>
|
|
371
|
+
<li><code>selectionStart</code> - Unicode character for selection start (\uFFF1)</li>
|
|
372
|
+
<li><code>selectionEnd</code> - Unicode character for selection end (\uFFF2)</li>
|
|
373
|
+
<li><code>selectedText</code> - Plain text of the selection</li>
|
|
374
|
+
</ul>
|
|
375
|
+
|
|
376
|
+
<h5><code>setValueFromSelectionMarkers(html, markers)<i>: this</i></code></h5>
|
|
377
|
+
<p>Sets editor content and restores cursor/selection from Unicode markers. Companion method to <code>getValueWithSelectionMarkers()</code>.</p>
|
|
378
|
+
<ul>
|
|
379
|
+
<li><code>html</code> - HTML content containing marker characters</li>
|
|
380
|
+
<li><code>markers</code> - Object with marker information (hasCursor, hasSelection, cursorMarker, selectionStart, selectionEnd)</li>
|
|
381
|
+
</ul>
|
|
382
|
+
|
|
383
|
+
<h4>Links and Media</h4>
|
|
384
|
+
<h5><code>createLink(url)<i>: this</i></code></h5>
|
|
385
|
+
<p>Creates a hyperlink from the selected text.</p>
|
|
386
|
+
|
|
387
|
+
<h5><code>unlink()<i>: this</i></code></h5>
|
|
388
|
+
<p>Removes hyperlink from the selected text.</p>
|
|
389
|
+
|
|
390
|
+
<h5><code>insertImage(url)<i>: this</i></code></h5>
|
|
391
|
+
<p>Inserts an image at the cursor position.</p>
|
|
392
|
+
|
|
393
|
+
<h4>History</h4>
|
|
394
|
+
<h5><code>undo()<i>: this</i></code></h5>
|
|
395
|
+
<p>Undoes the last action.</p>
|
|
396
|
+
|
|
397
|
+
<h5><code>redo()<i>: this</i></code></h5>
|
|
398
|
+
<p>Redoes the last undone action.</p>
|
|
399
|
+
|
|
400
|
+
<h3 id="events"><a href="#events" class="no-link">Events</a></h3>
|
|
401
|
+
|
|
402
|
+
<h5><code>change</code></h5>
|
|
403
|
+
<p>Dispatched when the content changes. Event detail: <code>{ value: String }</code></p>
|
|
404
|
+
|
|
405
|
+
<h5><code>mode-changed</code></h5>
|
|
406
|
+
<p>Dispatched when the editing mode changes between 'visual' and 'code'. Event detail: <code>{ mode: String }</code></p>
|
|
407
|
+
|
|
408
|
+
</main>
|
|
409
|
+
<div style="height:33vh"></div>
|
|
410
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
411
|
+
<script type="module" src="../src/components/HtmlEditor.js"></script>
|
|
412
|
+
<script type="module" src="../src/components/Dropdown.js"></script>
|
|
413
|
+
<script type="module" src="../src/components/htmlEditorControls/Bold.js"></script>
|
|
414
|
+
<script type="module" src="../src/components/htmlEditorControls/Italic.js"></script>
|
|
415
|
+
<script type="module" src="../src/components/htmlEditorControls/Underline.js"></script>
|
|
416
|
+
<script type="module" src="../src/components/htmlEditorControls/Strikethrough.js"></script>
|
|
417
|
+
<script type="module" src="../src/components/htmlEditorControls/BulletList.js"></script>
|
|
418
|
+
<script type="module" src="../src/components/htmlEditorControls/NumberList.js"></script>
|
|
419
|
+
<script type="module" src="../src/components/htmlEditorControls/AlignLeft.js"></script>
|
|
420
|
+
<script type="module" src="../src/components/htmlEditorControls/AlignCenter.js"></script>
|
|
421
|
+
<script type="module" src="../src/components/htmlEditorControls/AlignRight.js"></script>
|
|
422
|
+
<script type="module" src="../src/components/htmlEditorControls/AlignJustify.js"></script>
|
|
423
|
+
<script type="module" src="../src/components/htmlEditorControls/CreateLink.js"></script>
|
|
424
|
+
<script type="module" src="../src/components/htmlEditorControls/Mode.js"></script>
|
|
425
|
+
<script type="module" src="../src/components/htmlEditorControls/DropdownControl.js"></script>
|
|
426
|
+
<script type="module" src="../src/components/htmlEditorControls/FormatBlock.js"></script>
|
|
427
|
+
<script type="module" src="../src/components/htmlEditorControls/InlineCode.js"></script>
|
|
428
|
+
<script type="module" src="../src/components/htmlEditorControls/CodeBlock.js"></script>
|
|
429
|
+
<script type="module" src="../src/components/htmlEditorControls/ControlGroup.js"></script>
|
|
430
|
+
<script type="module" src="../src/components/htmlEditorControls/ControlSpacer.js"></script>
|
|
431
|
+
<script type="module" src="../src/components/htmlEditorControls/TextColor.js"></script>
|
|
432
|
+
<script type="module" src="../src/components/htmlEditorControls/TextBackgroundColor.js"></script>
|
|
433
|
+
<script type="module" src="../src/components/htmlEditorControls/ClearFormatting.js"></script>
|
|
434
|
+
<script type="module" src="../src/components/htmlEditorControls/WordCount.js"></script>
|
|
435
|
+
<script type="module" src="../src/components/htmlEditorControls/CharacterCount.js"></script>
|
|
436
|
+
<script type="module" src="../src/components/htmlEditorControls/InsertTable.js"></script>
|
|
437
|
+
<script type="module" src="../src/components/Resize.js"></script>
|
|
438
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
439
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
440
|
+
|
|
441
|
+
</body>
|
|
442
|
+
</html>
|
|
@@ -29,7 +29,6 @@
|
|
|
29
29
|
<a href="#fallbackIcon">Fallback Icon</a><br />
|
|
30
30
|
<a href="#changingIconDirectory">Changing the Icon Directory Location</a><br />
|
|
31
31
|
<a href="#addingIcons">Adding Icons</a><br />
|
|
32
|
-
<a href="#updatingIconDirectoryPath">Updating the Icon Directory Path</a><br />
|
|
33
32
|
|
|
34
33
|
<h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
|
|
35
34
|
<a href="#constructor">Constructor</a><br />
|
|
@@ -114,12 +113,12 @@
|
|
|
114
113
|
<div class="row -mx mb">
|
|
115
114
|
<div class="col d-span-6 m-span-12 px">
|
|
116
115
|
<k-card label="HTML">
|
|
117
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-icon</span> <span class="hljs-attr">
|
|
116
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"wysiwyg"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-icon</span>></span></code></pre>
|
|
118
117
|
</k-card>
|
|
119
118
|
</div>
|
|
120
119
|
<div class="col d-span-6 m-span-12 px">
|
|
121
120
|
<k-card label="Results">
|
|
122
|
-
<k-icon
|
|
121
|
+
<k-icon name="wysiwyg"></k-icon>
|
|
123
122
|
</k-card>
|
|
124
123
|
</div>
|
|
125
124
|
</div>
|
|
@@ -164,10 +163,6 @@
|
|
|
164
163
|
</div>
|
|
165
164
|
</div>
|
|
166
165
|
|
|
167
|
-
<h3 id="updatingIconDirectoryPath"><a href="#updatingIconDirectoryPath" class="no-link">Updating the Icon Directory Path</a></h3>
|
|
168
|
-
<p>To change the location of the directory holding the icons, set the global <code>kempo.pathToIcons</code> config before any components are loaded (for example, in the head of the document).</p>
|
|
169
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"><br /> window.kempo = {<br /> pathToIcons: [<span class="hljs-string">'./pathTo/icons'</span>]<br /> };<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
170
|
-
|
|
171
166
|
<h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
|
|
172
167
|
|
|
173
168
|
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|