【建议】Previewer窗口浮动

[foxfire881]

当前是按照常规md编辑器一样，把编辑区、预览区左右并排展示的，导致屏幕被一分为二，左右两边都很狭窄，编辑、预览的体验都不讨好；隐藏预览区的话，编辑区面积大了，但是又看不到效果了。

建议增加一种浮动窗口模式，让用户可以自己拖放调整编辑区、预览区的大小和位置，并且两者还是同步展示的。例如用户可以把编辑器改成上下排列的窗口模式（宽度增加，不用换行拐弯了），或者双屏显示器用户可以把编辑区、预览区分别放在两个显示器上，这样体验效果就强多了，两个窗口可以通过localstorage、cookie或者websocket通信保持同步一致。

[sunsonliu]

收到，那就是最好在收起预览时出现一个可拖拽预览浮窗，我们后面规划下哈

[foxfire881]

收到，那就是最好在收起预览时出现一个可拖拽预览浮窗，我们后面规划下哈

对的，就是这样。不过如果浮动窗口还是在原有浏览器窗口里面的话，体验提高了，但还不够极致，对于双屏用户的优势还是发挥不出来，因为一个浏览器窗口不能同时横跨出现在两个屏幕上。如果要分别在两个显示器上显示，只能是两个浏览器窗口，这就涉及到窗口之间数据通信和同步问题，处理起来可能会麻烦点。

[sunsonliu]

嗯嗯。。两个窗口的话确实比较麻烦，我们先考虑实现悬浮的，后面有机会再搞大的

[foxfire881]

嗯嗯。。两个窗口的话确实比较麻烦，我们先考虑实现悬浮的，后面有机会再搞大的

问了chatgpt，看上去实现起来挺简单几行代码就搞定，可以试试，把浮动窗口用window.open搞成 js 弹窗窗口。

[Saraph1nes]

跨窗口预览的功能由使用者自己实现更好，这样可以自定义预览页面。 @foxfire881

我提供了一个demo，大概实现逻辑如下：

1、实现一个开启New Tab的入口

2、监听event -> afterChange事件，获取到输入的内容，将文本通过跨页面通信的方式发出

3、在新页面中监听文本消息，通过cherryIns.editor.setValue(data)设置内容（setValue是新增的api，需要等新版本发布后可用）
可以通过体验链接体验

4、demo源码：https://github.com/Saraph1nes/cherrymd-new-tab-demo

2024-09-11.mp4

[mikhnyuk]

Is it possible to display a photo instead of a link in the edit window?

[foxfire881]

跨窗口预览的功能由使用者自己实现更好，这样可以自定义预览页面。 @foxfire881

我提供了一个demo，大概实现逻辑如下：

1、实现一个开启New Tab的入口

2、监听event -> afterChange事件，获取到输入的内容，将文本通过跨页面通信的方式发出

3、在新页面中监听文本消息，通过cherryIns.editor.setValue(data)设置内容（setValue是新增的api，需要等新版本发布后可用） 可以通过体验链接体验

这下就好用多了！也体现出Cherry的差异化优势，其他那些md编辑器都是雷同的一个样没啥新意也不怎么好用

[urlyy]

@Saraph1nes @sunsonliu 我在使用 README 里的 full-model 例子时，如果按下图的顺序点击两个"关闭预览"按钮，会出现浮动预览框未关闭且内容透明的情况。

[Saraph1nes]

@Saraph1nes @sunsonliu 我在使用 README 里的 full-model 例子时，如果按下图的顺序点击两个"关闭预览"按钮，会出现浮动预览框未关闭且内容透明的情况。

感谢告知～会尽快修复~

[github-actions]

谢谢您的大力支持,请安装和此相关的测试版进行极速体验:

npm install @cherry-markdown-publisher/[email protected]

查看npm发布版本，请注意这是一个开发预览版本,请谨慎使用!

[Saraph1nes]

Is it possible to display a photo instead of a link in the edit window?

Yes, we are currently developing this feature, which will support direct text editing in the preview window. @mikhnyuk