求助大佬 想实现一个弹窗,然后里面可以正常编写md文件,这个应该咋搞,问的gpt 一直没实现 类似于thino这种效果

弹窗是指什么?
Hover editor那种可以吗?
如果要实现类似thino这种效果,chatgpt肯定是做不到的。

@aoout 一般来讲,这是想要实现闪念笔记和随手记。同类型的需求还有希望点击弹窗外部分不会自动关闭弹窗导致丢失内容等,常出现在手机移动端。

目前 Ob 的弹窗 Modal,是普通的文本区域 textarea or input,虽然可以写文本,但不会渲染 Markdown 样式。

理想的方法是像 Ob 官方实现实时预览的表格一样,在输入框所在元素 element 注册和 Ob 实时阅览一样的编辑器。难点在于如何克隆官方编辑器。

其次的方法是学习 Hover Editor 的 togglePin() 做一个居中弹窗,出现时是锁定状态,鼠标移出不会消失。这样弹窗可以直接用 Ob 的编辑器,比如打开时即移到想要添加的 Markdown 文件底部,也能实现近似功能。

不知你有没有相关经验或者别的想法。

1 个赞

@PlayerMiller 我是觉得这种实现太了,所以很好奇楼主的想法,是想要做什么,毕竟他之前还在求助chatgpt。

我今天发现Kanban实现了调用obsidian内置编辑器的功能,正在研究它的实现。

各种渲染都支持,甚至支持vim模式和插入表格

好家伙 牛的 确实这个也有点难弄 我换了个路子

是的 大佬 确实是实现闪念笔记 看到过这个插件 没看它的实现 感觉它这个和我的不太一样 我还以为官方的编辑器 可以在插件里面新建一个 原来不行 我又换了一个路子 让他给我打开文件啥的 然后输入一些基本信息 来搞

@the_tree 非常感谢提供线索,草草看了一下,好像是自定义视图:

this.registerView(kanbanViewType, leaf=> new kanbanView(leaf))
// kanbanViewType: String = 'kanban'

其中 class kanbanView 继承了 obsidian.TextFileView,这种在用 leaf.setViewState({ type: kanbanViewType }) 调用时应该是需要有 state: { file: filePath } 的,相当于只重写了用 Ob 编辑器打开文件的视图。

顺带一提,如果自定义视图无需依赖文件的应该继承 obsidian.ItemView。我最近尝试的一个就不需要打开文件,卡了半天我还在想为什么测试 this.contentEl.addClass('Hi') console.log(this.contentEl) 有变化但控制台显示的 Dom 没有任何变化…

PS. 两个都还没写出成品

1 个赞

我上面提到的是KanvanView内部,编辑格子的时候,那个是obsidian内置的编辑器,像这样:

具体实现应该是在Kanban代码中的 MarkdownEditor 这个组件里

1 个赞

MarkdownEditor 这个组件

谢谢,顺着找到了 getMarkdownController() 和 main.ts 里的 getEditorClass()。我同时参考了 Ob 核心插件白板的节点,它也是无需依赖文档的编辑器。

image

const createEditor = (app)=> {
  const md = app.embedRegistry.embedByExtension.md({app, containerEl: createDiv()})
  md.load(); md.editable = !0; md.showEditor()
  const mEditor = Object.getPrototypeOf(Object.getPrototypeOf(md.editMode)).constructor
  md.unload()
  return e = new mEditor(app, createDiv(), {
    app, scroll: 0, editMode: null,
    get editor() { return e.editor },
    showSearch() {},
    toggleMode() {},
    onMarkdownScroll() {},
    getMode: ()=> 'source',
    // get file() { return view.file },
    // get path() { return view.file.path },
  })
}
const test = (app, ob)=> new class extends ob.Modal {
  constructor(app) { super(app); this.open() }
  onOpen() {
    const e = createEditor(app); e.set('**test**'); e.load()
    e.containerEl.setCssProps({
      width: '200px', height: '100px',
      background: 'var(--background-secondary)',
    })
    this.containerEl.append(e.containerEl)
    this.modalEl.style.display = 'none'
  }
}(app, ob)
const ob = require('obsidian')
module.exports = class extends ob.Plugin {
  onload() {
    this.addCommand({
      id: 'new-editor-modal', name: 'New editor modal',
      callback: async ()=> test(this.app, ob),
    })
  }
  onunload() {}
}
3 个赞

:ox: :beer: 啊,膜拜大佬 :+1:

貌似projects插件的自定义字段中的富文本也支持,记得它好像不支持实时预览,貌似是用的MarkdownRenderer.render实现的,之前好奇浏览了一眼,没仔细看。

#11 的代码好像有需要清理的部分,但是我不知道怎么写。另外官方也不允许用这种方法,所以不再推荐了,大家注意一下。