iT邦幫忙

1

寫了一個簡易 editor ,發現有些問題

<div contenteditable="true">
  </div>
var selection = document.getSelection(),
  range = selection.getRangeAt(0);
var html = '<blockquote>' + range + '</blockquote>';
    range.deleteContents();

    el.innerHTML = html;

    while ( (start = el.firstChild) ) {
    last = fuckjs.appendChild(start);
    }
    range.insertNode(fuckjs);

我利用getSelectiongetRangeAt 寫了一個很簡易的editor
可以把對象添加 「blockquote」tag,只是...

問題1
如何實現再按一下,就可以變回原本狀態?(去除 blockquote
能用什麼函數做到這點呢?

問題2
加入 blockquote 的時候他會溢出 div ,這能怎麼解?

froce iT邦高手 1 級 ‧ 2018-09-07 10:32:52 檢舉
簡單的想法是做toggle,如果是被tag包圍住,就取消,沒有就加上去。
ccutmis iT邦研究生 5 級 ‧ 2018-09-07 13:03:32 檢舉
雖然這個跟你問的無關,不過我覺得能給你一些不同的想法,
https://www.jqueryscript.net/text/Rich-Text-Editor-jQuery-RichText.html
有句話叫作站在巨人的肩上,造車不必重造輪子,你上網搜"wysiwyg editor jquery free"就能找到很多資源,簡潔或複雜的都有,選個你覺得能用的,去掉不用的功能,加進你自己寫的功能,可能會是比較實際的作法。

1 個回答

5
Homura
iT邦高手 2 級 ‧ 2018-09-07 14:22:28
最佳解答

問題1
如何實現再按一下,就可以變回原本狀態?(去除 blockquote )
能用什麼函數做到這點呢?

早上看到這題覺得很好玩
所以剛剛來實際玩一下

先把輸入的區域加入監聽
在用一個Array當做暫存器
每次輸入都會對Arraypush
然後上一步和下一步
使用一個變數來記錄你做到哪一步

程式碼

HTML

<button id="prev" type="button">
上一步
</button>
<button id="next" type="button">
下一步
</button>
<br><br>
<textarea id="text" rows="20">
</textarea>

JS

var text = $("#text");
var prev = $("#prev");
var next = $("#next");
var step = -1;
var stepArray = new Array();


// 輸入框加入監聽
text.on("input", ()=>{
 	console.log(text.val());
    // 每次輸入都push進array
    stepArray.push(text.val());
    // 每次push都步驟都+1
    step++;
})
// 上一步按鈕
prev.click(()=>{
  if(step == -1)
  	alert('沒有上一步');
  else{
	  step--;
      text.val(stepArray[step]);    	
   }
})
// 下一步按鈕
next.click(()=>{
  if(step > stepArray.length-2)
  	alert('沒有下一步');
  else
  {
  	step++;
  	text.val(stepArray[step]);  
  }
		  
})

DEMO連結

小松菜奈 iT邦研究生 4 級 ‧ 2018-09-07 14:45:34 檢舉

酷,我大概知道原理了

圓頭人 iT邦新手 2 級 ‧ 2018-09-17 10:44:37 檢舉

原來是這樣的原理,感謝大大啊~

我要發表回答

立即登入回答