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