实现一个python代码编辑器

Yanjun2i

已于 2024-02-27 17:07:05 修改

阅读量607

点赞数 2

文章标签：编辑器 python qt go

于 2024-02-21 13:54:40 首次发布

本文链接：https://blog.csdn.net/Yanjun2i/article/details/136209804

版权

qt的QWebEngineView类

python的flask

bug1：跨域支持

bug2：XMLHttpRequest 没有把数据send过去

bug3：执行exec函数 name 'xx' is not defined

结果展示(qt显示html)

go的net/http

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

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

我参考了这个

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

下面python提示的第二个参考也可以（我试过了，这个内容比较丰富，但是编译出来的dist在qt上显示不出网页，所以用了上面这个）

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

目前我对实现一个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=8088,host="127.0.0.1",debug=True)

更新：html作为前端，绑定端口8080，flask作为后端，绑定端口为8088。现在开始思考怎么让后端获取到前端输入的python代码。

bug1：跨域支持

在尝试过程中，html使用XMLHttpRequest，用GET发送内容，但是对应的status是0，responseText是空。进入html按F12进入终端发现下面报错。就是跨域失败，网上有的说前端加header["Access-Control-Allow-Origin","*"];，但对我这个来说没有用，这里使用flask的跨域支持可以参考下面这个博客，使用flask_cors模块，问题成功解决。[736]Flask - 解决Access-Control-Allow-Origin跨域请求问题_flask make_response no 'access-control-allow-origi-CSDN博客

在终端输入 pip install -U flask-cors，安装cors，然后再py文件中加入即可。

from flask import  Flask,render_template,request
from flask_cors import CORS
app=Flask(__name__)         #实例化并命名为app实例

# 跨域支持
CORS(app)

再html点击运行按钮，发现status状态已经是200，表示请求成功。

bug2：XMLHttpRequest 没有把数据send过去

刚解决完bug1，bug2就来了，一坑接一坑。

后端收到的数据一直是None，百度上说法也挺多。有人说是前端的参数类型和后端的参数类型不匹配，有人说在前端加XMLHttpRequest.setRequestHeader("Content-type","application/json");，有人说是访问一个不存在的网页或者输入了一个错误的网址，也有可能是服务器的配置。

我这个是点击后端生成的网页发现不存在。后面发现时因为我的后端def index（）函数没有return，加个return返回值就行了。

bug3：执行exec函数 name 'xx' is not defined

这里返回的是标准输出。单单的print函数是没问题的，但是稍微复杂一点就会出现问题，会提示name 'xx' is not defined。

在网上找一个简单的python代码测试

# 定义两个列表
list1 = [1, 2, 3, 4, 5]
list2 = [4, 5, 6, 7, 8]

# 使用列表推导式找出两个列表中不同的元素
difference = [item for item in list1 if item not in list2]
print(difference)

后端收到的内容是这样的