可以在designMode中填充和保存從iframe中輸入的文本嗎？

Question

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

我目前使用的ckEditor，但它太笨重，大我想要什麼。

不適是使用此基礎：

http://jsfiddle.net/Kxmaf/6/

我需要運行在數據某些檢查以及檢查其長度。

謝謝。

代碼如果需要的話：

HTML：

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

JS：

$(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(); 
} 

Answer 1

DEMO

爲了讓你從什麼地方開始， 這是你的HTML：

<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"></div> 

的所有基本JS /你需要JQ是：

$(function() { 

    var $editor = $('#textEditor').prop('contenteditable', true); 
    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);  
    }); 

}); 

AND HERE'S A jsBin DEMO

現在，我已經看到了你想要的，按鈕點擊，使其狀態ACTIVE， 但是如果你認爲兩次你會達到一個混亂的原因之一：

用戶輸入文本 - >選擇一個部分a次點擊BOLD，現在它跳與cursot到線那裏沒有粗體文​​字的開始......別急，你的按鈕仍具有活躍狀態...

，以防止此類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 
    }); 

}); 

AND IT'S DEMO

所以你看，只有一個「觀念」和代碼獲取立即巨大的，所以如果你真的想要保持簡單，避免這樣的事情，玩得開心！