editer js 插件_轻量级jQuery文本编辑器插件Froala WYSIWYG Editor

1cc8057351ef22bca5d5e08e000442ed.png

c714816320c3c7678952c0af200e40b9.png

插件描述:一个轻量级的jQuery WYSIWYG文本编辑器基于HTML5技术。 跨浏览器、支持手机和视网膜屏.它是免费的使用为个人和非盈利项目。

网友晴朗编辑$(function() {

$('.editor').editable({

inlineMode: false,

theme: 'gray',

//模版

height: '200px' //高度

});

})

实现中文菜单和上传图片保存到本地路径

$(function () {

$('#edit').editable({

inlineMode: false,

alwaysBlank: true,

language: "zh_cn",

direction: "ltr",

allowedImageTypes: ["jpeg", "jpg", "png", "gif"],

autosave: true,

autosaveInterval: 2500,

saveURL: 'hander/FroalaHandler.ashx',

saveParams: { postId: "123" },

spellcheck: true,

plainPaste: true,

imageButtons: ["floatImageLeft", "floatImageNone", "floatImageRight", "linkImage", "replaceImage", "removeImage"],

imageUploadURL: 'hander/FroalaHandler.ashx',

imageParams: { postId: "123" },

enableScript: false

})

});

=======以下内容由 SunRay 提供========

$(function(){

$('#edit').editable({

inlineMode: false, alwaysBlank: true,

language: "zh_cn",

imageUploadURL: 'lib/imgupload.php',//上传到本地服务器

imageUploadParams: {id: "edit"},

imageDeleteURL: 'lib/delete_image.php',//删除图片

imagesLoadURL: 'lib/load_images.php'//管理图片

}).on('editable.afterRemoveImage', function (e, editor, $img) {

// Set the image source to the image delete params.

editor.options.imageDeleteParams = {src: $img.attr('src')};

// Make the delete request

.              editor.deleteImage($img);

});

});

上传图片服务器端的PHP代码:<?php

// Allowed extentions.

$allowedExts = array("gif", "jpeg", "jpg", "png");

// Get filename.

$temp = explode(".", $_FILES["file"]["name"]);

// Get extension.

$extension = end($temp);

// An image check is being done in the editor but it is best to

// check that again on the server side.

// Do not use $_FILES["file"]["type"] as it can be easily forged.

$finfo = finfo_open(FILEINFO_MIME_TYPE);

$mime = finfo_file($finfo, $_FILES["file"]["tmp_name"]);

if ((($mime == "image/gif")    || ($mime == "image/jpeg")    || ($mime == "image/pjpeg")    || ($mime == "image/x-png")    || ($mime == "image/png"))    && in_array($extension, $allowedExts)) {

// Generate new random name.

$name = sha1(microtime()) . "." . $extension;

// Save file in the uploads folder.

move_uploaded_file($_FILES["file"]["tmp_name"], "../uploads/" . $name);

// Generate response.

$response = new StdClass;

$response->link = "../../uploads/" . $name;

echo stripslashes(json_encode($response));

}

?>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jqeditor-svn343.zip ################ ### 功能列表 ### ################ 1、系统功能: 加粗、斜体、下划线、删除线、左对齐、右对齐、中介对齐 增加缩进、减少缩进、有序列表、无序列表、下标、上标 2、基础功能: 字体、字号、撤销、重做、源码、删除格式、入图片、表格、字体颜色、背景颜色 入多媒体文件、链接、特殊符号 3、定制功能: 一级目录、二级目录、内链、参考资料、快捷菜单 4、其他功能: 异步加载、全屏编辑、右键菜单、地图 #################### ### 目录结构 ### #################### - src |- lang |- zh-cn.js |- en.js |- ... |- core.js |- icons.js |- mod |- mod.*.js |- plugin |- plugin.*.js - jqeditor.min.js - style |- spacer.gif |- icon_mce.gif |- content_default.css - skins |- mce.css #################### ### 要 求 ### #################### 1.代码结构要清晰,业务代码和逻辑分离,方便开发和维护; 2.方便扩展; 3.功能定制性强、满足多种需求; 4.兼容性好; 5.可以同时存在多个编辑器; 6.不常用的多个件代码可以整合为一个文件,延迟加载, 不常用且代码量很多的个别件可以在首次使用时加载, 7.增加编辑器事件机制,事件过程可以分为初始化阶段、编辑器加载完成阶段、命令触发时段等。 模块可以向各个时段注册需要执行的代码,通过此模式降低核心和模块的耦合度。 避免在核心代码但这直接调用模块代码, 如在核心方法中使用 E.mod('Panel').set() 等就是增加了耦合性。 8.模块、件支持热拔; #################### ### 代码组织方式 ### #################### 代码主要指js代码,大致分三部分:核心、模块、件,核心文件是一个core.js, 为了方便开发和维护,每个模块或件都是一个独立的js文件。 核心:编辑器框架,不包含具体功能,所有功能通过模块或件形式进行扩展; 模块:会重复使用的功能,不会对应具体的按钮; 件:唯一功能 #################### ###  开发计划  ### #################### 1、核心框架 core.js 2、主要模块 E.mod("Confirm") E.mod("Panel") E.mod("History") E.mod("Event") E.mod("Toolbar") E.mod("Data") E.mod("Selection") ... 3、主要件 Redo, Undo Font Image Link ForeColor,BackColor Source,PasteText PasteWord Save AutoHeight ... #################### ###  开发件  ### #################### 开发件是相当简单的事情,件分为有界面件和无界面件,无界面的件会更简单一些,如撤销、重做、表格操作等件。 1、无界面件,以plugin.history.js为例,仅需要一个click方法即可 (function(E){ var Consts = E.consts; E.plugin("Redo,Undo", { click: function( Panel, self, target ){ var name = self.name, History=E.mod("History"); if (History){ History[name]( ); }else{ E.execCommand(name); } return 1; } }); })(jQEditor); 2、有界面件,以plugin.link.js为例 /** * 超链接件 * 请注意件会继承 Base_Plugin 的属性,在core.js当中定义,界面件需要设置config属性、init方法、get方法。 */ (function(E){ var Consts = E.consts; E.plugin("Link", { config: { //面板宽度 width:320 }, init: function( self ){ //fill="Selection" //指定此属性后,会自动将编辑器中选中的文字赋值到此文本框 self.cache['html'] = 'html.....'; }, /** * 返回要入到编辑器的html代码 */ get: function( panel, self ){ var v = self.getValues( panel ), html=''; if( v.text && v.url ){ html = '<a href="'+v.url+'" target="'+v.target+'">'+v.text+'</a>'; }else if( !v.text ){ self.error( '请输入超链接文字' ); }else if( !v.url ){ self.error( '请输入超链接网址' ); } return html } }); })(jQEditor);

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值