vue-prism-editor 自定义添加文本测试

⭐⭐ 实现步骤：⭐⭐

1、安装依赖

npm install vue-prism-editor

2、在需要使用vue-prism-editor的组件中引入

import {
    
     PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css";
import {
    
     highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";

import "prismjs/themes/prism-tomorrow.css"; 

3、html代码展示

vue的有点小多，就不放出来了，此示列是我学习的演示案例。对于一个新手来非常的友好了

 <div id="app">
    <h1>Vue Prism Editor - v1</h1>
    <button type="button" v-on:click="addText" value="添加文本测试">
      添加文本测试
    </button>
    <pre>{
    
    {
    
     code }}</pre>
    <input type="checkbox" v-model="lineNumbers" /> Linenumbers
    <prism-editor
      class="my-editor height-300"
      v-model="code"
      :highlight="highlighter"
      :line-numbers="lineNumbers"
      @editor-click="editorClick"
      @keydown="editorKey"
    ></prism-editor>

    <h1>Autosize</h1>
    <p>
      don't use
      <b>min-height</b> or <b>height</b> you could still define
      <b>max-height</b>
    </p>
    <prism-editor
      class="my-editor"
      v-model="code"
      :highlight="highlighter"
    ></prism-editor>

    <div style="margin-top: 25px; font-size: 25px">
      Documantation on
      <a target="_blank" href="https://github.com/koca/vue-prism-editor"
        >Github</a
      >
    </div>
  </div>

4、js代码展示

export default {
    
    
  components: {
    
    
    PrismEditor,
  },
  data: () => ({
    
    
    code: 'console.log("Hello World")',
    lineNumbers: true,
  }),
  methods: {
    
    
    highlighter(code) {
    
    
      return highlight(code, languages.js); //returns html
    },
    editorClick(event) {
    
    
      console.log(event);
    },
    editorKey(event) {
    
    
      var target = event.target;
      var lineNo = target.value
        .substr(0, target.selectionStart)
        .split(/\r?\n|\r/).length;
      console.log(target.selectionStart);
      console.log(lineNo);
    },
    addText() {
    
    
      var textarea = document.getElementsByClassName(
        "prism-editor__textarea"
      )[0];

      //console.log(textarea);
      var start = textarea.selectionStart;
      this.code = this.code.substr(0, start) + "测试" + this.code.substr(start);
    },
  },
};

5、Css代码展示

<style lang="less" scoped>
/* // required class */
.my-editor {
    
    
  background: #2d2d2d;
  color: #ccc;

  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 5px;
}

/* // optional */
.prism-editor__textarea:focus {
    
    
  outline: none;
}

⭐⭐ 属性事件⭐⭐

1、属性props

属性	type	默认值	描述
v-model value	string	’ ’	编辑器的当前值，即要显示的代码
highlight	string => string	-	methods中的方法，将接收要突出显示的文本的回调。您需要使用prismjs之类的库返回带有语法高亮显示的HTML字符串
lineNumbers	Boolean	false	是否显示行号
readonly	Boolean	false	是否可编辑
tabSize	Number	2	按tab键时要插入的字符数。例如，对于4空间缩进，tabSize将为4
autoStyleLineNumbers	Boolean	true	将行号文本颜色与主题匹配
insertSpaces	Boolean	true	是否使用空格进行缩进。默认值：true。如果将其设置为false，可能还需要将tabSize设置为1
ignoreTabKey	Boolean	false	编辑器是否应忽略按tab键，以便键盘用户可以通过编辑器进行tab。如果设置为false，用户可以使用Ctrl+Shift+M（Mac）/Ctrl+M手动切换此行为。默认值：false

2、事件events

事件名	描述
input	代码更改时触发
keydown	按键按下时触发
keyup	按键抬起触发
click	鼠标点击触发
focus	鼠标获取焦点触发
blur	鼠标失去焦点触发

ps：有一点，现在多行复制粘贴功能还没有完善，单行的已经完成了。([懒人导航网](https://lanrenao.com/3357.html))