📱 移动端 .protyle-wysiwyg 上 contenteditable 为 false,因此无法用此区分样式,只能新加一个 data-readonly 用来区分

This commit is contained in:
Vanessa 2024-03-08 16:45:00 +08:00
parent f7b2966978
commit 2fb5e28442
2 changed files with 7 additions and 3 deletions

View file

@ -572,7 +572,7 @@
.protyle .protyle-wysiwyg {
.li[data-subtype="o"] > .protyle-action,
.li[data-subtype="u"] > .protyle-action,
&[contenteditable="true"] .li[data-subtype="t"] > .protyle-action {
&[data-readonly="true"] .li[data-subtype="t"] > .protyle-action {
cursor: pointer;
&:hover {
@ -586,7 +586,7 @@
}
// 导出 html 不需要编辑样式
.protyle-wysiwyg[contenteditable="true"] {
.protyle-wysiwyg[data-readonly="false"] {
span[data-type~="inline-math"],
span[data-type~="tag"],
span[data-type~="block-ref"],
@ -632,7 +632,7 @@
}
.protyle-wysiwyg:not([contenteditable]),
.protyle-wysiwyg[contenteditable="false"] {
.protyle-wysiwyg[data-readonly="true"] {
.img:hover .protyle-icons {
display: none;
}

View file

@ -304,6 +304,8 @@ export const disabledProtyle = (protyle: IProtyle) => {
});
protyle.wysiwyg.element.style.userSelect = "text";
protyle.wysiwyg.element.setAttribute("contenteditable", "false");
// 用于区分移动端样式
protyle.wysiwyg.element.setAttribute("data-readonly", "true");
protyle.wysiwyg.element.querySelectorAll('[contenteditable="true"][spellcheck]').forEach(item => {
item.setAttribute("contenteditable", "false");
});
@ -345,6 +347,8 @@ export const enableProtyle = (protyle: IProtyle) => {
protyle.wysiwyg.element.setAttribute("contenteditable", "true");
protyle.wysiwyg.element.style.userSelect = "";
}
// 用于区分移动端样式
protyle.wysiwyg.element.setAttribute("data-readonly", "false");
if (protyle.title) {
const titleElement = protyle.title.element.querySelector(".protyle-title__input") as HTMLElement;
titleElement.setAttribute("contenteditable", "true");