实现一个python代码编辑器-Toy模板网

这篇具有很好参考价值的文章主要介绍了实现一个python代码编辑器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

代码编辑器采用了monacoEditor，一个现成的编辑器。网上有很多文档介绍和开源项目，但是怎么说呢，跟着做，可以实现一个网页编辑器，可以高亮python的语法，但是没有python的提示，找不到可以参考的，js我也不会，看的着实云里雾里。
【提示】在VsCode上运行比较方便

--------------------开源项目-------------------------

我参考了这个

vue-monaco-editor-demo: vue 使用 monaco-editor 实现在线代码在线编辑器 (gitee.com)

----------------------------------------------------------

目前我对实现一个python代码编辑器的理解是这样的：先搞一个前端的代码编辑器html，然后在你的工程里显示html。但是编辑器里的代码怎么运行，我还没有头绪。

目前的进度就是前端可以生成一个网页，可以写python代码，有高亮，但是没有python提示。

-------------------更新 python 提示 ----------------------

参考

如何实现一个在线代码编辑器_哔哩哔哩_bilibili

Vue3中使用Monaco Editor代码编辑器记录——主动触发代码补全功能（python和sql为例）～持续更新_monaco.languages.registercompletionitemprovider-CSDN博客 ------------------------------------------------------------------

ok，参考上面的两个，python提示出来了（就是下面的这块代码，加入初始化运行的函数里）。这个B站的视频，我觉得挺好的，听完感觉是逻辑清晰了（对我这种不会写网页的小白来说）

          monaco.languages.registerCompletionItemProvider('python', {
				provideCompletionItems: function () {
					let suggestions = [];
					// 这个keywords就是python.js文件中有的
					pythonLanguage.keywords.forEach(item => {
						suggestions.push({
							label: item,
							kind: monaco.languages.CompletionItemKind.Keyword,
							insertText: item
						});
					})
					return {
						// 最后要返回一个数组
						suggestions:suggestions
					};
			  },
		  });

下一步的计划是显示网页，尝试了几个不同的方法。这几个方法怎么说呢，都可以显示html，但是上一步的编译出来的html其实还要带文件夹一起，感觉文件大小有点大，对于一个项目来说，不是一个很好的选择。

qt的QWebEngineView类

qt有一个类，QWebEngineView可以用来显示html，具体用法就是用load函数，传入html的路径。

【注意】这里的html是上一步的文件build后生成在dist文件里的html，要把整个dist文件夹拷过来放在qt的运行目录里。

    MonacoEditor w;
    QWebEngineView view(&w);
    QString path = QApplication::applicationDirPath() + "/dist/index.html";
    view.load(QUrl(path));
    w.setCentralWidget(&view);
    w.show();

python的flask

flask是python的一个Web 框架。下面的代码是网上教程看的。用flask可以装一个pycharm。

from flask import  Flask,render_template
app=Flask(__name__)         #实例化并命名为app实例
#启动这个WEB服务
@app.route('/')
def index():
    msg = "hello world"
    #在文件目录下创建Templates文件夹，里面新建index.html
    return render_template("index.html",data = msg)  # 加入变量传递  
    
if __name__=="__main__":
    app.run(port=2020,host="127.0.0.1",debug=True)