<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>
nicEdit简单小巧编辑器
需积分: 0 197 浏览量
2008-05-22
22:44:55
上传
评论
收藏 18KB RAR 举报
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
hshiming101
- 粉丝: 0
- 资源: 1
最新资源
- 目标检测-手机屏幕表面缺陷检测数据集-1200张图-+对应VOC-COCO-YOLO三种格式标签+数据集划分脚本
- 「天若有情 」深情版--天下万般兵刃 唯有过往伤人最深.mp3
- 123456daWDdwD
- 用友U810.1数据库字典-只需要1积分
- 基于opencv和numpy的customtkinter图像处理工具
- 最新1.8JDK的PostgreSQL JDBC 驱动包
- stlink驱动+J-Link驱动+ST-LINK utility工具
- 项目实战-Python基于KMeans算法进行文本聚类项目实战.zip
- 弹幕视频网站 java源代码毕业设计毕业论文
- 多用户博客个人网站java源代码毕业设计毕业论文
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)
评论0