第2课：uediotr工具栏的定制

最新推荐文章于 2023-12-22 16:21:20 发布

李书明

最新推荐文章于 2023-12-22 16:21:20 发布

阅读量387

点赞数 1

分类专栏： ueditor

本文链接：https://blog.csdn.net/lsmxx/article/details/102465090

版权

ueditor 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

UEditor 工具栏上的按钮列表可以自定义配置,只需要通过修改配置项就可以实现需求

下面看一个示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<form action="demo.php" method="post">
    <div>
        <label>标题</label>
        <input type="text" name="title">
    </div>
    <div>
        <label>正文</label>
        <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
    </div>
    <div>
        <input type="submit" value="保存">
    </div>
</form>

<script>
    var ue = UE.getEditor('editor', {
        toolbars: [
            ['fullscreen', 'source', 'undo', 'redo', 'bold']
        ],
        autoHeightEnabled: true,
        autoFloatEnabled: true
    });

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

运行的结果如下

从上面的运行结果来看，ueditor的工具栏变成了一行，并且只有五个图标，分别是最大化、源代码、撤消、重做、粗体。实现这样的效果主要通后以下代码实现的
toolbars: [
    ['fullscreen', 'source', 'undo', 'redo', 'bold']
],

如果想实现多行的工具栏，可以写成以下代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<form action="demo.php" method="post">
    <div>
        <label>标题</label>
        <input type="text" name="title">
    </div>
    <div>
        <label>正文</label>
        <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
    </div>
    <div>
        <input type="submit" value="保存">
    </div>
</form>

<script>
    var ue = UE.getEditor('editor', {
        toolbars: [
            ['fullscreen', 'source', 'undo', 'redo'],
            ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
        ],
        autoHeightEnabled: true,
        autoFloatEnabled: true
    });

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

运行的效果如下：

如果不写toolbars，默认所有功能都有

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<form action="demo.php" method="post">
    <div>
        <label>标题</label>
        <input type="text" name="title">
    </div>
    <div>
        <label>正文</label>
        <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
    </div>
    <div>
        <input type="submit" value="保存">
    </div>
</form>

<script>
    var ue = UE.getEditor('editor', {
        autoHeightEnabled: true,
        autoFloatEnabled: true
    });

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

运行效果如下：