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

jquery js editor text editor

火爆浪子 2018-09-07 10:29:55 ‧ 2841 瀏覽

分享至

<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);

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

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

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

froce iT邦大師 1 級 ‧ 2018-09-07 10:32:52 檢舉

簡單的想法是做toggle，如果是被tag包圍住，就取消，沒有就加上去。

ccutmis iT邦高手 2 級 ‧ 2018-09-07 13:03:32 檢舉

雖然這個跟你問的無關，不過我覺得能給你一些不同的想法，
https://www.jqueryscript.net/text/Rich-Text-Editor-jQuery-RichText.html
有句話叫作站在巨人的肩上，造車不必重造輪子，你上網搜"wysiwyg editor jquery free"就能找到很多資源，簡潔或複雜的都有，選個你覺得能用的，去掉不用的功能，加進你自己寫的功能，可能會是比較實際的作法。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Homura

iT邦高手 1 級 ‧ 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>

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連結