|
@@ -182,15 +182,14 @@ const listItem: NodeSpec = {
|
|
|
|
|
|
|
|
const paragraph: NodeSpec = {
|
|
const paragraph: NodeSpec = {
|
|
|
attrs: {
|
|
attrs: {
|
|
|
- align: {
|
|
|
|
|
- default: '',
|
|
|
|
|
- },
|
|
|
|
|
- indent: {
|
|
|
|
|
- default: 0,
|
|
|
|
|
- },
|
|
|
|
|
- textIndent: {
|
|
|
|
|
- default: 0,
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ align: { default: '' },
|
|
|
|
|
+ indent: { default: 0 },
|
|
|
|
|
+ textIndent: { default: 0 },
|
|
|
|
|
+ // 新增 margin 相关属性,以字符串形式存储原始样式值
|
|
|
|
|
+ marginTop: { default: '' },
|
|
|
|
|
+ marginBottom: { default: '' },
|
|
|
|
|
+ marginLeft: { default: '' },
|
|
|
|
|
+ marginRight: { default: '' },
|
|
|
},
|
|
},
|
|
|
content: 'inline*',
|
|
content: 'inline*',
|
|
|
group: 'block',
|
|
group: 'block',
|
|
@@ -198,26 +197,48 @@ const paragraph: NodeSpec = {
|
|
|
{
|
|
{
|
|
|
tag: 'p',
|
|
tag: 'p',
|
|
|
getAttrs: dom => {
|
|
getAttrs: dom => {
|
|
|
- const { textAlign, textIndent } = (dom as HTMLElement).style
|
|
|
|
|
|
|
+ const el = dom as HTMLElement;
|
|
|
|
|
+ const style = el.style;
|
|
|
|
|
|
|
|
- let align = (dom as HTMLElement).getAttribute('align') || textAlign || ''
|
|
|
|
|
- align = /(left|right|center|justify)/.test(align) ? align : ''
|
|
|
|
|
|
|
+ // 原有 align 解析逻辑
|
|
|
|
|
+ const textAlign = style.textAlign || '';
|
|
|
|
|
+ let align = el.getAttribute('align') || textAlign || '';
|
|
|
|
|
+ align = /^(left|right|center|justify)$/.test(align) ? align : '';
|
|
|
|
|
|
|
|
- let textIndentLevel = 0
|
|
|
|
|
- if (textIndent) {
|
|
|
|
|
- if (/em/.test(textIndent)) {
|
|
|
|
|
- textIndentLevel = parseInt(textIndent)
|
|
|
|
|
- }
|
|
|
|
|
- else if (/px/.test(textIndent)) {
|
|
|
|
|
- textIndentLevel = Math.floor(parseInt(textIndent) / 16)
|
|
|
|
|
- if (!textIndentLevel) textIndentLevel = 1
|
|
|
|
|
|
|
+ // 原有 textIndent 解析逻辑(转换为数字级别)
|
|
|
|
|
+ /*
|
|
|
|
|
+ const textIndentStyle = style.textIndent || '';
|
|
|
|
|
+ let textIndentLevel = 0;
|
|
|
|
|
+ if (textIndentStyle) {
|
|
|
|
|
+ if (/em/.test(textIndentStyle)) {
|
|
|
|
|
+ textIndentLevel = parseInt(textIndentStyle, 10);
|
|
|
|
|
+ } else if (/px/.test(textIndentStyle)) {
|
|
|
|
|
+ textIndentLevel = Math.floor(parseInt(textIndentStyle, 10) / 16);
|
|
|
|
|
+ if (!textIndentLevel) textIndentLevel = 1;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- const indent = +((dom as HTMLElement).getAttribute('data-indent') || 0)
|
|
|
|
|
-
|
|
|
|
|
- return { align, indent, textIndent }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // 原有 indent(数据属性)
|
|
|
|
|
+ const indent = +(el.getAttribute('data-indent') || 0);
|
|
|
|
|
+ */
|
|
|
|
|
+
|
|
|
|
|
+ // 新增 margin 解析(直接取原始字符串)
|
|
|
|
|
+ const marginTop = style.marginTop || '';
|
|
|
|
|
+ const marginBottom = style.marginBottom || '';
|
|
|
|
|
+ const marginLeft = style.marginLeft || '';
|
|
|
|
|
+ const marginRight = style.marginRight || '';
|
|
|
|
|
+ const textIndent = style.textIndent || '';
|
|
|
|
|
+
|
|
|
|
|
+ return {
|
|
|
|
|
+ align,
|
|
|
|
|
+ textIndent,
|
|
|
|
|
+ marginTop,
|
|
|
|
|
+ marginBottom,
|
|
|
|
|
+ marginLeft,
|
|
|
|
|
+ marginRight,
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
tag: 'img',
|
|
tag: 'img',
|
|
@@ -229,17 +250,40 @@ const paragraph: NodeSpec = {
|
|
|
},
|
|
},
|
|
|
],
|
|
],
|
|
|
toDOM: (node: Node) => {
|
|
toDOM: (node: Node) => {
|
|
|
- const { align, indent, textIndent } = node.attrs
|
|
|
|
|
- let style = ''
|
|
|
|
|
- if (align && align !== 'left') style += `text-align: ${align};text-align-last: ${align};`
|
|
|
|
|
- if (textIndent) style += `text-indent: ${textIndent};`
|
|
|
|
|
|
|
+ const {
|
|
|
|
|
+ align,
|
|
|
|
|
+ textIndent,
|
|
|
|
|
+ marginTop,
|
|
|
|
|
+ marginBottom,
|
|
|
|
|
+ marginLeft,
|
|
|
|
|
+ marginRight,
|
|
|
|
|
+ } = node.attrs;
|
|
|
|
|
|
|
|
- const attr: Attr = { style }
|
|
|
|
|
- //if (indent) attr['data-indent'] = indent
|
|
|
|
|
|
|
+ let style = '';
|
|
|
|
|
|
|
|
- return ['p', attr, 0]
|
|
|
|
|
|
|
+ if (align && align !== 'left') {
|
|
|
|
|
+ style += `text-align: ${align};text-align-last: ${align};`;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 注意:原有 textIndent 为数字,这里直接输出数字(不带单位)
|
|
|
|
|
+ // 如果你希望输出带单位的样式,需根据业务调整(见后文说明)
|
|
|
|
|
+ if (textIndent) {
|
|
|
|
|
+ style += `text-indent: (100% - ${textIndent});`;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 新增 margin 样式输出
|
|
|
|
|
+ if (marginTop) style += `margin-top: ${marginTop};`;
|
|
|
|
|
+ if (marginBottom) style += `margin-bottom: ${marginBottom};`;
|
|
|
|
|
+ if (marginLeft) style += `margin-left: ${marginLeft};`;
|
|
|
|
|
+ if (marginRight) style += `margin-right: ${marginRight};`;
|
|
|
|
|
+
|
|
|
|
|
+ const attr: Attr = { style };
|
|
|
|
|
+ // 原有的 indent 存储方式(根据需要可保留或取消注释)
|
|
|
|
|
+ // if (indent) attr['data-indent'] = indent;
|
|
|
|
|
+
|
|
|
|
|
+ return ['p', attr, 0];
|
|
|
},
|
|
},
|
|
|
-}
|
|
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const {
|
|
const {
|
|
|
doc,
|
|
doc,
|