我正在考慮使用Slate或ProseMirror構建一個編輯器，并在使用內聯元素時在插入符號位置和選擇區域周圍看到 Chrome 的一些奇怪行為。問題 1 如下圖所示。當文本光標位置位于“f”后面時，插入符號顯示在圖像頂部。問題 2 在第二張圖片中 - 選擇文本會顯示一個與內聯元素一樣高的突出顯示區域。有什么方法可以控制這種行為，而是讓插入符號顯示在文本位置，并僅突出顯示文本周圍的空間（即使內聯圖像使行高更大）我想模仿 Firefox 的行為：示例圖像是使用此處的 ProseMirror 演示生成的：https ://prosemirror.net/examples/basic/使用JSBin的最小示例（感謝@Kaiido）：<div contenteditable>Test text<img src="https://upload.wikimedia.org/wikipedia/en/9/9b/Yoda_Empire_Strikes_Back.png">Testing</div>不確定這在其他操作系統上的表現如何，但我使用的是 macOS Catalina。
3 回答
qq_笑_17
TA貢獻1818條經驗 獲得超7個贊
您可以使用 Flexbox 解決選擇問題。我最初嘗試使用，align-items: flex-end但我得到了一些奇怪的箭頭鍵行為。align-items: baseline目前看來有效。
圖像問題很奇怪。我注意到 Chrome 對 SVG 元素的處理方式與 IMG 元素不同。截至目前，最新版本的 Chrome 在跳過 IMG 之前會“等待”，但允許用戶像任何其他字符一樣跳過 SVG（左箭頭跳過最接近 svg 的字符）。這可能是由底層默認樣式引起的，但我不知道。
我正要發布我的發現，但我意識到 Firefox 的工作方式不一樣。當使用 SVG 和/或 Flexbox 時，Firefox 有一些非常奇怪的箭頭鍵行為。光標會移至圖像上方，但僅當按向右箭頭鍵時才會出現。
然而，Firefox 可以很好地處理普通的 IMG 元素。
長話短說，您將必須根據瀏覽器渲染不同的圖像元素。
// chrome contenteditable ads spaces between spans.
// firefox does not, so you have to add them manually.
if (navigator.userAgent.indexOf("Firefox") > 0) {
Array.from(document.querySelectorAll('#editable span')).forEach(el => {
el.innerHTML += " "
})
}
.flexit {
display: flex;
align-items: baseline;
flex-wrap: wrap;
}
span {
display: inline-block;
white-space: pre;
}
.img-wrapper, .img-wrapper + span {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>chrome</h1>
<div contenteditable="true" class="flexit">
<span>test</span><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
</svg><span>Here</span><span>is</span><span>a</span><span>longer</span><span>sentence.</span><span>Notice</span><span>I</span><span>wrapped</span><span>each</span><span>word</span><span>in</span><span>a</span><span>span.</span><span>This</span><span>makes</span><span>the</span><span>text</span><span>appear</span><span>like</span><span>it</span><span>is</span><span>inline.</span>
</div>
<h1>firefox</h1>
<div contenteditable="true" id="editable">
<span>test</span><span class="img-wrapper"><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200" /></span><span>test</span><span>Here</span><span>is</span><span>a</span><span>longer</span><span>sentence.</span><span>Notice</span><span>I</span><span>wrapped</span><span>each</span><span>word</span><span>in</span><span>a</span><span>span.</span><span>This</span><span>makes</span><span>the</span><span>text</span><span>appear</span><span>like</span><span>it</span><span>is</span><span>inline.</span>
</div>
</body>
</html>
PS 很多編輯器我都使用默認的全角圖像。
編輯：我剛剛意識到我的 Firefox 解決方案似乎也適用于最新的 Chrome。我認為這是可行的，因為我將文本節點包裝在 SPAN 元素中。SVG 元素在 Chrome 中的工作方式仍然不同，但在 SPAN 中換行文本似乎解決了大部分問題。
慕工程0101907
TA貢獻1887條經驗 獲得超5個贊
首先，不要像 JQuery 示例中所示操作 ProseMirror DOM。事實上，您很可能會遇到 DOM 或內容問題。ProseMirror 使用自己的 DOM 節點和標記架構。如果您想操作 ProseMirror DOM 或添加插件，請查看標記、插件和節點 API。我附上了一個簡單的文本對齊標記代碼示例。旁注，Grammarly 和其他人沒有 ProseMirror 插件的原因是 DOM 方法/模型。我應該補充一點，ProseMirror 非常好，但說實話，它更像是一個高級開發人員解決方案。
除此之外，好消息是你有一個純粹的 CSS 問題。ProseMirror 會刪除所有類并重置 DOM / CSS，因此如果您導入文檔或剪切并粘貼所有/大多數類，您的類將會消失。
解決這個問題的最簡單方法是將編輯器包裝在 div 中，并為該 div 分配一個類，然后向該類添加樣式和子樣式。包裝它的原因是像 img、p、h 等 css 選擇器僅適用于編輯器類內部的標簽。如果沒有它，你最終會出現明顯的 CSS 沖突。
CSS
不要將 Flexbox 用于內聯圖像，因為 Flexbox 不是網格系統。事實上，如果我記得你不能內聯彈性容器的直接子級。
p 標簽和 img 上的內聯不會自動換行，您最終會遇到上面列出的問題。
如果您想真正包裝并刪除光標問題，那么您需要使用浮點數，例如
float: left;（推薦方法）添加小或大的填充和邊框以幫助折疊邊緣，還有助于分離圖像和文本
您遇到的光標問題是因為當您在圖像塊內時，它垂直與頂部對齊，您可以使用
vertical-align: baseline;但不使用浮動來修復該問題，您仍然會有一個與圖像高度而不是文本高度匹配的光標。另外，如果不使用浮動，光標將被拉長，因為行高實際上與圖像的高度相同。藍色只是選擇器，您也可以使用 CSS 進行更改。
<html>
<div class="editor">
<!-- <editor></editor>-->
</div>
</html>
<style>
.editor {
position: relative;
display: block;
padding: 10px;
}
.editor p {
font-weight: 400;
font-size: 1rem;
font-family: Roboto, Arial, serif;
color: #777777;
display: inline;
vertical-align: baseline;
}
.editor img {
width: 50px;
float: left;
padding: 20px;
}
</style>
節點擴展示例
可添加為工具欄的文本對齊節點擴展示例。更長的帖子，但即使你確實為圖像創建了一個節點/插件，你也必須處理它渲染的方式，即 base64 與 url 等。順便說一句，這對于他們這樣做的原因非常有意義，但只需添加尋求 SEO 等的開發人員的復雜性
export default class Paragraph extends Node {
get name() {
return 'paragraph';
}
get defaultOptions() {
return {
textAlign: ['left', 'center', 'right'],
}
}
inputRules({ type }) {
return [
markInputRule(/(?:\*\*|__)([^*_]+)(?:\*\*|__)$/, type),
]
}
get schema() {
return {
attrs: {
textAlign: {
default: 'left'
}
},
content: 'inline*',
group: 'block',
draggable: false,
inclusive: false,
defining : true,
parseDOM: [
{
tag: 'p',
style: 'text-align',
getAttrs: value => value
}
],
toDOM: (node) => [ 'p', {
style: 'text-align:' + node.attrs.textAlign,
class: `type--base type--std text-` + node.attrs.textAlign
}, 0 ]
};
}
commands ({ type }) {
return (attrs) => updateMark(type, attrs)
}
}
慕哥9229398
TA貢獻1877條經驗 獲得超6個贊
我嘗試用 HTML 和 css 進行一些修改。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div contenteditable><p class="new1" contenteditable>Hello</p><div contenteditable>
<img src="https://upload.wikimedia.org/wikipedia/en/9/9b/Yoda_Empire_Strikes_Back.png"></div>
<p class="new2">Testing</p>
</div>
</body>
</html>
//CSS
.new2{
font-size:30px;
margin-top:-35px;
margin-left:252px;
padding-left:79px;
}
img{
margin-left:75px;
padding-left:5px;
padding-right:5px;
margin-top:-300px;
}
.new1{
text-overflow:hidden;
padding-top:260px;
margin-bottom:-20px;
font-size:30px;
padding-right:10px;
}
這是jsfiddle https://jsfiddle.net/wtekxavm/1/
- 3 回答
- 0 關注
- 237 瀏覽
添加回答
舉報
0/150
提交
取消