Skip to content
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

代码块期望在修改时不要显示下面的代码块预览区域,新增vditor配置 #1746

Open
ueiheng opened this issue Jan 8, 2025 · 4 comments

Comments

@ueiheng
Copy link

ueiheng commented Jan 8, 2025

你在什么场景下需要该功能?

编辑代码时,不希望显示两个相同代码块,很容易让用户产生错觉

描述最优的解决方案

提供编辑器配置,在编辑代码时,允许只显示编辑块,不显示预览块

描述候选解决方案

提供隐藏预览代码块的方法

Clipboard_Screenshot_1736326751
@ueiheng ueiheng changed the title 代码块如何在修改时不要显示下面的代码块预览区域 代码块期望在修改时不要显示下面的代码块预览区域,新增vditor配置 Jan 8, 2025
@ueiheng
Copy link
Author

ueiheng commented Jan 8, 2025

以前的pr里面看到一条解决方法
.vditor-wysiwyg__block[data-type="code-block"] .vditor-wysiwyg__pre[style="display: block;"]+.vditor-wysiwyg__preview{ display:none; } .vditor-ir__node--expand[data-type="code-block"] .vditor-ir__preview { display: none; }

@ueiheng
Copy link
Author

ueiheng commented Jan 8, 2025

但是用css去隐藏preview,会导致打开结束编辑时,代码块直接消失,因为不再编辑态时,是使用preview进行展示的。

@ueiheng
Copy link
Author

ueiheng commented Jan 8, 2025

我试图通过隐藏pre元素,只展示preview元素,然后通过contenteditable让preview预览区可以直接编辑,但是发现源码中会在我点击preview元素时,reset光标,导致我无法通过原生api来对文本进行修改
Clipboard_Screenshot_1736329506

@geelato
Copy link

geelato commented Jan 13, 2025

同样的问题

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

2 participants