first commit
This commit is contained in:
cieanyau committed
commit
db5762abd4
687 files changed
+171307
No files matched your search
@@ -0,0 +1,248 @@
|
||||
<script>
|
||||
import "~/assets/styles/RichTextEditor.NkmgPT5m.css";
|
||||
import { renderList } from "vue";
|
||||
import { onMounted } from "vue";
|
||||
import { normalizeClass } from "vue";
|
||||
import { mergeModels } from "vue";
|
||||
import { useModel } from "vue";
|
||||
import { watch } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { createElementBlock } from "vue";
|
||||
import { Fragment } from "vue";
|
||||
import { createElementVNode } from "vue";
|
||||
import { defineComponent } from "vue";
|
||||
import { openBlock } from "vue";
|
||||
import { normalizeStyle } from "vue";
|
||||
import { withModifiers } from "vue";
|
||||
import { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
|
||||
import { n as sanitize_n } from "~/lib/sanitize.js";
|
||||
var g = [`aria-label`],
|
||||
_ = [`title`, `aria-label`, `disabled`, `onClick`],
|
||||
v = [
|
||||
`id`,
|
||||
`aria-label`,
|
||||
`aria-disabled`,
|
||||
`contenteditable`,
|
||||
`data-placeholder`,
|
||||
],
|
||||
y = Object.assign(
|
||||
_plugin_vue_export_helper_t(
|
||||
defineComponent({
|
||||
__name: `RichTextEditor`,
|
||||
props: mergeModels(
|
||||
{
|
||||
id: {},
|
||||
label: {
|
||||
default: `正文`,
|
||||
},
|
||||
placeholder: {
|
||||
default: `输入内容`,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
},
|
||||
minHeight: {
|
||||
default: 240,
|
||||
},
|
||||
},
|
||||
{
|
||||
modelValue: {
|
||||
default: ``,
|
||||
},
|
||||
modelModifiers: {},
|
||||
},
|
||||
),
|
||||
emits: [`update:modelValue`],
|
||||
setup(r) {
|
||||
let u = r,
|
||||
m = useModel(r, `modelValue`),
|
||||
y = ref(null),
|
||||
b = null,
|
||||
x = [
|
||||
{
|
||||
name: `加粗`,
|
||||
command: `bold`,
|
||||
icon: `pi pi-bold`,
|
||||
},
|
||||
{
|
||||
name: `斜体`,
|
||||
command: `italic`,
|
||||
icon: `pi pi-italic`,
|
||||
},
|
||||
{
|
||||
name: `下划线`,
|
||||
command: `underline`,
|
||||
icon: `pi pi-underline`,
|
||||
},
|
||||
{
|
||||
name: `有序列表`,
|
||||
command: `insertOrderedList`,
|
||||
icon: `pi pi-list`,
|
||||
},
|
||||
{
|
||||
name: `无序列表`,
|
||||
command: `insertUnorderedList`,
|
||||
icon: `pi pi-list-check`,
|
||||
},
|
||||
{
|
||||
name: `左对齐`,
|
||||
command: `justifyLeft`,
|
||||
icon: `pi pi-align-left`,
|
||||
},
|
||||
{
|
||||
name: `居中对齐`,
|
||||
command: `justifyCenter`,
|
||||
icon: `pi pi-align-center`,
|
||||
},
|
||||
{
|
||||
name: `右对齐`,
|
||||
command: `justifyRight`,
|
||||
icon: `pi pi-align-right`,
|
||||
},
|
||||
];
|
||||
function S() {
|
||||
let e = window.getSelection();
|
||||
e?.rangeCount &&
|
||||
y.value?.contains(e.anchorNode) &&
|
||||
(b = e.getRangeAt(0).cloneRange());
|
||||
}
|
||||
function C() {
|
||||
y.value &&
|
||||
((m.value = y.value.innerText.trim()
|
||||
? sanitize_n(y.value.innerHTML)
|
||||
: ``),
|
||||
S());
|
||||
}
|
||||
function w(e) {
|
||||
if (!u.disabled && y.value) {
|
||||
if (
|
||||
(y.value.focus(),
|
||||
b && y.value.contains(b.commonAncestorContainer))
|
||||
) {
|
||||
let e = window.getSelection();
|
||||
(e?.removeAllRanges(), e?.addRange(b));
|
||||
}
|
||||
(document.execCommand(e, !1), C());
|
||||
}
|
||||
}
|
||||
function T(e) {
|
||||
(e.preventDefault(),
|
||||
!u.disabled &&
|
||||
(document.execCommand(
|
||||
`insertText`,
|
||||
!1,
|
||||
e.clipboardData?.getData(`text/plain`) || ``,
|
||||
),
|
||||
C()));
|
||||
}
|
||||
return (
|
||||
onMounted(() => {
|
||||
y.value && (y.value.innerHTML = sanitize_n(m.value));
|
||||
}),
|
||||
watch(m, (e) => {
|
||||
y.value &&
|
||||
sanitize_n(y.value.innerHTML) !== e &&
|
||||
(y.value.innerHTML = sanitize_n(e));
|
||||
}),
|
||||
(t, i) => (
|
||||
openBlock(),
|
||||
createElementBlock(
|
||||
`div`,
|
||||
{
|
||||
class: normalizeClass([
|
||||
`rich-editor`,
|
||||
{
|
||||
disabled: r.disabled,
|
||||
},
|
||||
]),
|
||||
},
|
||||
[
|
||||
createElementVNode(
|
||||
`div`,
|
||||
{
|
||||
class: `editor-toolbar`,
|
||||
role: `toolbar`,
|
||||
"aria-label": `${r.label}格式`,
|
||||
},
|
||||
[
|
||||
(openBlock(),
|
||||
createElementBlock(
|
||||
Fragment,
|
||||
null,
|
||||
renderList(x, (e) =>
|
||||
createElementVNode(
|
||||
`button`,
|
||||
{
|
||||
key: e.command,
|
||||
type: `button`,
|
||||
title: e.name,
|
||||
"aria-label": e.name,
|
||||
disabled: r.disabled,
|
||||
onMousedown: (i[0] ||= withModifiers(() => {}, [
|
||||
`prevent`,
|
||||
])),
|
||||
onClick: (t) => w(e.command),
|
||||
},
|
||||
[
|
||||
createElementVNode(
|
||||
`i`,
|
||||
{
|
||||
class: normalizeClass(e.icon),
|
||||
"aria-hidden": `true`,
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
],
|
||||
40,
|
||||
_,
|
||||
),
|
||||
),
|
||||
64,
|
||||
)),
|
||||
],
|
||||
8,
|
||||
g,
|
||||
),
|
||||
createElementVNode(
|
||||
`div`,
|
||||
{
|
||||
id: r.id,
|
||||
ref_key: `editor`,
|
||||
ref: y,
|
||||
class: `editor-content`,
|
||||
role: `textbox`,
|
||||
"aria-label": r.label,
|
||||
"aria-multiline": `true`,
|
||||
"aria-disabled": r.disabled,
|
||||
contenteditable: !r.disabled,
|
||||
"data-placeholder": r.placeholder,
|
||||
style: normalizeStyle({
|
||||
minHeight: `${r.minHeight}px`,
|
||||
}),
|
||||
onInput: C,
|
||||
onKeyup: S,
|
||||
onMouseup: S,
|
||||
onBlur: S,
|
||||
onPaste: T,
|
||||
},
|
||||
null,
|
||||
44,
|
||||
v,
|
||||
),
|
||||
],
|
||||
2,
|
||||
)
|
||||
)
|
||||
);
|
||||
},
|
||||
}),
|
||||
[[`__scopeId`, `data-v-858a2ddd`]],
|
||||
),
|
||||
{
|
||||
__name: `RichTextEditor`,
|
||||
},
|
||||
);
|
||||
export {};
|
||||
export default y;
|
||||
</script>
|
||||
Reference in new issue
Block a user