I'm Sham
一个在通往码农道路上走走停停的行政文员

小程序制作笔记-添加Ueditor富文本编辑器

因为公司会有公告、活动、规章制度等文本,为了方便添加,给小程序后台添加了1个 Ueditor 富文本编辑器,用起来很方便,只要复制word文档内容,然后到编辑器内粘帖一下就可以了,就是可能编辑器会自动添加左右边距等,样式不一定是你要的,也很简单,一键清除样式,然后再排版一下就好了。

下面就是如何添加Uedit编辑器和简单的提交数据到数据库的方法。

首先是下载Ueditor编辑器:

百度下就能看到官网,毕竟是百度的东西,因为Sham用的是PHP后台,所以选择下载PHP版。然后上传到服务器内,假设将编辑器文件夹放在Public文件夹目录下,下面就是将编辑器插入到表单中以便提交,下面上代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
    <title>发布文章</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
  <?php
  header("Content-type:text/html;charset=utf-8");
     echo"
<div class='alert alert-info title'>发布文章</div>
<form role='form' action='submit.php?type=articles' method='post'>
  <div class='form-group'>
    <label for='name'><h3>文章分类:</h3></label>
    <select style='width:160px;height:40px;' name='type'>
      <option value='tochoose'>请选择</option>
      <option value='dormitory'>宿舍相关</option>
      <option value='canteen'>食堂相关</option>
      <option value='others'>其他</option>
    </select>
    
    <label for='name'><h3>文章类型:</h3></label>
    <select style='width:160px;height:40px;' name='subtype'>
      <option value='tochoose'>请选择</option>
      <option value='SOP'>SOP公司规定</option>
      <option value='notice'>通知</option>
      <option value='other'>其他文章</option>
    </select>
    <p></p>
      <label for='name'><h3>标题:</h3></label>
      <input type='text' id='title' name='title' style='width:90%;height:40px;' placeholder='请输入标题'><br/>
    <script id='container' name='content' type='text/plain'> //这里就是添加编辑器代码,其中name='content'就是到时接收编辑器收据用的,还需要再添加调用编辑器JS文件方可显示,见下面。
            这里写你的初始化内容
        </script>
    <button id='button' class='btn btn-primary' style='width:100%;margin:20px auto;' type='submit'>提交</button>
 </div>
    
</form>

//下面是调用编辑器JS文件
<!-- 配置文件 -->
<script type='text/javascript' src='public/ueditor/ueditor.config.js'></script>
<!-- 编辑器源码文件 -->
<script type='text/javascript' src='public/ueditor/ueditor.all.js'></script>
<!-- 实例化编辑器 -->
<script type='text/javascript'>
    var editor = UE.getEditor('container',{initialFrameHeight:400,initialFrameWidth:850});
</script>
";
  ?>
</body>
</html>

然后就是添加接受数据并上传服务器的文件,代码如下:

<?php
include_once("con.php");//连接数据库

if($_POST['type']="articles"){
  if($_POST['type']=='tochoose' || $_POST["subtype"]=='tochoose'){
    echo "<script>alert('有下拉选项未选择');window.location.href='edit.php';</script>";
  }else{
    $type = $_POST["type"];
    $subtype = $_POST["subtype"];
    $time = date("Y年m月d日 h:i");
    $title = $_POST["title"];
    $content = $_POST["content"]; //这里是接受编辑器内容的
    
    $sql="INSERT INTO `articles`(`ID`, `type`, `subtype`, `time`, `title`, `content`) VALUES (null,'$type','$subtype','$time','$title','$content')";
    if($result = $con->query($sql)){
     echo "<script>alert('发布成功!');window.location.href='edit.php';</script>";
    }else{
      echo "<script>alert('发布失败!');window.location.href='edit.php';</script>" , $con ->error;
    }  
  }
}else{
  echo "非法访问";
}
?>

这样,简单的一个富文本编辑提交就完成了,效果见下方图片。

后续:不知道是不是因为编辑器自身问题,添加视频功能按钮使用后,会变成添加图片,需要找到编辑器文件中的 ueditor.all.js ,然后找到 me.commands[“insertvideo”] ,将里面的 将image 改为 video,保存就可以了。

上述完成之后,想要在小程序中显示出来,还需要让小程序有解析富文本的功能,感谢强大的网友,提供了wxParse插件,后续会分享使用wxParse的方法,或者也可以直接百度之。

赞(0) 赏杯咖啡!
未经允许不得转载:Sham@双目瞿 » 小程序制作笔记-添加Ueditor富文本编辑器

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

如果你觉得文章好,请赏1杯速溶咖啡给Sham吧!

微信扫一扫打赏