可以在designMode中填充和保存从iframe内输入的文本吗？

我即将开始编写自己的富文本编辑器，但需要知道是否可以填充文本区域以及如何保存/使用其中的数据。

我目前正在使用ckEditor，但它太笨重，而且非常适合我想要的东西。

我会用这个作为基础：

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

我需要对数据进行某些检查以检查其长度。

谢谢。

代码如果需要：

HTML：

B I  Arial Comic Sans MS Courier New Monotype Tahoma Times  
   

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：

 
 B I  Arial Comic Sans MS Courier New Monotype Tahoma Times  
 
 

你需要的所有基本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); }); }); 

这是一个jsBin DEMO

现在，我已经看到你想要的，按下按钮使它成为状态ACTIVE ，但如果你三思而后行，那将是一个混乱的原因之一：

用户输入文本 – >选择一个部分并单击BOLD ，现在它用cursot跳转到没有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 

这是它的演示

所以你看，只有一个'想法'，代码立即变得庞大，所以如果你真的想保持简单，那就避免这样的东西，玩得开心！