|
@@ -50,11 +50,11 @@ export default {
|
|
|
created() {},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
|
- open(){
|
|
|
- console.log(1)
|
|
|
- },
|
|
|
- async handlePaste(event){
|
|
|
-
|
|
|
+
|
|
|
+ //粘贴
|
|
|
+ async handlePaste(e){
|
|
|
+ var event = e || window.event
|
|
|
+ event.preventDefault();
|
|
|
const items = (event.clipboardData || window.clipboardData).items;
|
|
|
let file = null;
|
|
|
if (!items || items.length === 0) {
|
|
@@ -62,20 +62,13 @@ export default {
|
|
|
return;
|
|
|
}
|
|
|
for (let i = 0; i < items.length; i++) {
|
|
|
- // if (items[i].type.indexOf("text") !== -1) {
|
|
|
- // var text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
|
|
|
- // //清除回车
|
|
|
- // text = text.replace(/\[\d+\]|\n|\r/ig,"")
|
|
|
- // var content = event.target.innerHTML
|
|
|
- // var str2 = content.slice(0, index.endOffset) + text + content.slice(index.endOffset);
|
|
|
- // event.target.innerHTML = str2
|
|
|
- // this.saveValue(event)
|
|
|
- // // this.$forceUpdate()
|
|
|
- // // if(this.tableHeight){
|
|
|
- // // this.setHeight()
|
|
|
- // // }
|
|
|
- // break;
|
|
|
- // }
|
|
|
+ if (items[i].type.indexOf("text") !== -1) {
|
|
|
+ var text = (event.originalEvent || event).clipboardData.getData('text/plain') ||'';
|
|
|
+ text = text.replace(/\n{1,}/g,'</br>')
|
|
|
+ var text2 = `<span>${text}</span>`
|
|
|
+ this.setCursor(event,text2,1)
|
|
|
+ break;
|
|
|
+ }
|
|
|
if (items[i].type.indexOf("image") !== -1) {
|
|
|
var e = event || window.event
|
|
|
e.preventDefault();
|
|
@@ -86,7 +79,6 @@ export default {
|
|
|
if (!file) {
|
|
|
return;
|
|
|
}
|
|
|
- var content = event.target.innerHTML
|
|
|
var str = await this.fileToBase64(file)
|
|
|
var randNum=Math.floor(Math.random()*(9999-1000))+1000;;
|
|
|
var new_img = '<img key="'+ randNum +'" src="' + str + '" style="width:80px;height: 80px;border: 1px solid #f9f6f675;vertical-align:middle">';
|
|
@@ -106,29 +98,31 @@ export default {
|
|
|
// selection.addRange(range);
|
|
|
// console.log(event.target.innerHTML)
|
|
|
var index = window.getSelection().getRangeAt(0)
|
|
|
- var indexText = this.getColumn(event.target,window.getSelection())
|
|
|
- var index2 = 0
|
|
|
- var str2 = content.slice(0, indexText) + new_img + content.slice(indexText);
|
|
|
- event.target.innerHTML = str2
|
|
|
- this.$nextTick(()=>{
|
|
|
- var selectedText = window.getSelection();
|
|
|
- var selectedRange = document.createRange();
|
|
|
- try{
|
|
|
- for(var i=0;i<event.target.childNodes.length;i++){
|
|
|
- if(event.target.childNodes[i].outerHTML == new_img){
|
|
|
- index2 = i
|
|
|
- throw new Error()
|
|
|
- }
|
|
|
- }
|
|
|
- }catch{
|
|
|
|
|
|
- }
|
|
|
- selectedRange.setStart(event.target,index2+1);
|
|
|
- selectedRange.collapse(true);
|
|
|
- selectedText.removeAllRanges();
|
|
|
- selectedText.addRange(selectedRange);
|
|
|
- event.target.parentNode.focus();
|
|
|
- })
|
|
|
+ this.setCursor(event,new_img,2)
|
|
|
+ // var indexText = this.getColumn(event.target,window.getSelection())
|
|
|
+ // var index2 = 0
|
|
|
+ // var str2 = content.slice(0, indexText) + new_img + content.slice(indexText);
|
|
|
+ // event.target.innerHTML = str2
|
|
|
+ // this.$nextTick(()=>{
|
|
|
+ // var selectedText = window.getSelection();
|
|
|
+ // var selectedRange = document.createRange();
|
|
|
+ // try{
|
|
|
+ // for(var i=0;i<event.target.childNodes.length;i++){
|
|
|
+ // if(event.target.childNodes[i].outerHTML == new_img){
|
|
|
+ // index2 = i
|
|
|
+ // throw new Error()
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }catch{
|
|
|
+
|
|
|
+ // }
|
|
|
+ // selectedRange.setStart(event.target,index2+1);
|
|
|
+ // selectedRange.collapse(true);
|
|
|
+ // selectedText.removeAllRanges();
|
|
|
+ // selectedText.addRange(selectedRange);
|
|
|
+ // event.target.parentNode.focus();
|
|
|
+ // })
|
|
|
|
|
|
// this.saveValue(event)
|
|
|
// var selection = window.getSelection()
|
|
@@ -136,6 +130,61 @@ export default {
|
|
|
// console.log(window.getSelection().getRangeAt(0))
|
|
|
|
|
|
},
|
|
|
+ //设置光标位置
|
|
|
+ setCursor(event,str,type){
|
|
|
+ var content = event.target.innerHTML
|
|
|
+ // previousSibling
|
|
|
+ var indexText = this.getColumn(event.target,window.getSelection())
|
|
|
+ var index2 = 0
|
|
|
+ var childNodes = event.target.childNodes
|
|
|
+ if(!content){
|
|
|
+ if(event.target.nodeName == 'BR'){
|
|
|
+ event.target.parentNode.innerHTML = str
|
|
|
+ var selectedRange = document.createRange();
|
|
|
+ selectedRange.setStart(event.target,index2);
|
|
|
+ return false
|
|
|
+ }else{
|
|
|
+ event.target.innerHTML = str
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ content = content.replace(/ /g,'\r')
|
|
|
+ var str2 = content.slice(0, indexText) + str + content.slice(indexText);
|
|
|
+ event.target.innerHTML = str2.replace(/\r/g,' ')
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log(event.currentTarget.childNodes)
|
|
|
+ // if(event.target.nodeName == 'BR'){
|
|
|
+ // event.target.nodeName = 'SPAN'
|
|
|
+ // event.target.innerHTML = '</br>' + str2
|
|
|
+ // }
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ var selectedText = window.getSelection();
|
|
|
+ var selectedRange = document.createRange();
|
|
|
+ try{
|
|
|
+ for(var i=0;i<childNodes.length;i++){
|
|
|
+ var html = childNodes[i].outerHTML
|
|
|
+ if(type == 1){
|
|
|
+ if(html){
|
|
|
+ html = html.replace(/\r{1,}|\n{1,}|\r\n{1,}/g,'')
|
|
|
+ str = html.replace(/\r{1,}|\n{1,}|\r\n{1,}/g,'')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(html == str){
|
|
|
+ index2 = i
|
|
|
+ throw new Error()
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }catch{
|
|
|
+
|
|
|
+ }
|
|
|
+ selectedRange.setStart(event.target,index2+1);
|
|
|
+ selectedRange.collapse(true);
|
|
|
+ selectedText.removeAllRanges();
|
|
|
+ selectedText.addRange(selectedRange);
|
|
|
+ event.target.parentNode.focus();
|
|
|
+ })
|
|
|
+ },
|
|
|
getColumn(node, selectObj) {
|
|
|
var baseNode = node;
|
|
|
var anchorNodePosition = this.getPosition(baseNode, selectObj.anchorNode, selectObj.anchorOffset);
|
|
@@ -172,6 +221,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ return retIdx
|
|
|
},
|
|
|
// 将file文件上传转化为base64进行显示
|
|
|
fileToBase64(file) {
|
|
@@ -198,9 +248,9 @@ export default {
|
|
|
.edit-box{
|
|
|
overflow-x: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
- padding: 0 15px;
|
|
|
- min-height:40px;
|
|
|
- line-height: 40px;
|
|
|
+ padding: 10px 15px;
|
|
|
+ // min-height:27px;
|
|
|
+ line-height: 1.5;
|
|
|
outline: #dcdfe6;
|
|
|
border:1px solid #DCDFE6;
|
|
|
border-radius:5px;
|