Tag: designmode

execCommand的替代方案

我正在寻找创建WYSIWYG编辑器，使用jQuery作为框架，我可以使用不同的方法来简化生产。 我现在确实有一个工作编辑，它运作良好。 我使用iFrame，并将它的designMode设置为on并从那里开始。 然而，有一些事情在唠叨我。 以更改所选文本的字体系列为例。 目前我正在使用这个： editorDoc.execCommand(‘fontname’, false, ‘verdana’); …现在工作正常：它在iFrame中正确显示更改。 但是，当我实际查看代码时（我将iFrame中的任何代码复制到隐藏的输入中然后将其复制）它会生成 aasdf 我意识到第一类Apple-style-span是一个webkit的东西，这没关系。 唠叨我的是整个 。 研究execCommand看起来它不是标准，尽管大多数浏览器都支持它。 虽然它已经很老了，所以我想知道是否有人听说过或者知道更好的方法来产生相同的效果，希望有更多的语义代码产品。 如果不限于iFrame，也可以使用代替.. 非常感谢Gareth 编辑：contentEditable可以帮助我实现不使用iFrame的目标吗？

可以在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; […]