如何创建简单的 jquery 文本编辑器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8118642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create Simple jquery text editor
提问by juliston
I am creating a new project which needs a simple html editor. How can I create simple text editor using jquery?
我正在创建一个需要一个简单的 html 编辑器的新项目。如何使用 jquery 创建简单的文本编辑器？
回答by Jeff
I forked the jQueryTE plugin (a great, minimal rich text editor) and made it jQuery Mobile compatible - it now resizes with the browser, and the panel will span 2 lines if necessary (portrait-view on iPhone for instance).
我分叉了 jQueryTE 插件（一个伟大的、最小的富文本编辑器）并使它与 jQuery Mobile 兼容 - 现在它会随着浏览器调整大小，如果需要，面板将跨越 2 行（例如 iPhone 上的纵向视图）。
https://github.com/jeffijoe/jQuery-TE
https://github.com/jeffijoe/jQuery-TE
A screenie of what this looks like:
屏幕截图：
Portrait
肖像
Landscape
风景
回答by HADI
I was looking for perfect answer. But didn't found any of them. At last went through basics.
我一直在寻找完美的答案。但是一个都没找到。终于打通了基础。
Here's how i did it.
这是我如何做到的。
HTML:
HTML：
<div id="editor" contenteditable="true">Lorem Ipsum is simply dummy text</div>
<button id="make-bold">Make bold</button>
JS:
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);
});
Live demo - https://jsfiddle.net/im4aLL/Lyusxq3p/
现场演示 - https://jsfiddle.net/im4aLL/Lyusxq3p/
I pullout the basic idea by this and finally made something which i use in my future projects.
我由此得出了基本的想法，并最终做出了一些我在未来项目中使用的东西。
I made EasyEditor - https://github.com/im4aLL/easyeditorfrom above concept. There are lot more things to do. Like when are wrapping a node you need to check wheather that selection already wrapped with other node or same node. Also there are lot of functions you need to overcome.
我从上面的概念制作了 EasyEditor - https://github.com/im4aLL/easyeditor。还有很多事情要做。就像在包装节点时一样，您需要检查该选择是否已经与其他节点或同一节点包装在一起。还有很多功能需要克服。
Or you may try my lightweight plugin which i made for guys like you who need full flexible solution to integrate it with another application.
或者你可以试试我的轻量级插件，我为像你这样需要完全灵活的解决方案来与另一个应用程序集成的人制作。
Here's the demo and documentation for use EasyEditor
这是使用 EasyEditor 的演示和文档
- Demo: http://habibhadi.com/lab/easyeditor/
- Examples: http://habibhadi.com/lab/easyeditor/examples.html
- Documentation: http://habibhadi.com/lab/easyeditor/documentation.html
- 演示：http: //habibhadi.com/lab/easyeditor/
- 示例：http: //habibhadi.com/lab/easyeditor/examples.html
- 文档：http: //habibhadi.com/lab/easyeditor/documentation.html
Usage
用法
回答by Hemant Metalia
for it you can directly download code of text editor and out it in your application you can download it from following sites:
为此，您可以直接下载文本编辑器的代码，然后在您的应用程序中将其从以下站点下载：
http://www.intrepidstudios.com/projects/jquery-rich-text-editor/demo.aspxhttp://freshcode.co/plugins/jquery.contenteditable/demo.html
http://www.intrepidstudios.com/projects/jquery-rich-text-editor/demo.aspx http://freshcode.co/plugins/jquery.contenteditable/demo.html
回答by DeveloperX
By a simple search you can find a lot of editors so I recommend this one 10 jQuery Text Editor Plugins
通过简单的搜索你可以找到很多编辑器，所以我推荐这个10 个 jQuery 文本编辑器插件
回答by Igor
You may choose one of these: http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors
您可以选择其中之一：http: //www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors
I personally prefer TinyMCE, non jquery editor.
我个人更喜欢 TinyMCE，非 jquery 编辑器。
