在单个页面上使用多个 CodeMirror 编辑器？
我正在编写一个页面，其中包含演示 js 库使用方法的示例。我希望这些示例是可编辑和可运行的，因此我认为我有以下选项：
使用 美化 要在教程页面上显示代码，有一个按钮可以打开一个带有编辑器的新窗口，您可以在其中运行代码（当前实现的解决方案）。或者，我可以使编辑器成为某种模式对话框。
对页面上的每个示例使用多个 CodeMirror 编辑器（单个页面上最多可以有 30 个）。我不确定这些编辑器有多“重”，所以我不确定这是否是一个好主意。
有一个编辑按钮，可以在需要编辑时使用 CodeMirror 编辑器“交换”漂亮的代码，以便用户可以编辑和运行示例，而无需费心使用新窗口。我不确定是否可以使 prettify 和 CodeMIrror 的语法突出显示看起来相同。
关于我应该如何执行此操作以及为什么这样做有什么想法吗？我也愿意接受有关不同代码编辑器或语法荧光笔的建议，所以如果有人有此类事情的经验，请告诉我你是如何做到的。
I'm writing a page with examples that demonstrate the use of my js library. I'd like these examples to be editable and runnable, so I thought I have these options :
Use prettify to display code on the tutorial page, have a button that opens a new window with the editor where you can run the code (currently implemented solution). Alternatively, I can make the editor a modal dialog of some sort.
Use multiple CodeMirror editors for each example on the page (could be up to 30 on a single page). I'm not sure how "heavy" those editors are, so I'm not sure if that's a good idea.
Have an edit button that "swaps" prettyfied code with a CodeMirror editor when editing is needed, so that the user can edit and run the examples without bothering with new windows. I'm not sure if I can make prettify and CodeMIrror's syntax highlighting to look the same.
Any ideas on how I should do this and why? I'm also open to suggestions about different code editors or syntax highlighters too, so if anybody has experience with this kind of thing, please tell me how you did it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以使用 Marijn Haverbeke（CodeMirror 的创建者）在他的 javascript 书籍的在线版本中使用的相同技术。它显示代码片段，并提供一个编辑按钮，用于在屏幕底部打开 JavaScript 控制台。
查看本章示例。
You could use the same technique that Marijn Haverbeke (the creator of CodeMirror) uses for the online version of his javascript book. It shows code snippets, and provides an edit-button that opens a javascript console at the bottom of the screen.
Look at this chapter for an example.