编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

前端开发:百度开发的开源所见即所得富文本WEB编辑器(UEditor)

wxchong 2024-06-11 10:14:18 开源技术 27 ℃ 0 评论

UEditor是一个开源(MIT协议)的所见即所得富文本编辑器,由BAT公司之一的百度开发,简单易用、功能强大、可定制。同时它还拥有一个简单的富文本编辑器UMeditor,体积更小,加载速度加快,适合大部分网站对于简单发帖的需求。

1、下载及初始化实例

http://ueditor.baidu.com/website/download.html

开发版为UEditor、mini版为UMeditor,Ubuilder为定制版,按照你的需求选择下载,下载完成后解压把文件放到项目任意位置,在需要富文本编辑器的页面引入ueditor.config.js(配置文件)、ueditor.all.js(编辑器源码文件)、zh-cn.js(中文语言,不必须它会自动加载)三个文件。

然后在body中创建一个加载编辑器的容器,不一定用script可以是其他元素,如textarea等。

最后运行如下脚本,刷新页面一个简单的demo就初始化完成了。

UMeditor初始化基本类似,效果如下,功能少了很多,但是也更加简介,使用更顺畅。

2、功能展示

⑴自定义工具栏

配置toolbars属性自定义工具栏,使用我们需要的功能,不配置则使用ueditor.config.js文件中默认的,完整的按钮列表请前往http://fex.baidu.com/ueditor/#start-toolbar查看。

⑵设置和获取编辑器内容

⑶自定义字体

⑷自定义字号

⑸自定义段落

⑹间距

⑺右键功能

⑻启用禁用

⑼word表格粘贴

⑽上传配置

内置的上传地址,建议自己写,使用内置上传,配置文件在jsp/config.json文件中。

⑾快捷键

⑿数学公式

API文档:

http://fex.baidu.com/ueditor/

github地址:

https://github.com/fex-team/ueditor


ueditor功能非常多,配置方面除了以上的,还有主题、自动保存、tab按键配置、纯文本粘贴过滤等配置;功能有文件、视频、音频、图像等上传、模板使用、表格创建编辑等富文本编辑器基础功能。

有哪里写得不好的地方请大家提出来,请轻喷,谢谢。 同时有什么与编程相关的好东西可以推举给我,再次感谢!

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表