layui编辑器上传图片

1.下载layui

https://www.layui.com/(layui前端框架由贤心创作)

2.查看文档

https://www.layui.com/doc/modules/laypage.html(编辑器)

3.实例展示

   var index;
    var layedits;
    layui.use(['form', 'layedit','jquery','layer','laydate','upload'],function()  {
        var form = layui.form
          , layer = layui.layer//弹层
          , layedit = layui.layedit//编辑器
          , laydate = layui.laydate//日期
          , upload = layui.upload//上传
        ,$ = layui.jquery;
        //上传图片,必须放在 创建一个编辑器前面
      layedit.set({
          uploadImage: {
               url: '/notice/uploadFile' //接口url
              ,type: 'post' //默认post
              ,accept: 'file' //支持所有类型文件
          }
      });
      //创建一个编辑器
       index = layedit.build('content'),
       layedits= layui.layedit;    
      //编辑器外部操作
      var active = {
        content: function(){
          alert(layedit.getContent(index)); //获取编辑器内容
        }
        ,text: function(){
          alert(layedit.getText(index)); //获取编辑器纯文本内容
        }
        ,selection: function(){
          alert(layedit.getSelection(index));
        }
      };
      
      $('.site-demo-layedit').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });
      
      //自定义工具栏
      layedit.build('contenttwo', {
        tool: ['face', 'link', 'unlink', '|', 'left', 'center', 'right']
        ,height: 100
      })
    });
     function test(){
        document.getElementById("content").value=content;//内容 
        alert(layedits.getContent(index));
    } 
    function add(){
        var title=document.getElementById("title").value;//公告标题
        if(title.length==0){
          alert('公告标题不能为空!');
          return false;
        }
        var user_id=document.getElementById("user_id").value;//编辑人
        if(user_id.length==0){
              alert('编辑人不能为空!');
              return false;
            }
        var content=layedits.getContent(index); 
        document.getElementById("content").value=content;//内容 
        var classify=document.getElementById("classify").value;//分类
        if(classify.length==0){
              alert('分类不能为空!');
              return false;
            }
        var prospectus=document.getElementById("prospectus").value;//内容简介
        if(prospectus.length==0){
              alert('内容简介不能为空!');
              return false;
            }
                var photo=document.getElementById("photo").value;//图片上传
                $.ajax({
                url:'/notice/add',
                type:'post',
                dataType:'json',
                data:$('#add').serialize(),//序列化表单
                contenType:'application/json',
                error:function(){
                   alert('输入错误');
               },
                success:function(data){
                if(data!=null){
                    alert('添加成功');
                    location.reload(true);
                    window.location.href='http://localhost:8080/Admin/page/notice/noticeList.html';
                }
               }
            })
            }

4.layui编辑器使用总结

核心组件-layedit.build("XXX");