您的位置：首页 > 其它

使用wangEditor富文本编辑器

2016-05-08 17:23 387 查看
wangEditor官网地址：http://wangeditor.github.io/

今天忽然想起来搞一下富文本编辑器的使用，本来想用百度的ueditor，但是貌似校园网给墙了。然后从知乎上发现了这个编辑器，优点是界面简洁，文档比较清楚。缺点也显而易见，比较简陋，要求不是很高的话，还是可以的 :)

下载解压完成之后，用到的只有dist这个文件。



作者在看云上发布的手册地址：

http://www.kancloud.cn/wangfupeng/wangeditor2/113994

前台页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>editor测试</title>
<!--引入wangEditor.css-->
<link rel="stylesheet" type="text/css" href="../dist/css/wangEditor.min.css">
<style type="text/css">
.container{
width: 800px;
height: auto;
margin: 50px auto;
}
.container textarea{
height: 400px;
}
</style>
</head>
<body>

<div class="container">
<div><h1></h1></div>
<div>
<form action="function.php" method="post">

<p>
<strong>文章标题：</strong>
</p>
<p>
<input type="text" name="title">
</p>

<p>
<strong>文章内容：</strong>
</p>
<p>
<textarea id="textarea1" name="content"></textarea>
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
</div>
</div>

<!--引入jquery和wangEditor.js-->
<!--注意：javascript必须放在body最后，否则可能会出现问题-->
<script type="text/javascript" src="../dist/js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../dist/js/wangEditor.min.js"></script>
<!--这里引用jquery和wangEditor.js-->
<script type="text/javascript">
var editor = new wangEditor('textarea1');
// 上传图片（举例）
editor.config.uploadImgUrl = '/upload.php';
editor.config.uploadImgFileName = 'myFileName';
editor.create();
</script>
</body>
</html>


为了简单起见，我采用了form的提交方式，action对应的function.php文件代码如下：

<?php
/**
* Created by PhpStorm.
* User: koastal
* Date: 2016/5/8
* Time: 17:06
*/
echo $_REQUEST['content'];


function.php的作用就是看富文本编辑器提交过去的数据，在实际应用中$_REQUEST[‘content’]的内容是会保存到数据库中的。

在前段代码中我们可以看到通过
editor.config.uploadImgUrl = '/upload.php';


配置了图片上传的操作页面，upload.php

<?php
/**
* Created by PhpStorm.
* User: koastal
* Date: 2016/5/8
* Time: 16:38
*/
$imgInfo = $_FILES['myFileName'];
$oldname = $imgInfo['name'];
$tmp_name = $imgInfo['tmp_name'];
$temp = explode(".",$oldname);
$newname = time().".".$temp[count($temp)-1];
move_uploaded_file($tmp_name,'upload/'.$newname);
echo $dir = "http://".getenv('HTTP_HOST')."/upload/".$newname;


upload.php的作用是在后台实现图片的转存，然后将图片的实际地址返回。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航