码迷,mamicode.com
首页 > 其他好文 > 详细

使用wangEditor富文本编辑器

时间:2016-05-13 00:07:53      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

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的作用是在后台实现图片的转存,然后将图片的实际地址返回。

使用wangEditor富文本编辑器

标签:

原文地址:http://blog.csdn.net/koastal/article/details/51346567

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!