安卓pos機瀏覽器,editor瀏覽器中的網頁代碼編輯器在項目中集成

網上有很多關于安卓pos機瀏覽器,editor瀏覽器中的網頁代碼編輯器在項目中集成的知識，也有很多人為大家解答關于安卓pos機瀏覽器的問題，今天pos機之家(www.tonybus.com)為大家整理了關于這方面的知識，讓我們一起來看下吧!

本文目錄一覽：

1、安卓pos機瀏覽器

2、紅米手機如何設置新支付手機pos機？

安卓pos機瀏覽器

瀏覽器中的編輯器

我們已經習慣了使用編輯器來編寫代碼，作為一名程序員無論選擇什么編輯器來開發，都是為了提高我們的工作效率，以及擼代碼爽的程度。

作為一名前端開發人員，有時候難免會遇到需要在瀏覽器中書寫代碼的場景。無論是用戶需要還是我們自己為了開發便利，這都將是有益的。

在網頁中編輯很容易，但是能不能讓我們像在本地編輯器中那樣編寫代碼，提供豐富的功能呢？目前有很多個開源項目針對此問題實現了各自的一套解決方案。在此就以monaco-editor集成到vue項目中為例，為大家解決此類問題，以及期望能夠幫助大家快速入手實踐。

如上圖所示：這是在網頁中編輯代碼的效果，沒錯，這不是在vscode中，就是瀏覽器中的頁面上。不但提供了代碼高亮、代碼提示、代碼補全、搜索、替換等功能，還有右鍵格式化等其他功能，以及命令面板的功能等?？梢哉f是能力豐富、功能強大。下面就逐步說明從開始到應用的集成步驟。

我一共用到了五個npm包：

npm install monaco-editor -Snpm install monaco-editor-nls -Snpm install monaco-editor-webpack-plugin -Dnpm install monaco-editor-esm-webpack-plugin -Dnpm install js-beautify -S

下面來對這五個包做一下簡要的說明：

monaco-editor：是網頁編輯器的核心包，整體非常大，因為支持了很多的語言與很多的擴展功能。

monaco-editor-webpack-plugin：因為monaco-editor直接單獨引入的情況下所支持的基本使用不能滿足我們的需求，我們還需要支持智能提示等功能，所以需要額外單獨做一些配置操作，雖然官網文檔說明已經很清晰，但是配置起來還是不免比較繁瑣，因此提供了這個webpack插件來幫助我們自動處理這些事情，簡化我們的操作。

monaco-editor-nls：是對整個編輯器的漢化處理，如果需要進行漢化，那么需要安裝此包。

monaco-editor-esm-webpack-plugin：針對漢化包所做的webpack插件，需要和漢化包配合使用。

js-beautify：是用來做代碼美化的，主要是做一些格式化的工作。

安裝完成之后，就可以配置到我們的項目中進行應用啦。

vue.config.js：首先要在這個文件中引入插件，并設置相應的配置項。

vue.config.js配置

首先將插件引入進來。

const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin')

然后設置對應的屬性。

module: { rules: [ { test: /\\.js/, enforce: 'pre', include: /node_modules[\\\\\\/]monaco-editor[\\\\\\/]esm/, use: MonacoWebpackPlugin.loader } ]},plugins: [ new MonacoWebpackPlugin({ languages: ['javascript', 'typescript', 'html', 'css', 'json'] })]

其中languages指定要支持的語言，因為完整版支持的語言非常多，如果使用默認的配置，那么包會非常的大，因此只選擇我們需要的語言。其中javascript和typescript必須同時出現。根據官網的說法是：由于是使用web worker的方式進行實現的，每個web worker負責的工作內容不同，某些語言可能會共用同一個webwork，但是有一些語言需要額外引入其他語言的支持來負責實例化該語言的共享工作進程。如下：

需要額外的語言支持的部分語言

即：要引入language語言，必須引入instantiator。

另外還有一個跟languages同級的features屬性來精確的配置要使用的特性。這里默認使用全部。

項目vue文件：在自己的項目vue文件中，引入monaco-editro及其他相關項。

const beautify = require('js-beautify')import { setLocaleData } from 'monaco-editor-nls'import zh_CN from 'monaco-editor-nls/locale/zh-hans'setLocaleData(zh_CN)// import * as monaco from 'monaco-editor'const monaco = require('monaco-editor')const beautify_js = beautify.jsconst beautify_css = beautify.cssconst beautify_html = beautify.html

其中：

const beautify = require('js-beautify')

引入美化代碼工具，可分別對js、css、html代碼進行格式化。

import { setLocaleData } from 'monaco-editor-nls'

import zh_CN from 'monaco-editor-nls/locale/zh-hans'

setLocaleData(zh_CN)

完成monaco-editor的漢化操作。

const monaco = require('monaco-editor')

引入編輯器核心包，注意：如果引入了漢化包，那么必須要用require的形式引入該項，否則可以使用import的形式。而且必須要在漢化完成之后再引入，不然漢化將不生效。

<template> <div class="monaco-editor" id="monaco-editor"> </div></template>

在template中設定編輯器元素，作為根元素來渲染整個編輯器，注意該元素不能有子元素存在。

editorBox = monaco.editor.create(document.getElementById("monaco-editor"), { value: "let a = 1;const b = 2", language: "javascript", theme: "vs-dark", tabSize: 2})

實例化編輯器，此時可以在頁面中進行使用。第一個參數為要掛載的元素，第二個參數為配置選項。

value：編輯器的內容。

language：編輯器的當前實例所支持的語言。

theme：編輯器的主題樣式，支持vs、vs-dark、hc-black三種。

tabSize：表示縮進的距離。

更多配置項可以查閱官網進行設置。

到此為止我們就可以在網頁中編輯代碼啦！

右鍵：

editorBox.addAction({ id: 'formateCodeForce', label: '強制格式化', keybindings: [monaco.KeyMod.CtrlCmd|monaco.KeyMod.Alt|monaco.KeyCode.KeyF], contextMenuGroupId: '2_customCommand', run(ed, opt) { let a = editorBox.getValue() let b = beautify_js(a) // editorBox.setValue(b) editorBox.executeEdits("", [ { range: new monaco.Range(1, 1, editorBox.getModel().getLineCount() + 1, 1), text: b } ]) }})

可以在右鍵面板中增加自定義功能：

id：該選項的唯一標識。

label：選項顯示的名稱。

keybindings：綁定的快捷鍵，多個快捷鍵用豎線分割。每個按鍵要使用monaco的內置枚舉類型來設定。

contextMenuGroupId：選項所屬組的id，內置了三個組id（navigation：該組是右鍵的第一欄，1_modification：修改組，9_cutcopypaste：剪切復制粘貼組）。

run：選擇該選項之后的回調函數，第一個參數為editorBox實例，第二個參數為一個剩余參數的數組，注意如果通過快捷鍵觸發那么第二個參數不存在。因為我實現了一個格式化代碼的功能，所以我在run函數中主要進行了三步操作：

1.使用getValue獲取編輯器內容，這里有一個注意的點，如果實例化的編輯器是用vue中的data里面定義的數據接收的，由于vue的響應式更新，會造成死循環而無法獲取導致頁面卡死，可以用三個方法解決，根據不同的情況選擇不同的方式，第一如果是用this.editorBox接收的，那么editorBox不要寫在data里面，這樣就不會做數據追蹤，第二可以使用非vue實例化的屬性。第三可以用toRaw來獲取原始數據，也可以解決。

2.使用beautify_js對代碼進行格式化。

3.將格式化后的代碼重新回寫到編輯器中，這里有兩種方式setValue和executeEdits。區別是setValue不能撤銷回上一步，而executeEdits可以。其中range表示選擇的范圍，我這里從第一行第一列一直到最后一行的下一行的第一列，相當于是全部文檔，然后用text的值，也就是格式化后的代碼來進行替換。

右鍵面板

自定義補全：

monaco.languages.registerCompletionItemProvider('javascript', { provideCompletionItems(model, pos) { return { suggestions: [ { label: "row-col", insertText: beautify_js(`[{"cols":[{"span":6},{"span":6}]}]`), kind: monaco.languages.CompletionItemKind["Snippet"], detail: "插入行列", }, { label: "for-full", insertText: beautify_js(`for (let i = 0; i < len; i++) {}`), kind: monaco.languages.CompletionItemKind["Snippet"], detail: "完整for循環", } ], dispose() { const line = pos.lineNumber const column = pos.column if(model.getValueInRange(new monaco.Range(line, column - 1, line, column)) !== "/") { return } editorBox.executeEdits("", [ { range: new monaco.Range(line, column - 1, line, column), text: null } ]) } } }, triggerCharacters: ['/']})

triggerCharacters表示觸發補全操作的快捷鍵，編輯器會提示出suggestions中設置的內容。注意回車之后輸入的快捷鍵仍然是存在的。

suggestions中的label表示提示的名稱，insertText表示回車之后輸入的內容，kind用來設定提示片段的類型，即最前面的圖標標識，detail是提示的說明，位于提示行的末尾。

效果如下圖所示：

補全提示

由于使用triggerCharacters設定的快捷鍵輸入，回車之后該快捷鍵依然存在，對于此場景來說相當于多余的字符，所以我做了一下處理，在回車之后將"/"刪除掉，dispose回調函數就是用來做這個事情的。由于其他正常提示的情況下是不需要刪除符號的，因此做了一下判斷。

(提示：自定義的補全提示功能，除了使用triggerCharacters定義的快捷鍵會觸發定義的一組提示，輸入label中的首個字符，也會觸發相應提示，這種情況不會產生多余的字符)

差異對比：

let curModel = monaco.editor.createModel("let a = 1\let c = 3\let n = 2", "text/plain")let oldModel = monaco.editor.createModel("let a = 1\let n = 2", "text/plain")let diffEditor = monaco.editor.createDiffEditor(document.getElementById("monaco-editor"), { theme: "vs-dark"})diffEditor.setModel({ original: oldModel, modified: curModel})

通過創建兩個不同的model來對比代碼的變化

代碼差異對比

由于版本的不同可能會導致無法使用的問題。

對于較低版本vue-cli創建的項目，默認使用webpack4，那么對于最新的monaco-editor，則會出現問題，最大的支持版本為0.30.1，其他包的版本也需要相應調整。

對于高版本vue-cli創建的項目，默認使用webpack5，或者使用vite創建的項目是可以支持最新的monaco-editor版本的。

對于版本的支持，做如下標示：

較低版本monaco-editor@0.30.1monaco-editor-webpack-plugin@6.0.0monaco-editor-nls@2.0.0

較高版本monaco-editor@0.32.0 //或更新monaco-editor-webpack-plugin //已經與monaco-editor統一管理，最新版本即可monaco-editor-nls@3.0.0 //或更新總的來說

monaco-editor支持的功能非常豐富，幾乎包含了vscode所有的基礎功能，大家可以在此基礎上自由發揮，實現更多有用的功能。希望能為各位開發者們略盡我的綿薄之力，更好的幫助大家完成工作需要。

紅米手機如何設置新支付手機pos機？

操作流程

　　1.手機卡

　?。?）用戶的手機卡必須開通上網功能(提示:因上網流量費自付,建議辦理包月上網套餐。定制最基礎的上網套餐就夠用。友情提示：別用手機的流量看視頻、下載大的軟件，費用較高)。

　　手機須開啟上網數據連接。步驟：菜單鍵→設置→SIM卡管理→數據連接→選擇中國移動？或中國聯通？或中國電信?點擊選擇?；螯c擊自動選擇。

　?。?）或者使用WIFI連接，手機無線網絡步驟：菜單鍵→設置→無線和網絡→WLAN勾選→WLAN設置→WLAN網絡?如附近有無線網絡,WLAN網絡下方就有可用的無線網絡,單擊連接輸入密碼,連接成功后手機屏幕上方就出現扇形的圖標,白色代表信號強弱。此連接一般在有無線路由的家中、單位、休閑場所、酒店等有無線網絡服務的地方。

　　2.新版本升級在操作功能的時候，如有提示新版本升級，請升級。步驟：提示發現新版本→點確定→彈出兩個瀏覽器選擇第一個瀏覽器進入→自動下載新版本→下載完成單擊下載文件→彈出替換應用程序→點確定→點安裝→點打開。

　　3.刷卡方式：刷卡方法用卡磁條面對著刷卡器厚的一面從一側均勻刷過。如刷卡不成功請改變刷卡速度和平穩度。

以上就是關于安卓pos機瀏覽器,editor瀏覽器中的網頁代碼編輯器在項目中集成的知識，后面我們會繼續為大家整理關于安卓pos機瀏覽器的知識，希望能夠幫助到大家！