Question

我正在创建一个需要简单的html编辑器的新项目。如何使用jquery创建简单的文本编辑器？

Answer 1

我建议： jqueryte

这非常简单;）

Answer 2

我将jQueryTE插件（一个优秀的，最小的富文本编辑器）分叉并使其与jQuery Mobile兼容 - 现在它随浏览器调整大小，如果需要，面板将跨越2行（例如iPhone上的纵向视图）。

https://github.com/jeffijoe/jQuery-TE

这是一个什么样的屏幕：

肖像

Portrait

风景

enter image description here

Answer 3

为此，您可以直接下载文本编辑器的代码，并在您的应用程序中将其从以下网站下载：

http://www.intrepidstudios.com/projects/jquery-rich-text-editor/demo.aspx http://freshcode.co/plugins/jquery.contenteditable/demo.html

Answer 4

我一直在寻找完美的答案。但没有找到任何一个。最后通过了基础知识。

我是怎么做到的。

HTML：

<div id="editor" contenteditable="true">Lorem Ipsum is simply dummy text</div>
<button id="make-bold">Make bold</button>

JS：

document.getElementById('make-bold').addEventListener('click', function(event){
    event.preventDefault();

    var selection = window.getSelection();
    var range = selection.getRangeAt(0).cloneRange();
    var tag = document.createElement('strong');

    range.surroundContents(tag);
    selection.addRange(range);
});

现场演示 - https://jsfiddle.net/im4aLL/Lyusxq3p/

我通过这个拉出了基本想法，并最终制作了我在未来的项目中使用的东西。

我从上面的概念中制作了EasyEditor - https://github.com/im4aLL/easyeditor。还有很多事情要做。就像包装节点时一样，您需要检查选择是否已经与其他节点或同一节点包装。您还需要克服许多功能。

或者您可以尝试我为您这样的人制作的轻量级插件，他们需要完全灵活的解决方案才能将其与其他应用程序集成。