2012-02-06 63 views
3

我正在寻找一个非常小的jQuery富文本框插件为我正在工作的一个web应用程序。jquery最小化富文本框插件

用户只需要看到'文本框',而不是任何工具栏,因为所有丰富的格式将根据它们的类型进行编码。

我试图用iframe创建自己的,但有问题。其中之一就是在将字符串包装在div中时,脱字符会移动到开始位置,并且无法单击而不能在div内移动。 http://jsfiddle.net/DVjYa/

这是一个问题,因为我需要它像一个普通的文本框。在普通的文本框中,您可以使用箭头键进行导航而无需单击。因此,我为什么要寻找一个已经克服了这些问题的插件。

+0

参见前两个回答这个问题:http://stackoverflow.com/questions/1181700/set-cursor-position-on-contenteditable-div – bfavaretto 2012-02-06 12:43:07

回答

4

您可以使用非常轻量级的CLEDITOR。您可以禁用所有工具栏按钮并隐藏工具栏。除此之外,即使工具栏不存在,也可以使用键盘快捷键(CTRL + B/CTRL + I)使选择变为粗体/斜体。

演示:http://jsfiddle.net/Rft3A/

1
var editorDoc; 

$(function() { 
    var editor = document.getElementById ("editable"); 

    if (editor.contentDocument) { 
     editorDoc = editor.contentDocument; 
    } else { 
     editorDoc = editor.contentWindow.document; 
    } 

    var editorBody = editorDoc.body; 
    if ('contentEditable' in editorBody) { 
     // allow contentEditable 
     editorBody.contentEditable = true; 
    } 
    else { // Firefox earlier than version 3 
     if ('designMode' in editorDoc) { 
      // turn on designMode 
      editorDoc.designMode = "on";     
     } 
    } 
}); 
0

将新增另一个答案,虽然职位是有点老了

Trumbowyg一个轻量级的和惊人的WYSIWYG JavaScript编辑器 - 15KB只(从github page