Insert table now working for cms editor
parent
df4cab4b5c
commit
61e6d6945c
|
|
@ -791,249 +791,255 @@ tabindex="-1"
|
|||
</button>-->
|
||||
</div>
|
||||
<!--<div class="modal-body">-->
|
||||
<div class="cms-tiptap-editor-buttons d-flex mb-1">
|
||||
<div class="px-2 cms-tiptap-editor-textformatting">
|
||||
<button
|
||||
class="btn btn-outline-dark tiptap-emph"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.emph']}"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon icon="type-italic" />
|
||||
<!-- <span class="sr-only">
|
||||
#{CmsAdminMessages['cms_editor.buttons.emph']}
|
||||
</span> -->
|
||||
</button>
|
||||
<button
|
||||
class="
|
||||
btn btn-outline-dark
|
||||
tiptap-strong-emph
|
||||
"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.strong_emph']}"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon icon="type-bold" />
|
||||
<!-- <span class="sr-only">
|
||||
#{CmsAdminMessages['cms_editor.buttons.strong_emph']}
|
||||
</span> -->
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline-dark tiptap-code"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.code']}"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon icon="code" />
|
||||
<!-- <span class="sr-only">
|
||||
#{CmsAdminMessages['cms_editor.buttons.code']}
|
||||
</span> -->
|
||||
</button>
|
||||
<button
|
||||
class="
|
||||
btn btn-outline-dark
|
||||
tiptap-strikethrough
|
||||
"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.strikethrough']}"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon
|
||||
icon="type-strikethrough"
|
||||
/>
|
||||
<!-- <span class="sr-only">
|
||||
#{CmsAdminMessages['cms_editor.buttons.strikethrough']}
|
||||
</span> -->
|
||||
</button>
|
||||
<button
|
||||
class="
|
||||
btn btn-outline-dark
|
||||
tiptap-subscript
|
||||
"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.subscript']}"
|
||||
type="button"
|
||||
>
|
||||
<span aria-hidden="true"
|
||||
>x<sub>n</sub></span
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
class="
|
||||
btn btn-outline-dark
|
||||
tiptap-superscript
|
||||
"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.superscript']}"
|
||||
type="button"
|
||||
>
|
||||
<span aria-hidden="true"
|
||||
>x<sup>n</sup></span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-2 cms-tiptap-editor-headings">
|
||||
<ui:repeat begin="1" end="6" var="level">
|
||||
<div class="cms-tiptap-editor"
|
||||
data-locale="#{cc.attrs.selectedLocale}"
|
||||
data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}">
|
||||
<div class="cms-tiptap-editor-buttons d-flex mb-1">
|
||||
<div class="px-2 cms-tiptap-editor-textformatting">
|
||||
<button
|
||||
class="btn btn-outline-dark tiptap-emph"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.emph']}"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon icon="type-italic" />
|
||||
<!-- <span class="sr-only">
|
||||
#{CmsAdminMessages['cms_editor.buttons.emph']}
|
||||
</span> -->
|
||||
</button>
|
||||
<button
|
||||
class="
|
||||
btn btn-outline-dark
|
||||
tiptap-h#{level}
|
||||
tiptap-strong-emph
|
||||
"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.strong_emph']}"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon icon="type-bold" />
|
||||
<!-- <span class="sr-only">
|
||||
#{CmsAdminMessages['cms_editor.buttons.strong_emph']}
|
||||
</span> -->
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline-dark tiptap-code"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.code']}"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon icon="code" />
|
||||
<!-- <span class="sr-only">
|
||||
#{CmsAdminMessages['cms_editor.buttons.code']}
|
||||
</span> -->
|
||||
</button>
|
||||
<button
|
||||
class="
|
||||
btn btn-outline-dark
|
||||
tiptap-strikethrough
|
||||
"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.strikethrough']}"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon
|
||||
icon="type-strikethrough"
|
||||
/>
|
||||
<!-- <span class="sr-only">
|
||||
#{CmsAdminMessages['cms_editor.buttons.strikethrough']}
|
||||
</span> -->
|
||||
</button>
|
||||
<button
|
||||
class="
|
||||
btn btn-outline-dark
|
||||
tiptap-subscript
|
||||
"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.subscript']}"
|
||||
type="button"
|
||||
>
|
||||
<span aria-hidden="true"
|
||||
>H#{level}</span
|
||||
>x<sub>n</sub></span
|
||||
>
|
||||
</button>
|
||||
</ui:repeat>
|
||||
<!-- <button class="btn btn-outline-dark tiptap-h2"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.h2']}"
|
||||
type="button">
|
||||
<bootstrap:svgIcon icon="type-h2" />
|
||||
</button> -->
|
||||
</div>
|
||||
<div class="px-2 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 class="px-2 cms-tiptap-editor-lists">
|
||||
<button
|
||||
class="btn btn-outline-dark tiptap-ul"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.ul']}"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon icon="list-ul" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline-dark tiptap-ol"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.ol']}"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon icon="list-ol" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-2 cms-tiptap-editor-table">
|
||||
<button
|
||||
class="
|
||||
btn btn-outline-dark
|
||||
tiptab-insert-table
|
||||
"
|
||||
data-target="#insert-table-dialog"
|
||||
data-toggle="modal"
|
||||
title="#{CmsAdminMessage['cms_editor.buttons.insert_table']}"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon icon="table" />
|
||||
</button>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
aria-labelledby="insert-table-dialog-title"
|
||||
class="modal fade cms-editor-insert-table-dialog"
|
||||
id="insert-table-dialog"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="modal-dialog">
|
||||
<form class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title"
|
||||
id="insert-table-dialog-title">
|
||||
#{CmsAdminMessages['cms_editor.dialogs.insert_table.title']}
|
||||
</h4>
|
||||
<button
|
||||
aria-label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']}"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon
|
||||
icon="x"
|
||||
<button
|
||||
class="
|
||||
btn btn-outline-dark
|
||||
tiptap-superscript
|
||||
"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.superscript']}"
|
||||
type="button"
|
||||
>
|
||||
<span aria-hidden="true"
|
||||
>x<sup>n</sup></span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-2 cms-tiptap-editor-headings">
|
||||
<ui:repeat begin="1" end="6" var="level">
|
||||
<button
|
||||
class="
|
||||
btn btn-outline-dark
|
||||
tiptap-h#{level}
|
||||
"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
|
||||
type="button"
|
||||
>
|
||||
<span aria-hidden="true"
|
||||
>H#{level}</span
|
||||
>
|
||||
</button>
|
||||
</ui:repeat>
|
||||
<!-- <button class="btn btn-outline-dark tiptap-h2"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.h2']}"
|
||||
type="button">
|
||||
<bootstrap:svgIcon icon="type-h2" />
|
||||
</button> -->
|
||||
</div>
|
||||
<div class="px-2 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 class="px-2 cms-tiptap-editor-lists">
|
||||
<button
|
||||
class="btn btn-outline-dark tiptap-ul"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.ul']}"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon icon="list-ul" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline-dark tiptap-ol"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.ol']}"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon icon="list-ol" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-2 cms-tiptap-editor-table">
|
||||
<button
|
||||
class="
|
||||
btn btn-outline-dark
|
||||
tiptap-insert-table
|
||||
"
|
||||
data-target="#insert-table-dialog"
|
||||
data-toggle="modal"
|
||||
title="#{CmsAdminMessage['cms_editor.buttons.insert_table']}"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon icon="table" />
|
||||
</button>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
aria-labelledby="insert-table-dialog-title"
|
||||
class="modal fade cms-editor-insert-table-dialog"
|
||||
id="insert-table-dialog"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="modal-dialog">
|
||||
<form class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title"
|
||||
id="insert-table-dialog-title">
|
||||
#{CmsAdminMessages['cms_editor.dialogs.insert_table.title']}
|
||||
</h4>
|
||||
<button
|
||||
aria-label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']}"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon
|
||||
icon="x"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<bootstrap:formGroupNumber
|
||||
help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.help']}"
|
||||
inputId="rows"
|
||||
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.label']}"
|
||||
name="rows"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<bootstrap:formGroupNumber
|
||||
help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.help']}"
|
||||
inputId="rows"
|
||||
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.label']}"
|
||||
name="rows"
|
||||
/>
|
||||
<bootstrap:formGroupNumber
|
||||
help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.help']}"
|
||||
inputId="cols"
|
||||
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.label']}"
|
||||
name="cols"
|
||||
/>
|
||||
<bootstrap:formCheck
|
||||
checked="true"
|
||||
inputId="headerRow"
|
||||
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.header_row.label']}"
|
||||
name="headerRow"
|
||||
value="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
class="
|
||||
btn btn-warning
|
||||
cms-editor-cancel-button
|
||||
"
|
||||
data-dismiss="modal"
|
||||
type="button"
|
||||
>
|
||||
#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-success"
|
||||
type="submit"
|
||||
>
|
||||
#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.submit']}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<bootstrap:formGroupNumber
|
||||
help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.help']}"
|
||||
inputId="cols"
|
||||
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.label']}"
|
||||
name="cols"
|
||||
/>
|
||||
<bootstrap:formCheck
|
||||
checked="true"
|
||||
inputId="headerRow"
|
||||
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.header_row.label']}"
|
||||
name="headerRow"
|
||||
value="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
class="
|
||||
btn btn-warning
|
||||
cms-editor-cancel-button
|
||||
"
|
||||
data-dismiss="modal"
|
||||
type="button"
|
||||
>
|
||||
#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-success"
|
||||
data-dismiss="modal"
|
||||
data-backdrop="false"
|
||||
type="submit"
|
||||
>
|
||||
#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.submit']}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cms-tiptap-editor border"
|
||||
data-locale="#{cc.attrs.selectedLocale}"
|
||||
data-variant-url="#{cc.attrs.variantUrl}"></div>
|
||||
<!--</div>-->
|
||||
<!--<div class="modal-footer">-->
|
||||
<div class="mt-3">
|
||||
<a class="btn btn-warning cms-editor-cancel-button"
|
||||
href="#{backUrl}">
|
||||
#{cc.attrs.editDialogCancelLabel}
|
||||
</a>
|
||||
<button
|
||||
class="btn btn-success cms-editor-save-button"
|
||||
disabled="#{cc.attrs.canEdit ? '' : 'disabled'}"
|
||||
type="button"
|
||||
>
|
||||
#{cc.attrs.editDialogSubmitLabel}
|
||||
</button>
|
||||
<div class="cms-tiptap-editor-canvas border"
|
||||
data-locale="#{cc.attrs.selectedLocale}"
|
||||
data-variant-url="#{cc.attrs.variantUrl}"></div>
|
||||
<!--</div>-->
|
||||
<!--<div class="modal-footer">-->
|
||||
<div class="mt-3">
|
||||
<a class="btn btn-warning cms-editor-cancel-button"
|
||||
href="#{backUrl}">
|
||||
#{cc.attrs.editDialogCancelLabel}
|
||||
</a>
|
||||
<button
|
||||
class="btn btn-success cms-editor-save-button"
|
||||
disabled="#{cc.attrs.canEdit ? '' : 'disabled'}"
|
||||
type="button"
|
||||
>
|
||||
#{cc.attrs.editDialogSubmitLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,4 +13,15 @@
|
|||
margin: 0.33em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid #000;
|
||||
margin-left: 0.2em;
|
||||
margin-right: 0.2em;
|
||||
width: 100%;
|
||||
|
||||
td, th, tr {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -94,8 +94,14 @@ async function initEditor(editorElem: HTMLElement) {
|
|||
const variant = await fetchVariant(variantUrl);
|
||||
console.log("Got variant");
|
||||
|
||||
const canvasElem = editorElem.querySelector(".cms-tiptap-editor-canvas");
|
||||
if (!canvasElem) {
|
||||
console.error("canvasElem not found.");
|
||||
return;
|
||||
}
|
||||
|
||||
const editor = new Editor({
|
||||
element: editorElem,
|
||||
element: canvasElem,
|
||||
extensions: [
|
||||
Gapcursor,
|
||||
StarterKit,
|
||||
|
|
@ -244,6 +250,7 @@ function initEditorButtons(editor: Editor, buttonsElem: Element) {
|
|||
.focus()
|
||||
.insertTable({ cols: cols, rows: rows, headerRow: headerRow })
|
||||
.run();
|
||||
$("#insert-table-dialog").modal("hide");
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue