本博客立志于收集各类儿童教育资料及技术信息,便于本人和广大网友及家长查询检索,无论公司或个人认为本站存在侵权内容均可与本站联系,任何此类反馈信息一经查明属实后,将立即删除!
   
  • 1 
预览模式: 普通 | 列表

TinyMce的插件开发(F2Blog编辑器外挂开发)

简介:
TinyMCE 是一个基于浏览器(例如MSIE或Mozilla)的强大的所见即所得的编辑器,它使用户可以方便的编辑HTML内容。它非常灵活并且是为系统集成而设计的,比如在Intranets、CMS、LMS等系统中应用。

而在官方的TinyMCE版本上,一直没有图片上传的功能,由于项目需要,需要对在线编辑器增加上传模块。

文件结构:
 css TinyMCE样式表文件

 images 存放按纽等图像文件

 langs TinyMCE语言包

 editor_plugin.js TinyMCE插件调用时的主文件

 popup.php TinyMCE上传插件的用户对口框

 popup.script.php 处理popup.php的脚本文件

开发概述

  对于TinyMCE插件的开发,我觉得用MVC的观点描述是十分合适的,M层是TinyMCE的核心文件,我们只是调用即可;C层如editor_plugin.js、对话框的JS逻辑,V层应该就是用户对口框的设计。

开发步骤

一 制作与tinymce通讯的连接器:editor_plugin.js

1 复制插件开发模版

  在tiny_mce/plugins里面有一个_template的文件夹,它可以说是插件开发的一个通用的模版文件,将它复制到tiny_mce/plugins文件夹,并命名为你的插件名称如upload

[阅读全文]

F2Blog编辑器外挂 & TinyMCE插件 -- 引用(BlockQuote)

此插件帮助在编辑器中增加引用样式,如下图:
http://joesen.f2blog.com/attachments/month_200609/1158373241.gif

安装步骤如下:
1. 下载压缩包并解压,上传至根目录直接覆盖 (下载请到F2Blog Forum
2. 登录后台=》高级管理=》编辑器外挂=》设置按钮=》把f2_quote加入到合适的地方,如下图:
  http://joesen.f2blog.com/attachments/month_200609/1158373505.gif
3. 写新日志时,就能看到引用按钮供选择,如下图:
    attachments/month_200609/1158373623.gif
4. 使用时,先选择要引用的文字,再点击引用按钮即可。

F2Blog外挂 & TinyMCE插件 -- 表情符号

先来看一下范例:
   大家开会,开会啦!

安装方法:
1. 下载插件包,解压后并上传到editor/plugins/下  (下载请到F2Blog Forum)
2. 登录后台,在 高级管理=》编辑器插件=》中激活emotions
 attachments/month_200608/1156917645.gif
3. 设置按钮,加入emotions到合适的地方
    attachments/month_200608/1156917649.gif
4. 在编辑器中就可以使用了
    attachments/month_200608/1156917529.gif
5. 用户可以自己修改图片,只需在Editor/plugins/emotions/images中把01~24.gif换成你自己的图片即可,但文件名一定要相同。
  • 1