Ueditor的两种定制方式

简介:

引言

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码...

官网:http://ueditor.baidu.com/website/

在线定制:http://ueditor.baidu.com/website/download.html#ubuilder

Asp.Net和Ueditor

在项目中的应用,除非你知道,你需要的富文本框需要哪些功能,你才有可以在线定制,然后下载,但是多数情况下,对需求还是不肯定的,这种情况下,就需要将所有的功能都下载下来,然后根据实际需求,修改配置文件,添加或者移除功能。

在官网中你可以下载:

完整的demo如下:

在应用的时候需要引入:

其中ueditor.config.js就是ueditor的配置文件。找到toolbars(为了方便这里,将toobars重新排版了),这里加了注释,你可以根据需要,将不需要的功能注释,就可以定制你需要的富文本编辑器了。这里lz已添加注释,助于理解。

复制代码
  1 , toolbars: [
  2             [
  3                 'fullscreen'//全屏
  4                 , 'source'//html源代码
  5                 , '|'
  6                 , 'undo'//撤销
  7                 , 'redo'//重做
  8                 , '|'
  9                 , 'bold'//加粗
 10                 , 'italic'//斜体
 11                 , 'underline'//下划线
 12                 , 'fontborder'//字符边框
 13                 , 'strikethrough'//删除线
 14                 , 'superscript'//上标
 15                 , 'subscript'//下标
 16                 , 'removeformat'//清楚格式
 17                 , 'formatmatch'//格式刷
 18                 , 'autotypeset'//自动排版
 19                 , 'blockquote'//引用
 20                 , 'pasteplain'//纯文本粘贴模式
 21                 , '|'
 22                 , 'forecolor'//字体颜色
 23                 , 'backcolor'//背景色
 24                 , 'insertorderedlist'//有序列表
 25                 , 'insertunorderedlist'//无序列表
 26                 , 'selectall'//全选
 27                 , 'cleardoc'//清空文档
 28                 , '|'
 29                 , 'rowspacingtop'//段前距
 30                 , 'rowspacingbottom'//段后距
 31                 , 'lineheight'//行间距
 32                 , '|'
 33                 , 'customstyle'//自定义标题
 34                 , 'paragraph'//段落
 35                 , 'fontfamily'//字体
 36                 , 'fontsize'//字号
 37                 , '|'
 38                 , 'directionalityltr'//从左向右输入
 39                 , 'directionalityrtl'//从右向左输入
 40                 , 'indent'//首行缩进
 41                 , '|'
 42                 , 'justifyleft'//居左对齐
 43                 , 'justifycenter'//居中对齐
 44                 , 'justifyright'//居右对齐
 45                 , 'justifyjustify'//两端对齐
 46                 , '|'
 47                 , 'touppercase'//字母大写
 48                 , 'tolowercase'//字母小写
 49                 , '|'
 50                 , 'link'//超链接
 51                 , 'unlink'//取消链接
 52                 , 'anchor'//锚点
 53                 , '|'
 54                 , 'imagenone'//默认
 55                 , 'imageleft'//左浮动
 56                 , 'imageright'//右浮动
 57                 , 'imagecenter'//居中
 58                 , '|'
 59                 , 'insertimage'//图片
 60                 , 'emotion'//表情
 61                 , 'scrawl'//涂鸦
 62                 , 'insertvideo'//视频
 63                 , 'music'//音乐
 64                 , 'attachment'//附件
 65                 , 'map'//百度地图
 66                 , 'gmap'//google地图
 67                 , 'insertframe'//插入Iframe
 68                 , 'insertcode'//代码语言
 69                 , 'webapp'//百度应用
 70                 , 'pagebreak'//分页
 71                 , 'template'//模版
 72                 , 'background'//背景
 73                 , '|'
 74                 , 'horizontal'//分割线
 75                 , 'date'//日期
 76                 , 'time'//时间
 77                 , 'spechars'//特殊字符
 78                 , 'snapscreen'//截图
 79                 , 'wordimage'//图片转存
 80                 , '|'
 81                 , 'inserttable'//插入表格
 82                 , 'deletetable'//删除表格
 83                 , 'insertparagraphbeforetable'//表格前插入行
 84                 , 'insertrow'//前插入行
 85                 , 'deleterow'//删除行
 86                 , 'insertcol'//前插入列
 87                 , 'deletecol'//删除列
 88                 , 'mergecells'//合并多个单元格
 89                 , 'mergeright'//右合并单元格
 90                 , 'mergedown'//下合并单元格
 91                 , 'splittocells'//完全拆分单元格
 92                 , 'splittorows'//拆分成行
 93                 , 'splittocols'//拆分成列
 94                 , 'charts'//图表
 95                 , '|'
 96                 , 'print'//打印
 97                 , 'preview'//预览
 98                 , 'searchreplace'//查找与替换
 99                 , 'help'//帮助
100                 , 'drafts'//草稿箱
101             ]
102         ]
复制代码

里面的内容,也很好理解,顺序,也是按照ueditor上面按钮的现实顺序排列的。测试,将后面几行注释。

结果

这样,你就可以定制自己希望的功能了。

总结

项目中,有用到,虽然很简单,还是硬着头皮总结了一下,以后会总结一下ueditor在项目中的具体应用。如果您使用过,不妨留个脚印,或者加入楼主的qq群,一起学习,ueditor的使用,个人认为,最头疼的莫过于路径的配置了。

博客地址: http://www.cnblogs.com/wolf-sun/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。

转载:http://www.cnblogs.com/wolf-sun/p/3491260.html
目录
相关文章
|
10月前
|
机器学习/深度学习 存储 人工智能
三问一图万字拆解DeepSeek-R1:训练之道、实力之源与市场之变
本文是作者基于自己的学习经历重新组织的一篇更易于初心者理解的关于DeepSeek的文章,也可以说是作者阶段性的学习笔记。
559 43
三问一图万字拆解DeepSeek-R1:训练之道、实力之源与市场之变
|
安全 Java
unsafe类和varhandle类讲解
本文介绍了Java中的Unsafe类和VarHandle类,展示了Unsafe类如何通过底层操作绕过Java的安全限制直接访问内存和对象,以及VarHandle类如何在Java 9及以上版本中提供原子性和可变性访问。
327 1
unsafe类和varhandle类讲解
|
存储 安全 Android开发
深入探索安卓与iOS的安全性对比
在这篇文章中,我们将深入探讨安卓和iOS两大移动操作系统的安全性。通过比较它们在架构、权限管理、加密技术以及更新机制方面的不同,我们可以更好地理解这两个系统在保护用户数据和隐私方面的表现。文章将揭示一些关键的安全特性,并分析这些特性如何影响用户的日常使用。无论是普通用户还是技术人员,都能从中获得有价值的见解。
861 0
|
存储 Web App开发 Android开发
iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片
iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片
1464 1
iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片
|
存储 前端开发 JavaScript
Next.js 实战 (一):项目搭建指南
这篇文章介绍了作者在2024年下半年计划使用Next.js从零开始搭建一个后台模板,以探索Next.js的奥秘。文章包含了项目搭建、目录结构、APP路由约定、配置Eslint、Prettierrc、Husky等项目提交规范、使用release-it自动管理版本号和生成CHANGELOG、import排序规则、安装NextUI等内容。作者还提到会在开发过程中记录遇到的问题和解决方法,并计划在后期使用Prisma+Supabase数据库存储数据,最终完成一个基于Next.js的全栈项目。
398 0
Next.js 实战 (一):项目搭建指南
|
Python PyTorch 算法框架/工具
PyTorch 2.2 中文官方教程(十二)(2)
流畅的 Python 第二版(GPT 重译)(九)
331 1
|
存储 缓存 数据库
Shiro【核心功能、核心组件、项目搭建 、配置文件认证、数据库认证 】(一)-全面详解(学习总结---从入门到深化)
Shiro【核心功能、核心组件、项目搭建 、配置文件认证、数据库认证 】(一)-全面详解(学习总结---从入门到深化)
750 1
|
XML 存储 Java
Spring高手之路12——BeanDefinitionRegistry与BeanDefinition合并解析
本文深入探讨Spring的BeanDefinition和BeanDefinitionRegistry,详细介绍了BeanDefinition的合并过程及其源码分析,揭示了Spring配置元数据的内在逻辑。读者将通过本文理解Spring Bean定义的继承和重用机制,掌握如何动态注册BeanDefinition。
418 0
Spring高手之路12——BeanDefinitionRegistry与BeanDefinition合并解析
|
安全 Java 编译器
JDK11 介绍讲解,语法改进,API增强
JDK 11进一步完善了JDK 9引入的模块化系统。模块化系统允许开发人员将代码和依赖项组织成模块,以提高可维护性、安全性和性能。开发人员可以使用`module`关键字定义模块,并使用`requires`和`exports`语句来声明模块之间的依赖关系和对外暴露的API。模块化系统还提供了更细粒度的访问控制,可以限制对模块中的内部API的访问。
550 0
|
Ubuntu
Kitti360数据下载(无需科学上网)
Kitti360数据下载(无需科学上网)
2371 0