Skip to content

从其他地方粘贴时保留颜色 #2799

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
88250 opened this issue Aug 31, 2021 · 16 comments
Closed

从其他地方粘贴时保留颜色 #2799

88250 opened this issue Aug 31, 2021 · 16 comments

Comments

@88250
Copy link
Member

88250 commented Aug 31, 2021

https://ld246.com/article/1630365945652

@leiyuy
Copy link

leiyuy commented Aug 31, 2021

支持。
标准的markdown确实不支持复杂的颜色记录,希望思源能有优化。

场景:
我有一批特殊的文章,来自公众号、网页、word,特殊的地方就是:字体的粗细、颜色、包括背景色都有一定的含义。转到markdown下时,所有的颜色变成了粗体强调,损失了颜色所代表的信息。之前公司写文章就运用的大量的色彩法。

所以保留粘贴来源的文章样式的需求也需要关注,不仅仅是颜色。

onenote是无损保存网页和word样式的(以html存储),虽然OneNote也是以内容块存储的,但和思源markdown有一定的技术区别。
另外JOPlin也能无损保存网页字体样式(以html存储),但切换到markdown也会丢失颜色

@88250
Copy link
Member Author

88250 commented Jan 19, 2022

暂时不考虑了,这个以后如果需求的人多了再考虑。

@88250 88250 closed this as completed Jan 19, 2022
@HowcanoeWang
Copy link

需求:支持从word中复制,粘贴到思源里附带颜色

以及思源导出到word时,也带上颜色

@88250
Copy link
Member Author

88250 commented Nov 18, 2024

搞不了哦,因为是按 Markdown 解析的

@Achuan-2
Copy link
Member

Achuan-2 commented Mar 14, 2025

发现思源解析html,就算html格式很标准,有span style=color:red ,粘贴之后,也是完全不保留颜色,把lute的解析html方法都试了一遍,确实都不解析

目前想到一个间接方法,先把html带颜色的文字替换为链接,链接的href内容为style内容,用lute解析为思源能直接粘贴的dom后,再替换为span style,最后替换剪贴板

不过这里遇到一个问题,思源解析html是用的什么方法,我用lute.html2blockdom,发现不支持解析word的上下标,但是直接粘贴到思源就可以解析成功

@88250
Copy link
Member Author

88250 commented Mar 14, 2025

外部替换的话建议直接替换为思源的 DOM 行级元素结构,就是类似 <span data-type="xxx"> 这样的结构,粘贴的话应该就能直接识别了。

@Achuan-2
Copy link
Member

Achuan-2 commented Mar 14, 2025

外部替换的话建议直接替换为思源的 DOM 行级元素结构,就是类似 <span data-type="xxx"> 这样的结构,粘贴的话应该就能直接识别了。

恩,我已经实现好了,是通过替换siyuanHTML实现的,因为我发现只有纯文本和siyuan HTML,有<span data-type="xxx">,才能保留颜色,外部html就算有这个结构也不能保留

另外用lute.html2blockdom也不能把html的span color保留,所有才想到先转为链接,再转为span的曲线救国方法

所以才需要插件自己把html解析为siyuan dom,进行处理

@Achuan-2
Copy link
Member

另外lute能否处理行内样式嵌套呢

html = `<strong><u><span data-type="text" style=" color:#61afef;">SetSpellcheck</span></u><strong>`

// Convert to BlockDOM using Lute
let lute = window.Lute.New();
lute.SetSpellcheck(window.siyuan.config.editor.spellcheck);
lute.SetProtyleMarkNetImg(window.siyuan.config.editor.displayNetImgMark);
lute.SetHTMLTag2TextMark(true);
lute.SetTextMark(true);
lute.SetHeadingID(false);
lute.SetYamlFrontMatter(false);
lute.SetInlineMathAllowDigitAfterOpenMarker(true);
lute.SetToC(false);
lute.SetIndentCodeBlock(false);
lute.SetParagraphBeginningSpace(true);
lute.SetSetext(false);
lute.SetFootnotes(false);
lute.SetLinkRef(false);
lute.SetImgPathAllowSpace(true);
lute.SetKramdownIAL(false);
lute.SetTag(true);
lute.SetSuperBlock(true);
lute.SetMark(true);
lute.SetSub(true);
lute.SetSup(true);
lute.SetProtyleWYSIWYG(true);
lute.SetKramdownSpanIAL(true);
lute.SetInlineUnderscore(true);
lute.SetGFMStrikethrough(true);
lute.SetGFMStrikethrough1(true);
result = lute.HTML2BlockDOM(html);

输出是

<span data-type="strong"><span data-type="u">SetSpellcheck</span></span>

但是这样u被嵌套,就无法渲染
得下面这样才能完整保留样式

<span data-type="strong u">SetSpellcheck</span>

@88250
Copy link
Member Author

88250 commented Mar 14, 2025

支持不了嵌套的,设计上就是仅支持平铺。

@Achuan-2
Copy link
Member

支持不了嵌套的,设计上就是仅支持平铺。

好的,那我就自己写代码拆分吧

@TCOTC
Copy link
Contributor

TCOTC commented Mar 14, 2025

支持不了嵌套的,设计上就是仅支持平铺。

怎么我看上面的意思是 lute 的输出是嵌套的

@Achuan-2
Copy link
Member

Achuan-2 commented Mar 14, 2025

发现斜体解析有点问题,

html = `<p class="MsoNormal"><span lang="EN-US">123<b>4<i><a href="color:red;">5</a></i>6</b>78<o:p></o:p></span></p>`;

// Convert to BlockDOM using Lute
let lute = window.Lute.New();
lute.SetSpellcheck(window.siyuan.config.editor.spellcheck);
lute.SetProtyleMarkNetImg(false);
lute.SetHTMLTag2TextMark(true); // HTMLTag2TextMark 设置是否打开 HTML 某些标签解析为 TextMark 节点支持。
lute.SetTextMark(true);// TextMark 设置是否打开通用行级节点解析支持。
lute.SetHeadingID(false);
lute.SetYamlFrontMatter(false);
lute.SetInlineMathAllowDigitAfterOpenMarker(true);
lute.SetToC(false); // 设置是否打开“目录”支持。
lute.SetIndentCodeBlock(false);
lute.SetParagraphBeginningSpace(true);
lute.SetSetext(false);
lute.SetFootnotes(false);
lute.SetLinkRef(false);
lute.SetImgPathAllowSpace(true);
lute.SetKramdownIAL(false);
lute.SetTag(true);
lute.SetSuperBlock(true);
lute.SetMark(true);
lute.SetSub(true);
lute.SetSup(true);
lute.SetProtyleWYSIWYG(false);
lute.SetKramdownSpanIAL(true); // KramdownSpanIAL 设置是否打开 kramdown 行级内联属性列表支持。
lute.SetInlineUnderscore(true);
lute.SetGFMStrikethrough(true);
lute.SetGFMStrikethrough1(true);
lute.SetSpin(true);
result = lute.HTML2BlockDOM(html);

lute.SetProtyleWYSIWYG(false);
会解析得到,变成了星号,而不是markdown标记符

123<span data-type="strong">4*<span data-type="a" data-href="color:red;">5</span>*6</span>78

lute.SetProtyleWYSIWYG(true);
可以解析成功,但是这个开启之后,有些行内元素嵌套a链接,a链接会丢失,导致我没法改为span color
不知道有没有其他参数修改

@88250
Copy link
Member Author

88250 commented Mar 14, 2025

我的想法是直接在外部转换 SiYuan DOM 吧,不要使用 siyuan/lute 工具链转换,不然问题比较多。

@Achuan-2
Copy link
Member

Achuan-2 commented Mar 14, 2025

我的想法是直接在外部转换 SiYuan DOM 吧,不要使用 siyuan/lute 工具链转换,不然问题比较多。

目前主要就是lute.SetProtyleWYSIWYG(true);元素嵌套链接会丢失链接,这个问题解决了,我再优化下样式嵌套问题,就应该就差不多能用了,
lute.SetProtyleWYSIWYG(true);
Image
lute.SetProtyleWYSIWYG(false);

Image

@88250
Copy link
Member Author

88250 commented Mar 14, 2025

老铁,改 Lute 不太现实,你懂的……

@Achuan-2
Copy link
Member

老铁,改 Lute 不太现实,你懂的……

嗯嗯了解,我再想想方法

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants