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