fix: 修复行内code回车后导致样式及插入问题
This commit is contained in:
shi-lai-mu
parent
bb65032cb5
commit
cebf20a79d
|
|
@ -182,9 +182,10 @@ export default {
|
|||
// type -> 'emoji' / 'image'
|
||||
type: 'emoji',
|
||||
// content -> 数组
|
||||
content: '😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😛 😝 😜 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😢 😭 😤 😠 😡 😳 😱 😨 🤗 🤔 😶 😑 😬 🙄 😯 😴 😷 🤑 😈 🤡 💩 👻 💀 👀 👣'.split(
|
||||
/\s/
|
||||
),
|
||||
content:
|
||||
'😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😛 😝 😜 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😢 😭 😤 😠 😡 😳 😱 😨 🤗 🤔 😶 😑 😬 🙄 😯 😴 😷 🤑 😈 🤡 💩 👻 💀 👀 👣'.split(
|
||||
/\s/
|
||||
),
|
||||
},
|
||||
{
|
||||
// tab 的标题
|
||||
|
|
@ -192,9 +193,10 @@ export default {
|
|||
// type -> 'emoji' / 'image'
|
||||
type: 'emoji',
|
||||
// content -> 数组
|
||||
content: '👐 🙌 👏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤞 ✌️ 🤘 👌 👈 👉 👆 👇 ☝️ ✋ 🤚 🖐 🖖 👋 🤙 💪 🖕 ✍️ 🙏'.split(
|
||||
/\s/
|
||||
),
|
||||
content:
|
||||
'👐 🙌 👏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤞 ✌️ 🤘 👌 👈 👉 👆 👇 ☝️ ✋ 🤚 🖐 🖖 👋 🤙 💪 🖕 ✍️ 🙏'.split(
|
||||
/\s/
|
||||
),
|
||||
},
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,8 @@ SimpleHtmlParser.prototype = {
|
|||
|
||||
// regexps
|
||||
|
||||
startTagRe: /^<([^>\s\/]+)((\s+[^=>\s]+(\s*=\s*((\"[^"]*\")|(\'[^']*\')|[^>\s]+))?)*)\s*\/?\s*>/m,
|
||||
startTagRe:
|
||||
/^<([^>\s\/]+)((\s+[^=>\s]+(\s*=\s*((\"[^"]*\")|(\'[^']*\')|[^>\s]+))?)*)\s*\/?\s*>/m,
|
||||
endTagRe: /^<\/([^>\s]+)[^>]*>/m,
|
||||
attrRe: /([^=\s]+)(\s*=\s*((\"([^"]*)\")|(\'([^']*)\')|[^>\s]+))?/gm,
|
||||
|
||||
|
|
|
|||
|
|
@ -41,9 +41,10 @@ export default function bindEventJumpCodeBlock(editor: Editor) {
|
|||
if ($preElem.length && $preElem?.getNodeName() === 'PRE' && $nextElem.length === 0) {
|
||||
// 光标处于选区开头
|
||||
if (selection.getCursorPos() === 0) {
|
||||
// 按下delete键阻止默认行为
|
||||
// 按下delete键时末尾追加空行
|
||||
if (e.keyCode === 8) {
|
||||
e.preventDefault()
|
||||
const $emptyP = $(EMPTY_P)
|
||||
$textElem.append($emptyP)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,9 +17,8 @@ export default function (editor: Editor, text: string, languageType: string): Pa
|
|||
const btnOkId = getRandom('btn-ok')
|
||||
|
||||
/**
|
||||
* 插入链接
|
||||
* 插入代码块
|
||||
* @param text 文字
|
||||
* @param code 链接
|
||||
*/
|
||||
function insertCode(text: string): void {
|
||||
// 选区处于链接中，则选中整个菜单，再执行 insertHTML
|
||||
|
|
@ -39,8 +38,10 @@ export default function (editor: Editor, text: string, languageType: string): Pa
|
|||
const $codeElem = $code?.getNodeTop(editor)
|
||||
|
||||
// 通过dom操作添加换行标签
|
||||
// @ts-ignore
|
||||
$(EMPTY_P).insertAfter($codeElem)
|
||||
if ($codeElem?.getNextSibling().elems.length === 0) {
|
||||
// @ts-ignore
|
||||
$(EMPTY_P).insertAfter($codeElem)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -69,8 +69,8 @@ class LineHeight extends DropListMenu implements MenuActive {
|
|||
//获取range 开头结束的dom
|
||||
const StartElem: DomElement = $(editor.selection.getSelectionStartElem())
|
||||
const EndElem: DomElement = $(editor.selection.getSelectionEndElem())
|
||||
const childList: NodeListOf<ChildNode> | undefined = editor.selection.getRange()
|
||||
?.commonAncestorContainer.childNodes
|
||||
const childList: NodeListOf<ChildNode> | undefined =
|
||||
editor.selection.getRange()?.commonAncestorContainer.childNodes
|
||||
arrayDom_a.push(this.getDom(StartElem.elems[0]))
|
||||
childList?.forEach((item, index) => {
|
||||
if (item === this.getDom(StartElem.elems[0])) {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
*/
|
||||
|
||||
import Editor from '../../editor/index'
|
||||
import { EMPTY_P } from '../../utils/const'
|
||||
import $, { DomElement } from '../../utils/dom-core'
|
||||
|
||||
/**
|
||||
|
|
@ -14,7 +15,7 @@ import $, { DomElement } from '../../utils/dom-core'
|
|||
*/
|
||||
function enterToCreateP(editor: Editor, enterUpEvents: Function[], enterDownEvents: Function[]) {
|
||||
function insertEmptyP($selectionElem: DomElement) {
|
||||
const $p = $('<p><br></p>')
|
||||
const $p = $(EMPTY_P)
|
||||
$p.insertBefore($selectionElem)
|
||||
if ($selectionElem.html().indexOf('<img') >= 0) {
|
||||
// 有图片的回车键弹起时
|
||||
|
|
@ -36,7 +37,17 @@ function enterToCreateP(editor: Editor, enterUpEvents: Function[], enterDownEven
|
|||
if ($parentElem.html() === '<code><br></code>') {
|
||||
// 回车之前光标所在一个 <p><code>.....</code></p> ，忽然回车生成一个空的 <p><code><br></code></p>
|
||||
// 而且继续回车跳不出去，因此只能特殊处理
|
||||
insertEmptyP($selectionElem)
|
||||
insertEmptyP($parentElem)
|
||||
return
|
||||
}
|
||||
|
||||
if (
|
||||
$selectionElem.getNodeName() === 'FONT' &&
|
||||
$selectionElem.text() === '' &&
|
||||
$selectionElem.attr('face') === 'monospace'
|
||||
) {
|
||||
// 行内code回车时会产生一个<font face="monospace"><br></font>，导致样式问题
|
||||
insertEmptyP($parentElem)
|
||||
return
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
export function EMPTY_FN() {}
|
||||
|
||||
//用于校验是否为url格式字符串
|
||||
export const urlRegex = /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?/
|
||||
export const urlRegex =
|
||||
/^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?/
|
||||
|
||||
// 编辑器为了方便继续输入/换行等原因 主动生成的空标签
|
||||
export const EMPTY_P = '<p data-we-empty-p=""><br></p>'
|
||||
|
|
|
|||
|
|
@ -748,7 +748,7 @@ export class DomElement<T extends DomElementSelector = DomElementSelector> {
|
|||
}
|
||||
return this.forEach(elem => {
|
||||
const parent = referenceNode.parentNode as Node
|
||||
parent.insertBefore(elem, referenceNode)
|
||||
parent?.insertBefore(elem, referenceNode)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@ describe('editor.text event-hooks tab-to-space test', () => {
|
|||
fn()
|
||||
})
|
||||
|
||||
expect(editor.$textElem.elems[0].innerHTML.indexOf('<p><br></p>')).toBeGreaterThanOrEqual(0)
|
||||
expect(editor.$textElem.elems[0].innerHTML.indexOf(EMPTY_P)).toBeGreaterThanOrEqual(0)
|
||||
})
|
||||
|
||||
test('当编辑器选区内容 $textElm，执行enter down，插入 <p><br></p>', () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue