代碼編輯器采用了monacoEditor，一個(gè)現(xiàn)成的編輯器。網(wǎng)上有很多文檔介紹和開源項(xiàng)目，但是怎么說(shuō)呢，跟著做，可以實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)編輯器，可以高亮python的語(yǔ)法，但是沒(méi)有python的提示，找不到可以參考的，js我也不會(huì)，看的著實(shí)云里霧里。
【提示】在VsCode上運(yùn)行比較方便

--------------------開源項(xiàng)目-------------------------

我參考了這個(gè)

vue-monaco-editor-demo: vue 使用 monaco-editor 實(shí)現(xiàn)在線代碼在線編輯器 (gitee.com)

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

目前我對(duì)實(shí)現(xiàn)一個(gè)python代碼編輯器的理解是這樣的：先搞一個(gè)前端的代碼編輯器html，然后在你的工程里顯示html。但是編輯器里的代碼怎么運(yùn)行，我還沒(méi)有頭緒。

目前的進(jìn)度就是前端可以生成一個(gè)網(wǎng)頁(yè)，可以寫python代碼，有高亮，但是沒(méi)有python提示。

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

參考

如何實(shí)現(xiàn)一個(gè)在線代碼編輯器_嗶哩嗶哩_bilibili

Vue3中使用Monaco Editor代碼編輯器記錄——主動(dòng)觸發(fā)代碼補(bǔ)全功能（python和sql為例）～持續(xù)更新_monaco.languages.registercompletionitemprovider-CSDN博客?------------------------------------------------------------------

ok，參考上面的兩個(gè)，python提示出來(lái)了（就是下面的這塊代碼，加入初始化運(yùn)行的函數(shù)里）。這個(gè)B站的視頻，我覺(jué)得挺好的，聽完感覺(jué)是邏輯清晰了（對(duì)我這種不會(huì)寫網(wǎng)頁(yè)的小白來(lái)說(shuō)）

          monaco.languages.registerCompletionItemProvider('python', {
				provideCompletionItems: function () {
					let suggestions = [];
					// 這個(gè)keywords就是python.js文件中有的
					pythonLanguage.keywords.forEach(item => {
						suggestions.push({
							label: item,
							kind: monaco.languages.CompletionItemKind.Keyword,
							insertText: item
						});
					})
					return {
						// 最后要返回一個(gè)數(shù)組
						suggestions:suggestions
					};
			  },
		  });

下一步的計(jì)劃是顯示網(wǎng)頁(yè)，嘗試了幾個(gè)不同的方法。這幾個(gè)方法怎么說(shuō)呢，都可以顯示html，但是上一步的編譯出來(lái)的html其實(shí)還要帶文件夾一起，感覺(jué)文件大小有點(diǎn)大，對(duì)于一個(gè)項(xiàng)目來(lái)說(shuō)，不是一個(gè)很好的選擇。

qt的QWebEngineView類

? ? ? ? qt有一個(gè)類，QWebEngineView可以用來(lái)顯示html，具體用法就是用load函數(shù)，傳入html的路徑。

【注意】這里的html是上一步的文件build后生成在dist文件里的html，要把整個(gè)dist文件夾拷過(guò)來(lái)放在qt的運(yùn)行目錄里。

    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的一個(gè)Web 框架。下面的代碼是網(wǎng)上教程看的。用flask可以裝一個(gè)pycharm。

from flask import  Flask,render_template
app=Flask(__name__)         #實(shí)例化并命名為app實(shí)例
#啟動(dòng)這個(gè)WEB服務(wù)
@app.route('/')
def index():
    msg = "hello world"
    #在文件目錄下創(chuàng)建Templates文件夾，里面新建index.html
    return render_template("index.html",data = msg)  # 加入變量傳遞  
    
if __name__=="__main__":
    app.run(port=2020,host="127.0.0.1",debug=True)

go的net/http

? ? ? ? 這個(gè)還沒(méi)開始，等會(huì)去試。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-834249.html

到了這里，關(guān)于實(shí)現(xiàn)一個(gè)python代碼編輯器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！