推荐两款在线文本编辑器

推荐两款在线文本编辑器

做博客或论坛系统的时候用的上的。我这里是以php为例子的

一 kindeditor

之前,我是用 kindeditor 的,很好很强大。部署简单、支持文件上传等,。怎么用?在安装包的demo文件里面都有很详细的例子了,我就不赘述了。下面只看两个别人很少说到的问题。

/php/upload_json.php -- 对上传的文件进行设置,包括路径设置、文件名设置等。

/php/file_manager_json.php -- 把远程文件抓取到本地

上面两个文件都有下面这两条语句:

//文件保存目录路径:上传的文件就保存在这个目录里
$save_path = $php_path . '../attached/';
//文件保存目录URL:上传的文件返回的URL就是这个,然后我们拿到这个URL进行各种操作,包括写入数据库
$save_url = $php_url . '../attached/';

我们只需要改那两个文件的这些语句就可以设置文件上传路径了。另外,这里用的是相对于站点的路径的

 

二 UEditor

在我看来,它有三个版本:①UE完整版、②UM迷你版、③UB定制版

以前我也下载过,那时候的安装包里面没有demo文件,我也没深入研究,所以那时候不会用。今天试了一下,UE完整版和UB定制版的安装包里面都有很好的demo文件,用起来很简单。而它的官网里面也有部署说明,另外,UE和UB的用法是一样的。不过,美中不足的就是UM迷你版没有demo文件,也没有部署说明,网上查了一下,也只有UE完整版、UB定制版的例子,没有UM的。

注意了,现在是重点。我先是按照UE完整版的部署说明去部署UM的,结果行不通,有些细微的差别的。好在,官网有UM的在线演示,我就在浏览器里查看那个在线演示的源码,学着去部署我的UM,结果好像行了,最后还有一个问题,就是上传图片不行。最后,我在结合UE的部署说明,综合了一下,终于弄出来了。

现在,附上核心部署代码:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>UEditorMINI</title>
    <link href="themes/default/css/umeditor.min.css" type="text/css" rel="stylesheet">
    
    <script type="text/javascript" charset="utf-8" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="umeditor.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<script type="text/plain" id="editor" style="width:50%;height:500px;"></script>
<script type="text/javascript">
    var ue = UM.getEditor('editor');
</script>
</body>
</html>

下面,我们来看看UM的上传文件的设置:在这个文件里面设置的:/php/imageUp.php

//上传配置:上传的文件返回的URL就是这个,然后我们拿到这个URL进行各种操作,包括写入数据库
$config = array(
    "savePath" => "../upload/" ,             //存储文件夹
    "maxSize" => 1000 ,                   //允许的文件最大尺寸,单位KB
    "allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )  //允许的文件格式
);
//上传文件目录:上传的文件就保存在这个目录里
$Path = "../upload/";

我们只需要改这些语句就可以设置上传的目录了。另外,这里用的应该是相对路径,不像上面那个kindeditor用的是相对于站点的路径

效果图如下:

 

最后,附上我修改过的,可以轻松部署的 UM :

链接: http://pan.baidu.com/s/1jGDPVzK 密码: jcpp

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章