使用vue-AT之后发现,在选择人员后不会带空格。但是官网上的demo,确是可以正常显示的,然后去官网寻找答案
原文链接: https://github.com/fritx/vue-at/issues/74.
在编辑器div中写入这个css,就好了
比如:
<at>
<div class='editor' contenteditable></div>
</at>
以上是你的at与编辑器,你只需要写下面的代码就可以解决没有空格问题;
.editor {
white-space: pre-wrap; // 保留空白符
}
小知识:
- white-space这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。在IE8以上和火狐、Chrome中有效。pre-wrap表示:保留空白符序列,但是正常地进行换行。
如果想要手动插入,使用js获取光标位置插入空格
// 选择完成员之后插入空格
insertWhitespace() {
// setTimeout(()=>{
// let sel, range;
// let html = ' ';
// if (window.getSelection) {
// sel = window.getSelection();
// if (sel.getRangeAt && sel.rangeCount) {
// range = sel.getRangeAt(0);