LOADING

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

学习分享2年前 (2022)更新 懒人收藏夹
772 0 0
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:有一点,现在多行复制粘贴功能还没有完善,单行的已经完成了。

© 版权声明

相关文章