第一种
mounted() {
//Enter键发送消息
var that = this
document.onkeydown = () => {
var key = window.event.keyCode
if (key == 18) {
that.downCode = 1;
}
if (key === 13) {
if (that.downCode == 1) {
console.log('key === 13hunaghang')
that.content = that.content + '<br/>'
that.downCode = 0;
console.log(that.content)
} else {
console.log('key === 7fasong')
that.sendBut()
}
}
}
},
第二种(有效)换行后这个富文本他的光标会自动到末尾,暂时还没有找到解决的方法。
<Editor :contxt="content" class="editor_css" @getChange="getChange" @keydown.enter.native="keyDown"/>
keyDown(e) {
//Enter键发送消息
if (e.altKey && e.keyCode == 13) { //用户点击了alt+enter触发
console.log('key === 13hunaghang')
this.content += '<br/>';
} else { //用户点击了enter触发
// 执行一些逻辑方法
console.log('key === 发song')
this.sendBut()//发送信息的方法
if (e != undefined) {
e.preventDefault(); // 阻止浏览器默认的敲击回车换行的方法
}
}
},
如果第二种也不行的话,那么可以安装官网上https://www.wangeditor.com/v5/plugins.html的换行插件,需要安装yarn,但是好像有点不好用,我选择的是第2和第三这两种方法结合,如果安装完官方依赖有报错的话可以在终端运行npm config set registry https://registry.npm.taobao.org这句话意思是访问国内阿里的什么什么的,可以试一下,还有可能报依赖太大的错就从网上找一下就行了
<div class="send-message" id="editor-content-view">
<Editor :contxt="inputContent" class="editor_css" @getChange="getChange"
@keydown.enter.native="keyDown" />
keyDown(e) {
//Enter键发送消息
if (e.altKey && e.keyCode == 13) { //用户点击了alt+enter触发
// 获取光标位置
// let selection = window.getSelection()
// let range = selection.getRangeAt(0)
// range.setStart(range.endContainer, range.endOffset) // 设置开始插入位置
// range.insertNode(<div>node</div>) // 插入元素,node节点
// range.setEnd(range.endContainer, range.endOffset) // 设置结束位置
// selection.selectAllChildren(input) //选择容器
// selection.collapseToEnd() // 移动光标到最后
console.log('key === 发song')
this.sendBut()//发送事件
} else { //用户点击了enter触发
console.log('key === 13hunaghang')
// 执行一些逻辑方法
// this.content += '<br/>';
// if (e != undefined) {
// e.preventDefault(); // 阻止浏览器默认的敲击回车换行的方法
// }
}
},