jQueryDay05：ueditor、wangEditor、WebUploader

最新推荐文章于 2023-03-16 19:04:03 发布

'"<>{{7*7}}

最新推荐文章于 2023-03-16 19:04:03 发布

阅读量481

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43415644/article/details/104616214

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

0x00 ueditor

一、初始化配置:

0x01 wangEditor

0x02 WebUploader图片上传插件:

0x00 ueditor

下载地址:http://ueditor.baidu.com/website/

官方文档:http://fex.baidu.com/ueditor/#start-toolbar

找到index.html

保留以下核心代码，其余删除

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="utf8-php/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="utf8-php/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="utf8-php/lang/zh-cn/zh-cn.js"></script>

    <style type="text/css">
        div{
            width:100%;
        }
    </style>
</head>
<body>
<script type="text/plain" id="myEditor" style="width:1000px;height:240px;background: black"></script>

<script type="text/javascript">

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('myEditor');


</script>
</body>
</html>

一、初始化配置:

<script type="text/javascript">

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('myEditor',{
        //设置滚动条
        toolbars: [
        ['fullscreen', 'source', 'undo', 'redo'],
        ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
         ],
         autoHeightEnabled:false, //添加滚动条
         initialFrameWidth:800,//宽度
         initialFrameHeight:500//高度
    });


</script>

UEditor优化：

1.关闭右键菜单，太丑了

2.关闭元素路径

3.手机端宽度自适应：initalFrameWidth:'100%'

4.去除本地保存成功的提示框

    var ue = UE.getEditor('myEditor',{
            //出现滚动条
            autoHeightEnabled:false,
            // 关闭字数统计
            wordCount:false,
            // 关闭右键菜单
            enableContextMenu: false,
            //是否保持工具栏的位置不动
            autoFloatEnabled: false,
            // 关闭元素路径
            elementPathEnabled : false,
            initialFrameWidth: '100%',
            toolbars: [
                    [
                    'emotion', //表情
                    'undo',
                    'redo',
                    'bold',
                    'italic',
                    'simpleupload',
                    'insertimage',
                    ]
            ]
    });  
 //去除本地保存成功提示框
    ue.ready(function () {
                $(".edui-editor-messageholder.edui-default").css({ "visibility": "hidden" });
    });

Ueditor图片上传功能以及修改配置

图片上传功能实际上是给ueditor下的php文件夹下的controller.php发送了一个ajax请求，然后controller.php返回一个响应。

返回响应调用的函数其实是Uploader.class.php中的getFileInfo方法。

然后该controller.php调用了Uploader.class.php

而该类在构造函数中读取了config.json中的配置作为自己的一个成员变量。

也就是要想要修改上传图片大小、图片上传目录等配置，只需要在config.json中进行修改即可。

例如：在app开发过程中，服务端传过来的图片可能没有带域名前缀所以无法显示，可以选择修改config.json中的

0x01 wangEditor

下载地址：http://www.wangeditor.com/

https://www.kancloud.cn/wangfupeng/wangeditor3/335769

找到wangEditor.min.js文件复制到项目目录即可

创建编辑器：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
    <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')
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create()
    </script>
</body>
</html>

图片上传的相关配置:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="wangEditor.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="editor">
    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<input type="submit" value="获取数据" id="getCon">
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.customConfig.uploadImgServer = 'upload.php';
    editor.customConfig.uploadFileName = 'img';
    editor.create()
    $('#getCon').click(function(){
        alert(editor.txt.html());
    })
</script>
</body>
</html>

0x02 WebUploader图片上传插件:

根据文档显示缩略图的坑：

添加：

 $list = $('#uploader-demo');
 var thumbnailWidth=200;
 var thumbnailHeight=200;

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="wangEditor.min.js"></script> -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="webuploader.min.js"></script>
    <link rel="stylesheet" href="./webuploader.css">
</head>
<body>
<div id="uploader-demo">
                <!--用来存放item-->
        <div id="fileList" class="uploader-list"></div>
        <div id="filePicker">选择图片</div>
</div>
<input type="submit" value="开始上传" id="startUp">
<script type="text/javascript">
var uploader = WebUploader.create({

// 选完文件后，是否自动上传。
auto: false,

// swf文件路径
swf: 'Uploader.swf',

// 文件接收服务端。
server: 'upload.php',

// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',

// 只允许选择图片文件。
accept: {
    title: 'Images',
    extensions: 'gif,jpg,jpeg,bmp,png',
    mimeTypes: 'image/*'
}
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
    var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
        $img = $li.find('img');

    $list = $('#uploader-demo');
    // $list为容器jQuery实例
    $list.append( $li );
    var thumbnailWidth=200;
    var thumbnailHeight=200;
    // 创建缩略图
    // 如果为非图片文件，可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 100 x 100
    uploader.makeThumb( file, function( error, src ) {
        if ( error ) {
            $img.replaceWith('<span>不能预览</span>');
            return;
        }

        $img.attr( 'src', src );
    }, thumbnailWidth, thumbnailHeight );
});
// 点击开始上传功能
$("#startUp").click(function(){
    uploader.upload();
})
</script>
</body>
</html>

文件上传成功后用hidden框显示图片地址：

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file,res ) {
    console.log("文件上传成功！");
    $('#uploader-demo').append('<input type="hidden" name="img_url" value='+res.data[0]+'>');
});

'"<>{{7*7}}

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQueryDay05：ueditor、wangEditor、WebUploader

0x00 ueditor下载地址:http://ueditor.baidu.com/website/官方文档:http://fex.baidu.com/ueditor/#start-toolbar找到index.html保留以下核心代码，其余删除<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"...
复制链接

扫一扫

专栏目录