vue prism editor下載 - vue prism editor源代碼下載

vue prism editor

其他資源

[email protected]

下載

Vue Prism編輯

帶有語法突出顯示和行號的死去的簡單代碼編輯器。 3KB/z

棱鏡編輯

編輯器既適用於VUE 2.X和VUE 3.X，您目前都在支持Vue 2.x的分支機構上。在這裡獲取VUE 3.x兼容版本

演示

prism-editor.netlify.com

例子

vue示例codesandbox：https：//codesandbox.io/s/61yrlnlnmn
NUXT示例codesandbox：https：//codesandbox.io/s/nuxt-vue-prism-editor-62e06
vite示例codesandbox：https：//codesandbox.io/s/vite-vue-prism-editor-editor-q9j8p
codepen：https：//codepen.io/koca/pen/qvgqyr

特徵

代碼編輯
模塊化語法突出顯示了第三方庫（不限於Prismjs）
縮進線或通過按下可自定義的凹痕鍵的選項卡鍵或選定的文本
自動縮進新線條
將選定的文本包裝在帕倫斯，括號或報價中
撤消 /重做整個單詞，而不是字母
可訪問，使用Ctrl+Shift+M（Mac） / Ctrl+M進行切換捕獲選項卡鍵
在手機上的作品（感謝Textarea）
自動調整大小
線號
匹配行號樣式與主題（可選）

用例

幾個基於瀏覽器的代碼編輯器，例如ACE，CODEMIRROR，摩納哥等。可以在網頁中嵌入完整的代碼編輯器。但是，如果您只需要一個帶有語法突出顯示而沒有任何額外功能的簡單編輯器，那麼它們通常不會有過度殺傷，因為它們通常沒有小的捆綁尺寸足跡。該庫旨在為一個簡單的代碼編輯器提供語法突出顯示支持，而無需任何額外功能，非常適合用戶可以提交代碼的簡單嵌入和表單。

安裝

npm install vue-prism-editor

或者

yarn add vue-prism-editor

用法

您需要將編輯器與提供語法突出顯示的第三方庫一起使用。例如，它看起來像是prismjs的關注：

在本地註冊組件並使用它（建議）

 < template >
  < prism-editor class =" my-editor " v-model =" code " :highlight =" highlighter " line-numbers > </ prism-editor >
</ template >

< script >
  // import Prism Editor
  import { PrismEditor } from 'vue-prism-editor' ;
  import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles somewhere

  // import highlighting library (you can use any library you want just return html string)
  import { highlight , languages } from 'prismjs/components/prism-core' ;
  import 'prismjs/components/prism-clike' ;
  import 'prismjs/components/prism-javascript' ;
  import 'prismjs/themes/prism-tomorrow.css' ; // import syntax highlighting styles

  export default {
    components : {
      PrismEditor ,
    } ,
    data : ( ) => ( { code : 'console.log("Hello World")' } ) ,
    methods : {
      highlighter ( code ) {
        return highlight ( code , languages . js ) ; // languages.<insert language> to return html with markup
      } ,
    } ,
  } ;
</ script >

< style >
  /* required class */
  .my-editor {
    /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
    background: #2d2d2d;
    color: #ccc;

    /* you must provide font-family font-size line-height. Example: */
    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 5px;
  }

  /* optional class for removing the outline */
  .prism-editor__textarea:focus {
    outline: none;
  }
</ style >

請注意，根據您的語法熒光筆，您可能必須包括其他CSS以進行語法突出顯示才能工作。

或在全球註冊組件

 import { PrismEditor } from 'vue-prism-editor' ;
import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles
Vue . component ( 'PrismEditor' , PrismEditor ) ;

瀏覽器使用（用於Codepen等）：

 < script src =" https://unpkg.com/[email protected].* " > </ script >

<!-- Prism Editor -->
< script src =" https://unpkg.com/vue-prism-editor " > </ script >
< link rel =" stylesheet " href =" https://unpkg.com/vue-prism-editor/dist/prismeditor.min.css " />

<!-- custom highlighter: -->
< script src =" https://unpkg.com/prismjs/prism.js " > </ script >
< link rel =" stylesheet " href =" https://unpkg.com/prismjs/themes/prism-tomorrow.css " />

< style >
  .height-200{
    height: 200px  
  }
  
  .my-editor {
    /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
    background: #2d2d2d;
    color: #ccc;

    /* you must provide font-family font-size line-height. Example:*/
    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 5px;
  }

  /* optional class for removing the outline */
  .prism-editor__textarea:focus {
    outline: none;
  }
</ style >

< div id =" app " >
  < prism-editor class =" my-editor height-200 " v-model =" code " :highlight =" highlighter " line-numbers > </ prism-editor >
</ div >

< script >
  new Vue ( {
    el : "#app" ,
    data : ( ) => ( {
      code : "console.log('hello world')"
    } ) ,
    methods : {
      highlighter ( code ) {
        // js highlight example
        return Prism . highlight ( code , Prism . languages . js , "js" ) ;
      }
    } ,
  } )
</ script >

道具

姓名	類型	預設	選項	描述
V模型`value`	`string`	`""`	-	編輯器的當前值，即要顯示的代碼
強調	`string => string`	-	-	回調將接收文本以突出顯示。您需要使用諸如prismjs之類的庫來返回帶有語法突出顯示的HTML字符串。
可讀	`Boolean`	`false`	-	可讀
亞麻家	`Boolean`	`false`	-	是否顯示行號。默認`false`
自動素烯象	`Boolean`	`true`	-	匹配行號文本顏色與主題。默認為`true`
tabsize	`number`	`2`	-	按下選項卡鍵時要插入的字符數。例如，對於4個空間縮進， `tabSize`將為`4` ， `insertSpaces`將是`true` 。默認值： `2`
插入空間	`boolean`	`true`	-	是否使用空間進行凹痕。默認值： `true` 。如果將其設置為`false` ，則可能還需要將`tabSize`設置為`1`
無知	`boolean`	`false`	-	編輯器是否應忽略選項卡鍵按下，以便鍵盤用戶可以標記編輯器。用戶可以使用`Ctrl+Shift+M` （Mac） / `Ctrl+M`手動切換此行為`false`默認值： `false`

事件

姓名	參數	描述
輸入	`(code)`	更改代碼時會發射。
鑰匙	`(event)`	當編輯器中發生鍵盤事件時，發出此事件
鑰匙	`(event)`	當編輯器中發生關鍵事件時，會發出此事件
點擊	`(event)`	單擊編輯器中的任何位置時會發出此事件
重點	`(event)`	當聚焦時會發出此活動
模糊	`(event)`	當模糊時發出此活動

它如何工作

該部分取自React-Simple-Code-editor

它通過將語法突出顯示<pre>塊上的<textarea>覆蓋。當您鍵入，選擇，複製文本等時，您會與基礎<textarea>進行交互，因此體驗感覺是本地的。與重新實現行為的其他編輯相比，這是一種非常簡單的方法。

只要返回HTML並且由用戶完全控制，任何第三方庫就可以由任何第三方庫進行。

Vanilla <textarea>不支持插入選項卡字符以進行凹痕，因此我們通過聆聽keydown事件並編程更新文本來重新實現它。通過編程方式更新文本的一個警告是，我們將失去撤消堆棧，因此我們需要維護自己的撤消堆棧。結果，我們還可以實施改進的撤消行為，例如撤消與VSCODE這樣的編輯類似的整個單詞。

限制

由於其工作方式，它有一定的局限性：

語法突出顯示的代碼不能具有不同的字體家族，字體重量，字體樣式，線高等。由於編輯器可以通過對A <textarea>進行對齊的突出顯示代碼的作用，因此更改影響佈局的任何內容都可能將其錯過。
自定義撤消堆棧與撤消/重做項目瀏覽器的上下文菜單不兼容。但是，其他精選編輯者也不支持瀏覽器的撤消/重做菜單項。
編輯器沒有針對性能進行優化，大量文檔可能會影響打字速度。
我們使用-webkit-text-fill-color: transparent文本中隱藏文本，它在所有現代瀏覽器中都起作用（甚至是非webkit的瀏覽器，例如Firefox和Edge）。在IE 10+上，我們使用color: transparent 。在不支持的瀏覽器中，文本可能看起來更大膽。