我们的目标:
我们需要StackEdit编辑器在文本框所在的位置完全呈现(TinyMCE和其他编辑器的方式),而不是在模式/全屏/在HTML页面上覆盖整个UI的情况下呈现。
我们正在尝试在应用程序中实现https://stackedit.io/降价编辑器。为此,我们在后面的本地网址(例如https://github.com/benweet/stackedit)上设置了https://localhost:4433的本地实例。
这将充当本地端点http://localhost:8080/app,以https://stackedit.io/app的方式为stackit编辑器提供服务。我们设置了一个本地实例,以便对于编辑器,不应单击StackEdit域本身的远程端点。
为了在HTML页面上使用该端点并使用stackedit编辑器,我们使用https://benweet.github.io/stackedit.js/并编写了以下代码来呈现编辑器:
var el = document.querySelector('textarea');
var stackedit = new Stackedit({
url: 'https://localhost:4433/app'
});
// Open the iframe
stackedit.openFile({
name: 'Filename', // with an optional filename
content: {
text: el.value // and the Markdown content.
}
});
// Listen to StackEdit events and apply the changes to the textarea.
stackedit.on('fileChange', (file) => {
el.value = file.content.text;
});
我们已从https://benweet.github.io/stackedit.js/
中获取了该代码上述实现的问题在于,编辑器呈现为模式,并隐藏了html页面上的所有UI。呈现方式如下:
那不是我们所需要的。在我们的应用程序中,单个页面上将有多个编辑器,并且该编辑器为全屏或模式显示将不起作用。我们对编辑器的期望是使StackEditor像流行的TinyMCE edito一样呈现,即应在与文本框完全相同的位置呈现。
TinyMCE编辑器:
这是StackExchange编辑器的来源:
所以回到我原来的问题,甚至可以使用StackEdit在文本框而不是模式或全屏的地方实现编辑器吗?
编辑:
我转到了具有类似请求的以下链接,但那里也没有成功:
https://github.com/benweet/stackedit.js/issues/10