wangEditor富文本编辑器图片上传到本地

最新推荐文章于 2024-04-05 11:50:40 发布

从兄

最新推荐文章于 2024-04-05 11:50:40 发布

阅读量880

点赞数

分类专栏： html thinkphp 上传文章标签： php html5 html javascript

原文链接：https://www.jianshu.com/p/9eb5bddc4bc0

版权

thinkphp 同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

html

20 篇文章 0 订阅

订阅专栏

上传

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>ueditor-demo</title>
    <script src="/js/jquery-1.7.1.min.js'"></script>
</head>
<body>
<h2>wangEditor</h2>
 
<div id="editor">
    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
 
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor;
    var editor = new E('#editor');
 
    //开启debug模式
    editor.customConfig.debug = true;
    // 关闭粘贴内容中的样式
    editor.customConfig.pasteFilterStyle = false
    // 忽略粘贴内容中的图片
    editor.customConfig.pasteIgnoreImg = true
    // 使用 base64 保存图片
    //editor.customConfig.uploadImgShowBase64 = true
 
 
    editor.customConfig.uploadFileName = "file";
    editor.customConfig.uploadImgServer = '/fileUpload';
    editor.customConfig.debug = true;
 
    //自定义上传图片事件
    editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
 
        },
        success: function (xhr, editor, result) {
            console.log("上传成功");
        },
        fail: function (xhr, editor, result) {
            console.log("上传失败,原因是" + result);
        },
        error: function (xhr, editor) {
            console.log("上传出错");
        },
        timeout: function (xhr, editor) {
            console.log("上传超时");
        },
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 服务器端返回
            var url = result.url;
            insertImg(url)
 
            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
 
    };
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.create()
</script>
 
</body>
 
</html>

从兄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
wangEditor富文本编辑器图片上传到本地

<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"/> <title>ueditor-demo</title> <script src="/js/jquery-1.7.1.min.js'"></script></head><.
复制链接

扫一扫