LibreCCM
/
libreccm
3
0
Fork 0
Code Issues 10 Pull Requests Packages Releases Wiki Activity

Paragraphy styles for text editor.

pull/10/head
Jens Pelzetter 2021-08-21 11:59:48 +02:00
parent 508720ca98
commit eeeb8a288f
3 changed files with 54 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
View File

@ -537,7 +537,7 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="cms-tiptap-editor-buttons mb-1"> <div class="cms-tiptap-editor-buttons d-flex mb-1">
<div class="border-end border-dark cms-tiptap-editor-textformatting"> <div class="border-end border-dark cms-tiptap-editor-textformatting">
<button class="btn btn-outline-dark tiptap-emph" <button class="btn btn-outline-dark tiptap-emph"
title="#{CmsAdminMessages['cms_editor.buttons.emph']}" title="#{CmsAdminMessages['cms_editor.buttons.emph']}"
@ -587,7 +587,7 @@
<button class="btn btn-outline-dark tiptap-h#{level}" <button class="btn btn-outline-dark tiptap-h#{level}"
title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}" title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
type="button"> type="button">
<span aria-hidden="true">H#{level}</sup></span> <span aria-hidden="true">H#{level}</span>
</button> </button>
</ui:repeat> </ui:repeat>
<!-- <button class="btn btn-outline-dark tiptap-h2" <!-- <button class="btn btn-outline-dark tiptap-h2"
@ -596,6 +596,23 @@
<bootstrap:svgIcon icon="type-h2" /> <bootstrap:svgIcon icon="type-h2" />
</button> --> </button> -->
</div> </div>
<div class="border-end border-dark cms-tiptap-editor-paragraphs">
<button class="btn btn-outline-dark tiptap-paragraph"
title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}"
type="button">
<bootstrap:svgIcon icon="type" />
</button>
<button class="btn btn-outline-dark tiptap-blockquote"
title="#{CmsAdminMessages['cms_editor.buttons.blockquote']}"
type="button">
<bootstrap:svgIcon icon="blockquote-left" />
</button>
<button class="btn btn-outline-dark tiptap-codeblock"
title="#{CmsAdminMessages['cms_editor.buttons.codeblock']}"
type="button">
<bootstrap:svgIcon icon="code-square" />
</button>
</div>
</div> </div>
<div class="cms-tiptap-editor border"> <div class="cms-tiptap-editor border">

12
ccm-cms/src/main/scss/content-sections/cms-admin.scss
View File

@ -1,4 +1,16 @@
@import "custom"; @import "custom";
@import "../../../../node_modules/bootstrap/scss/bootstrap"; @import "../../../../node_modules/bootstrap/scss/bootstrap";
.cms-tiptap-editor {
blockquote {
background-color: #eee;
margin: 0.33em;
padding: 0.2em;
}
pre {
border: 1px solid #ccc;
margin: 0.33em;
padding: 0.2em;
}
}

25
ccm-cms/src/main/typescript/content-sections/cms-editor.ts
View File

@ -324,14 +324,35 @@ function initEditorButtons(editor: Editor, buttonsElem: Element) {
editor.chain().focus().toggleSuperscript().run(); editor.chain().focus().toggleSuperscript().run();
}); });
for(let i = 1; i <= 6; i++) { for (let i = 1; i <= 6; i++) {
buttonsElem buttonsElem
.querySelector(`.tiptap-h${i}`) .querySelector(`.tiptap-h${i}`)
?.addEventListener("click", event => { ?.addEventListener("click", event => {
event.preventDefault(); event.preventDefault();
editor.chain().focus().toggleHeading({level: i}).run(); editor.chain().focus().toggleHeading({ level: i }).run();
}); });
} }
buttonsElem
.querySelector(".tiptap-paragraph")
?.addEventListener("click", event => {
event.preventDefault();
editor.chain().focus().clearNodes().run();
});
buttonsElem
.querySelector(".tiptap-blockquote")
?.addEventListener("click", event => {
event.preventDefault();
editor.chain().focus().toggleBlockquote().run();
});
buttonsElem
.querySelector(".tiptap-codeblock")
?.addEventListener("click", event => {
event.preventDefault();
editor.chain().focus().toggleCodeBlock().run();
});
} }
async function showEditDialog(event: Event) { async function showEditDialog(event: Event) {