nicEdit富文本编辑器-----【下载不扣分，回帖加1分，欢迎下载，童叟无欺】资源-CSDN下载

共7个文件

html：5个

gif：1个

js：1个

富文本编辑器

html

editor

javascript

4星 · 超过85%的资源需积分: 5 196 浏览量 2009-06-19 08:27:16 上传评论收藏 16KB ZIP 举报

富文本编辑器在网页开发中扮演着至关重要的角色，它为用户提供了一种便捷的方式来创建和编辑HTML内容。nicEdit就是这样一款轻量级且高效的富文本编辑器，它以简洁的代码和易于扩展的特性赢得了开发者们的青睐。 nicEdit是一款基于JavaScript的开源富文本编辑器，它的核心设计理念是“精简”和“易用”。正如标题和描述所提到的，nicEdit的代码结构清晰，只有一个主要的nicEdit类，这使得它在内存占用和加载速度上表现优秀，非常适合对性能有较高要求的项目。同时，这种设计也意味着开发者可以轻松地对其进行定制和扩展，以满足各种特定需求。在HTML编辑器领域，nicEdit提供了常见的编辑功能，如字体样式调整、段落格式化、链接插入、图片上传等。这些功能都是通过JavaScript事件处理和DOM操作实现的，对于熟悉前端技术的开发者来说，理解并自定义这些功能并不困难。此外，nicEdit还支持CSS样式应用，这意味着你可以通过修改或添加CSS规则来改变编辑器的外观和行为，使其更好地融入到你的网站设计中。 nicEdit.js是nicEdit的核心脚本文件，包含了编辑器的主要逻辑。通过对这个文件的阅读和学习，开发者可以深入理解nicEdit的工作原理，并进行二次开发。例如，你可以添加新的插件来扩展编辑器的功能，或者修改现有的功能以适应特定的业务场景。压缩包中的nicEditorIcons.gif文件是编辑器使用的图标集，这些图标通常与编辑器的工具栏按钮相对应，用户可以通过点击这些按钮来执行相应的编辑操作。如果你想要改变编辑器的视觉风格，可以考虑替换这个图标文件或修改其对应的CSS样式。 "demos"目录可能包含了nicEdit的一些示例或教程，这些实例可以帮助初学者快速上手，了解如何在实际项目中集成和使用nicEdit。通过查看和分析这些示例，你可以了解到如何配置编辑器、如何创建自定义插件，以及如何处理用户交互等关键知识点。 nicEdit是一个适合初学者和经验丰富的开发者使用的富文本编辑器，它的简洁性和可扩展性使其在众多编辑器中脱颖而出。无论你是要为博客、论坛还是内容管理系统添加一个编辑器，nicEdit都能提供一个高效且灵活的解决方案。通过深入研究和实践，你将能够充分利用nicEdit的各项功能，为你的网站或应用程序打造出个性化的富文本编辑体验。

资源推荐

资源详情

资源评论

收起资源包目录

nicEdit_富文本_.zip （7个子文件）

nicEdit.js 32KB

demos

demo05.html 2KB

demo01.html 911B

demo04.html 3KB

demo03.html 1KB

demo02.html 2KB

nicEditorIcons.gif 3KB

<html> <head> <title>Demo 4 : Inline NicEditors</title> </head> <body> <div id="menu"></div> <div id="intro"> <p>In addition to replacing textareas NicEdit instances can also replace any element (divs,spans,paragraphs,ect.) with editor instances without effecting the layout of the page. As you will see in other examples content can be saved via AJAX to the server or retrieved from javascript</p> <p>To make use of Inline Editing you should first create an empty element as a placeholder for the Editor Panel. In this case I use a div with id="myNicPanel" set. Its usually a good idea to set a width on element but it is not required.</p> </div> <div id="sample"> <script src="../nicEdit.js" type="text/javascript"></script> <script type="text/javascript"> bkLib.onDomLoaded(function() { var myNicEditor = new nicEditor(); myNicEditor.setPanel('myNicPanel'); myNicEditor.addInstance('myInstance1'); myNicEditor.addInstance('myInstance2'); myNicEditor.addInstance('myInstance3'); }); </script> This is text above the Panel <div id="myNicPanel" style="width: 525px;"></div> This is text below the Panel <br /><br /> <h4>Inline Div</h4> <div id="myInstance1" style="font-size: 16px; background-color: #ccc; padding: 3px; border: 5px solid #000; width: 400px;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor, faucibus ac, iaculis non, cursus et, dui. Donec non urna. Aliquam volutpat ornare augue. Phasellus egestas, nisl fermentum porttitor rutrum, magna metus rutrum risus, id fringilla magna mi nec lorem. Etiam eget metus sed justo ultricies rhoncus. Praesent rhoncus arcu non dolor. Proin eu eros. Curabitur vehicula. Nulla vehicula lectus eget eros. Nulla vel nulla at dui dictum mollis. Etiam purus felis, pretium vel, eleifend id, consectetuer nec, purus. Vivamus pretium orci ac sapien. Etiam at tortor. Nunc tincidunt mi sed sapien. Etiam lacus pede, fermentum eu, blandit ac, congue eget, metus. Quisque sed sem. Mauris at sapien. Ut luctus. </div> <br /> <h4>Inline Span</h4> <span id="myInstance2" style="display: block;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor, faucibus ac, iaculis non, cursus et, dui. Donec non urna. Aliquam volutpat ornare augue. Phasellus egestas, nisl fermentum porttitor rutrum, magna metus rutrum risus, id fringilla magna mi nec lorem. Etiam eget metus sed justo ultricies rhoncus. Praesent rhoncus arcu non dolor. Proin eu eros. Curabitur vehicula. Nulla vehicula lectus eget eros. Nulla vel nulla at dui dictum mollis. Etiam purus felis, pretium vel, eleifend id, consectetuer nec, purus. Vivamus pretium orci ac sapien. Etiam at tortor. Nunc tincidunt mi sed sapien. Etiam lacus pede, fermentum eu, blandit ac, congue eget, metus. Quisque sed sem. Mauris at sapien. Ut luctus. </span> <br /> <h4>Inline Paragraph</h4> <p id="myInstance3" style="border: 1px solid #000;">This is some text that can be edited in the inline paragraph editor.</p> </div> </body> </html>

评论收藏

内容反馈