php-使用wangeditor实现富文本(完成图片上传)-npm

官网参考连接：快速开始 | wangEditor

样式：

一、新建一个临时文件夹test1和一个文件夹wangeditor

• 临时文件夹test1：临时存放通过npm下载的文件
• 文件夹wangeditor：用于存放在临时文件夹test1拷贝的css和js

二、安装 editor

在确保有npm环境的情况下，在终端安装editor

npm install "@wangeditor/editor" --save

 调出终端运行npm install "@wangeditor/editor" --save

安装完成的test1目录

三、找到安装文件中的css和js文件，进行拷贝

 目录

将css和js文件拷贝到文件夹wangeditor

四、选择删除临时文件夹test1

五、代码

前端代码

    *内容
    
        
        

            

            

        
    

引入富文本编辑器样式

引入js

后端接口完成上传图片的功能实现

php

在当前目录中的接口文件夹api中，创建文件demo.php

对用script中的的server: 'api/demo.php',//连接到接口文件，执行数据上传功能

代码

 0,'data'=>array($data));//输出特定样式
        echo json_encode($result);
        } 
    else {
        $result=array('errno'=>1,'message'=>'失败信息');
        echo json_encode($result);
    }
    //创建文件夹 权限问题
    function mkdirs($dir, $mode = 0777){
        if (is_dir($dir) || @mkdir($dir, $mode)) return TRUE;
        if (!mkdirs(dirname($dir), $mode)) return FALSE;
        return @mkdir($dir, $mode);
    }
?>

输出的格式必须按照官网给出的样式才行

案例