從 contenteditable 填充和保存文本

Question

我即將開始編寫我自己的富文本編輯器，但需要知道是否可以填充文本區域以及如何保存/使用其中的數據。

我目前正在使用 CKEditor，但它對於我想要的來說太笨重和太大了。
我將以此為基礎： http : //jsfiddle.net/Kxmaf/6/
我還需要對數據進行某些檢查以檢查其長度。

如果需要，代碼：

 // Stack Code Snippets does not work with Iframe. Here's the code anyways: $(document).ready(function() { document.getElementById('textEditor').contentWindow.document.designMode = "on"; document.getElementById('textEditor').contentWindow.document.close(); $("#bold").click(function() { if ($(this).hasClass("selected")) { $(this).removeClass("selected"); } else { $(this).addClass("selected"); } boldIt(); }); $("#italic").click(function() { if ($(this).hasClass("selected")) { $(this).removeClass("selected"); } else { $(this).addClass("selected"); } ItalicIt(); }); $("#fonts").change(function() { changeFont($("#fonts").val()); }); }); function boldIt() { var edit = document.getElementById("textEditor").contentWindow; edit.focus(); edit.document.execCommand("bold", false, ""); edit.focus(); } function ItalicIt() { var edit = document.getElementById("textEditor").contentWindow; edit.focus(); edit.document.execCommand("italic", false, ""); edit.focus(); } function changeFont(font) { var edit = document.getElementById("textEditor").contentWindow; edit.focus(); edit.document.execCommand("FontName", false, font); edit.focus(); }

 <a id="bold" class="font-bold">B</a> <a id="italic" class="italic">I</a> <select id="fonts"> <option value="Arial">Arial</option> <option value="Comic Sans MS">Comic Sans MS</option> <option value="Courier New">Courier New</option> <option value="Monotype Corsiva">Monotype</option> <option value="Tahoma">Tahoma</option> <option value="Times">Times</option> </select> <br/> <iframe id="textEditor" style="width:500px; height:170px;"></iframe> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

謝謝。

Answer 1

要創建您的右側文本編輯器，您可以在<div>元素上或通過 JS designMode使用contenteditable屬性。 您不需要<iframe> 。

注意：雖然execCommand可以在所有主要瀏覽器上運行，但它的怪癖和差異現在已被棄用（但沒有任何合理的解決方法，但可以創建自己的內聯內容編輯軟件或使用Input-Events ），因此請謹慎使用。

為了讓你從某個地方開始，

 $(function() { var $editor = $('#textEditor'); var $btn = $('span[data-cmd]'); // EXECUTE COMMAND function execCmd(cmd, arg) { document.execCommand(cmd, false, arg); } $btn.mousedown(function(e) { e.preventDefault(); $(this).toggleClass("selected"); execCmd(this.dataset.cmd); }); $("#fonts").change(function() { execCmd("FontName", this.value); }); });

 * {margin: 0; padding: 0;} #textEditorTab span { cursor: pointer; display: inline-block; padding: 0px 10px 0px 10px; } #textEditorTab span:hover { background: #eee; } #textEditorTab span.selected { background-color: orange; } #textEditor { width: 300px; height: 120px; border: 1px solid #ddd; padding: 5px; }

 <div id="textEditorTab"> <span data-cmd="bold"><b>B</b></span> <span data-cmd="italic"><i>I</i></span> <select id="fonts"> <option value="Arial">Arial</option> <option value="Comic Sans MS">Comic Sans MS</option> <option value="Courier New">Courier New</option> <option value="Monotype Corsiva">Monotype</option> <option value="Tahoma">Tahoma</option> <option value="Times">Times</option> </select> </div> <div id="textEditor" contenteditable>Lorem ipsum dolor sit amet</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

現在，我已經看到你想要，點擊按鈕讓它狀態ACTIVE ，但如果你三思而后行，你會因為一個原因而變得一團糟：

用戶輸入文本 -> 選擇一部分並點擊BOLD ，現在它用光標跳轉到沒有 BOLD 文本的行的開頭......但是等等，你的按鈕仍然處於活動狀態......

為防止此類 UX，您需要跟蹤用戶選擇的子元素，並相應地打開選項選項卡中與所選tag標准匹配的所有按鈕。

為了不讓你失望 - 這是一個例子：

 $(function() { var $editor = $('#textEditor').prop('contenteditable', true); var $btn = $('span[data-cmd]'); var tag2cmd = { "B": 'bold', "I": 'italic' }; // HIGHLIGHT BUTTONS on content selection function findParentNode(el) { $btn.removeClass('selected'); var tagsArr = []; var testObj = el.parentNode || ''; if (!testObj) { return; } var c = 1; tagsArr.push(el.nodeName); if (el.tagName != 'DIV') { while (testObj.tagName != 'DIV') { c++; tagsArr.push(testObj.nodeName); testObj = testObj.parentNode; } for (i = 0; i < c; i++) { $('[data-cmd="' + tag2cmd[tagsArr[i]] + '"]').addClass('selected'); } console.log(tagsArr); } } // EXECUTE COMMAND function execCmd(cmd, arg) { document.execCommand(cmd, false, arg); } $btn.mousedown(function(e) { e.preventDefault(); $(this).toggleClass("selected"); execCmd(this.dataset.cmd); }); $("#fonts").change(function() { execCmd("FontName", this.value); }); // Having a button click toggleClass is not enough cause you'd also want // to change button state when the user tlicks on different // elements tag inside the editor. var $lastSelected; $editor.on('mouseup', function(e) { e.stopPropagation(); $lastSelected = e.target; findParentNode($lastSelected); // auto highlight select buttons }); });

 * {margin: 0; padding: 0;} #textEditorTab span { cursor: pointer; display: inline-block; padding: 0px 10px 0px 10px; } #textEditorTab span:hover { background: #eee; } #textEditorTab span.selected { background-color: orange; } #textEditor { width: 300px; height: 120px; border: 1px solid #ddd; padding: 5px; }

 <div id="textEditorTab"> <span data-cmd="bold"><b>B</b></span> <span data-cmd="italic"><i>I</i></span> <select id="fonts"> <option value="Arial">Arial</option> <option value="Comic Sans MS">Comic Sans MS</option> <option value="Courier New">Courier New</option> <option value="Monotype Corsiva">Monotype</option> <option value="Tahoma">Tahoma</option> <option value="Times">Times</option> </select> </div> <div id="textEditor">Lorem ipsum dolor sit amet</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

所以你看，只有一個“想法”，代碼立即變得龐大，所以如果你真的想保持簡單，避免這樣的東西並玩得開心！