使用富文本编辑器插件实现上传图片功能

1.安装

富文本编辑器地址 这是文档地址，进去可以看到如下的页面

演示，下载，文档功能都有

进去下载

 下载并解压完成后的目录

 把这些文件都放在你需要使用的项目下面，asp,asp.net,jsp,php这些是服务端程序，因为你得结合自己的服务端，所以这些可以不要

可以在自己的项目下面新建一个目录 editor 比如我的方式

 2.使用（你也可以看文档使用）

在需要使用的html页面添加如下代码

    


        欢迎使用
    

效果图如下：

options为参数配置，各种参数作用在官网文档里面有，上面这些配置是基础配置

3.上传图片或其他文件的一些注意事项

我这里只使用了上传图片来做演示

uploadJson 参数是声明文件上传地址

报错：alwaysin a frame because it set 'X-Frame-Options' to 'deny'.

意思是不能在其他iframe上传文件

解决办法

参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options

我使用的是nginx来做代理，如果你是其他的就另寻办法吧

将下面代码添加到nginx.conf里面的 'http', 'server' 或者 'location' 模块中

add_header X-Frame-Options sameorigin always;

 假如还会报错，且报错信息如下：

in a frame because it set multiple 'X-Frame-Options' headers with conflicting values ('DENY, sameorigin'). Falling back to 'deny'.

有可能是因为在其他地方又设置了X-Frame-Options为deny

解决办法：

参考：https://blog.csdn.net/weixin_34345560/article/details/91659548?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

同样在nginx.conf里面的 'http', 'server' 或者 'location' 模块中添加一段代码：

而且是在add_header X-Frame-Options sameorigin always;上面添加

proxy_hide_header X-Frame-Options;

后台报null，即传过来的文件为空

这是因为传到后台的文件初始名为imgFile

需要我们自己在options里添加一个设置

filePostName: "file", //改成与后台对应的名字就行了

上传图片成功后没有执行uploadJson函数，而是弹出一个alert（“成功”）

不仅文件名要对应，连后台返回的数据也要对应

后台需要返回的格式如下

//成功时
{
        "error" : 0,
        "url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
        "error" : 1,
        "message" : "错误信息"
}

再看源码：

 左边红框框是告诉你在哪个位置

右边大的红框框是上传图片成功后的执行逻辑

不解释了，一看便懂

如果要改成我们自己的返回格式也很简单，在这段逻辑里面改一下就行了，如下