可结合FCKeditor与WYSIWYG的jQuery插件IPWEditor文本编辑器

很多的PHP开发者应该对FCKeditor文本编辑器非常熟悉,因为大部分的国产PHP教材书中在介 绍CMS制作时都会推荐使用这个文本编辑器,另外一个就是WYSIWYG编辑器,,这里介绍一个可结合FCKeditor与WYSIWYG的jQuery 插件IPWEditor文本编辑器,IPWEditor插件可实现少量的代码改动就能实现这二个编缉器的结合,效果图如下:
ipweditor
使用说明
需要使用jQuery库文件和editable.wysiwyg库文件
可结合fckeditor组件

使用实例
一,包含文件部分

  1. <script type="text/javascript" src="jquery-1.3.2.js"></script>
  2. <script type="text/javascript" src="jquery.editable.wysiwyg-1.3.3.js"></script>
  3. <script type="text/javascript" src="fckeditor/fckeditor.js"></script>

二,HTML部分

  1. <div id="editable" class="biuuu">点击弹出editable 和 WYSIWYG编辑器 </div>

三,Javascript部分

  1. <script type="text/javascript">
  2. var oFCKeditor = new FCKeditor( 'editor1') ;
  3. oFCKeditor.BasePath = "fckeditor/" ;
  4. $('.biuuu').editable(
  5. {
  6. type: 'wysiwyg',
  7. editor: oFCKeditor,
  8. onSubmit:function submitData(content){
  9. alert(content.current)
  10. },
  11. submit:'save'
  12. });
  13. </script>

如上实例,实现如效果图的文本编辑器,实现当点击类名为biuuu的DIV弹出一个文本编辑器,具体说明如下:

一,初始化FCKeditor对象
var oFCKeditor = new FCKeditor( 'editor1') ;

二,设置FCKeditor路径
oFCKeditor.BasePath = "fckeditor/" ;

三,加载编辑器部分
$('.biuuu').editable({});

具体参数部分比较简单,分别是type类型,editor编辑器,onSubmit提交回调事件,submit提交元素名称,具体可查看editable的JS文件配置部分。

这个可结合FCKeditor与WYSIWYG的jQuery插件IPWEditor文本编辑器,非常有意思,创新的想法是需要的,这样才能有更多灵感和火化。