wang-message-editor

install

wang-message-editor

use

main.js

import Vue from 'vue'
import wangMessageEditor from "wang-message-editor";
Vue.use(wangMessageEditor)

<template>
  <div id="app">
    <wangMessageEditor @input="input" :limitInputLength="0" 
      ref="editRef"
	/>
  </div>
</template>

<script>
import wangMessageEditor from "./components/index";
export default {
  name: "App",
  data() {
    return {};
  },
  components: {
    wangMessageEditor,
  },
  methods: {
    input(e) {
      console.log(e);
    },
      清空输入框内容fn
    clear(){
        this.$refs.editRef.clear()
    }
  },
};
</script>

methods

参数	说明	参数	备注
input	输入框改变事件	当设置 limitInputLength 大于0时，输出参数为{content: 'we', isOverflow: false}； 当设置 limitInputLength 为0时，输出参数为 当前输入的内容字符串，而非对象
clear	清空editor
focus	editor获取焦点
setContent	设置输入框内容	参数为字符串	多次调用，会覆盖上次的内容
setTextContentAdd	追加内容(文本)	string
setHyperTextContentAdd	追加内容(超文本)	html 字符串格式的 html，例如 <a href="www.xx.com"> a</a>

props

limitInputLength 输入框字数限制，

参数	参数类型	功能
limitInputLength	Number	输入框字数限制

效果展示