WangEditor+thinkphp5【真实可用 + 原创】

今天公司要编辑文章，一开始准备用 ueditor，但是到了 linux 环境下一直不行，所以最终放弃。改用另外一个编辑器 WangEditor。更加轻量级。

遇到最大的问题是 一个是图片上传，一个是 div 中的选择器 editor 没有 value 和 name，那么 post 过去的值就不会有这个属性。

解决问题和过程如下：
image

  1. 先把 wangeditor 放在 public/static/js 下面

  2. 然后再进入到编辑页面。

image

edit.html

注意：赋值的时候需要使用 raw {$data.content|raw|default=''} 

 
{include file='public/head'}
<body>
    <style media="screen" type="text/css">
        header {
            color: black;
        }
    </style>
    <div class="x-body">
        <form action="edit" class="layui-form" id="mainForm" method="post" style="margin-right: 20px;" enctype="multipart/form-data">
            <input type="hidden" name='id' value="{$data.id}">
            <div class="layui-form-item">
                <label class="layui-form-label">文章标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" value="{$data['title']}" autocomplete="off" class="layui-input">
                </div>
            </div>
 
            <div class="layui-form-item">
                <label class="layui-form-label">文章分类</label>
                <div class="layui-input-block layui-btn-xs">
                    {foreach $category as $key=>$vo}
                    <input type="radio" name="cid" value="{$vo.id}" title="{$vo.name}" {if $data['cid'] eq $vo.id} checked{/if}>
                    {/foreach}
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文章内容</label>
                <div class="layui-input-block">
                    <script src="__static__/js/wangEditor/wangEditor.min.js" type="text/javascript"></script>
                    <div id="editor">
                        {$data.content|raw|default=''}
                    </div>
                    <textarea id="editor_content" name="content_x" style="display:none;"></textarea>
                    <script type="text/javascript">
                        var E = window.wangEditor
                        var editor = new E('#editor');
                        var editor_content = $('#editor_content');
                        // 或者 var editor = new E( document.getElementById('editor') )
                        editor.customConfig.uploadFileName = 'uploadfile';
                        editor.customConfig.uploadImgServer = '/index.php/admin/wangeditor/upload';  // 上传图片到服务器
                        editor.customConfig.onchange = function (html) {
                            // 监控变化，同步更新到 textarea
                            editor_content.val(html);
                         };
                        editor.create();
 
 
                    </script>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button style="margin-left: 20%" class="layui-btn" lay-submit="" lay-filter="toSubmit">提交</button>
                    <button id="reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
 
        </form>
    </div>
</body>
<script type="text/javascript">
    // $("#status").val(0);
    var form = layui.form;
    var layer = layui.layer;
              //自定义验证规则
              form.verify({
                password: function(value){
                  if(value.length < 3){
                    return '标题至少得2个字符啊';
                  }
                }
              });
        //监听提交
        form.on('submit(demo1)', function(data){
              layer.alert(JSON.stringify(data.field), {
              title: '最终的提交信息'
            })
            return false;
        });
    $(document).ready(function(){
        //var editorHtml = $('#editor').val();
        
               var options = {
              type:'post',           //post提交
              // url:'http://ask.tongzhuo100.com/server/****.php?='+Math.random(),   //url
              dataType:"json",        //json格式
              data:{},    //如果需要提交附加参数，视情况添加
              clearForm: false,        //成功提交后，清除所有表单元素的值
              resetForm: false,        //成功提交后，重置所有表单元素的值
              cache:false,          
              async:false,          //同步返回
              success:function(data){
                  console.log(data);
                  if(data.code==0){
                      layer.msg(data.msg);
                  }else{
                      layer.msg(data.msg,{icon:1,time:500},function(){
                          $("#reset").click();
                          x_admin_close();
                          parent.location.reload();
                      });
                  }
                //服务器端返回处理逻辑
              },
              error:function(XmlHttpRequest,textStatus,errorThrown){
                layer.msg('操作失败:服务器处理失败');
              }
            }; 
 
        // bind form using 'ajaxForm' 
        $('#mainForm').ajaxForm(options).submit(function(data){
            location.href="/index.php/admin/article/getArticleList";
        });
    });
</script>
{include file='public/foot'}

核心代码区块：

<div class="layui-form-item">
                <label class="layui-form-label">文章内容</label>
                <div class="layui-input-block">
                    <script src="__static__/js/wangEditor/wangEditor.min.js" type="text/javascript"></script>
                    <div id="editor">
                        {$data.content}
                    </div>
                    <textarea id="editor_content" name="content_x" style="display:none;"></textarea>
                    <script type="text/javascript">
                        var E = window.wangEditor
                        var editor = new E('#editor');
                        var editor_content = $('#editor_content');
                        // 或者 var editor = new E( document.getElementById('editor') )
                        editor.customConfig.uploadFileName = 'uploadfile';
                        editor.customConfig.uploadImgServer = '/index.php/admin/wangeditor/upload';  // 上传图片到服务器
                        editor.customConfig.onchange = function (html) {
                            // 监控变化，同步更新到 textarea
                            editor_content.val(html);
                         };
                        editor.create();
                    </script>
                </div>
            </div>

然后请求的控制：

一个是图片的上传：Wangeditor

<?php
namespace app\admin\controller;
 
use think\Controller;
 
/**
 * wangEditor
 */
class Wangeditor extends Controller
{
    public function upload()
    {
        $file = request()->file('uploadfile');
 
        // 移动到框架应用根目录/public/uploads/ 目录下
        $data = [];
        if ($file) {
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
            if ($info) {
                $imgp = str_replace('\\','/',$info->getSaveName());
 
                $data = [
                    'errno' => 0,
                    'data' => !empty($info) ? ['/public/uploads/'.$imgp] : []
                ];
 
            } else {
                $data = [
                    'errno' => $file->getError(),
                    'data' => []
                ];
 
            }
        }
 
        return json_encode($data);
    }
}

一个是文章的编辑 Article.php

<?php
namespace app\admin\controller;
 
use think\Controller;
use think\Db;
 
/**
 * 文章管理
 */
class Article extends Controller
{
    // 文章列表
    public function getArticleList()
    {
        $article = Db::name('article')
            ->alias('a')
            ->join('category c','c.id=a.cid')
            ->field('a.id as aid, a.*,c.*')
            ->order('a.id asc')
            ->paginate('15');
 
        $page = $article->render();
        $total = $article->total();
 
        $this->assign('article', $article);
        $this->assign('page', $page);
        $this->assign('count', $total);
 
        return $this->fetch('article_list');
    }
 
    // 編輯文章
    public function editArticle()
    {
        $id = (int)$this->request->get('id');
        $data = Db::name('article')->where('id', $id)->find();
 
        $category = Db::name('category')->select();
        return $this->fetch('edit', ['data' => $data, 'category' => $category]);
    }
 
    // 保存编辑之后的文章数据
    public function edit()
    {
        $post = $this->request->post();
        $post['content'] = $post['content_x'];
        unset($post['content_x']);
 
        $id = (int)$post['id'];
        unset($post['id']);
 
        Db::name('article')->where('id', $id)->update($post);
        $this->success('保存成功');
    }
}

来源：https://my.oschina.net/u/4345852/blog/3593076

posted @   Lafite-1820  阅读(230)  评论(0)  编辑  收藏  举报
相关博文：
· thinkphp wangEditor 图片上传
· wangEditor的使用
· wangeditor富文本编辑和vue3
· WangEditor编辑器使用图片上传功能
· wangEditor粘贴word图片且图片文件自动上传功能
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示