ueditor toolbars常用图标的json数组

本文详细介绍了使用UEditor编辑器时,如何配置工具栏的各项功能。包括源代码、撤销、重做等基本操作,以及字体样式、颜色选择、段落格式调整、图片处理、上传与插入等功能的设置方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在用ueditor编辑器,保存一下toolbars的写法吧,编辑器有些功能不常用。

截图如下

config.js 中的toolbars:

toolbars: [[
                'source','undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', '|',
                'forecolor', 'selectall', 'cleardoc', '|',
                'lineheight', 'indent','|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize',
                
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'simpleupload', 'insertimage', 'emotion', 'music', 'attachment', 'insertcode', 'pagebreak', '|',
                'horizontal', '|',
                'preview', 'searchreplace'
            ]]

 

### 配置和实例化UEditor富文本编辑器 #### 实例化过程 为了在网页中使用 UEditor 编辑器,需先引入必要的 JavaScript 文件。通常情况下,在 HTML 页面头部加入如下脚本标签来加载 UEditor 的核心文件[^1]。 ```html <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script> ``` 接着创建一个容器用于承载编辑区域,并调用 `UE.getEditor` 方法完成初始化工作: ```javascript var editor = UE.getEditor('container'); ``` 此处 `'container'` 是指代放置编辑区 DOM 元素 ID 名称。 #### 主要配置项解释 ##### 基础设置 - **serverUrl**: 设置服务器端处理接口地址,对于上传等功能至关重要。 - **initialFrameWidth / initialFrameHeight**: 定义初始宽度高度,默认单位像素(px),也可以设为百分比形式适应不同屏幕尺寸[^2]。 ##### 功能模块控制 - **toolbars**: 自定义工具栏按钮布局,接受二维数组参数指定各行列显示哪些功能图标;例如只保留基本排版命令可这样写: ```json toolbars:[ ['bold', 'italic', 'underline'] ] ``` - **autoFloatEnabled**: 是否开启浮动定位模式,当页面滚动时保持编辑框位置不变[^3]。 ##### 插入内容格式调整 针对从外部文档(如 Word)拷贝过来的内容做特殊优化,确保粘贴后的样式尽可能还原原文档效果: - **pasteplain**: 默认值 false 表示允许带格式粘贴;true 则强制纯文本输入。 - **wordPasteFlag**: 开启此开关后会尝试解析来自 Office 应用程序的数据流,从而更好地兼容复杂对象比如表格、图片等. 更多高级特性以及完整的 API 文档建议查阅官方手册获取最新最全的信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值