百度WEB前端设计部推出一款开源的编辑器UEditor http://ueditor.baidu.com/index.html,这款编辑器相当强大,它提供了百度地图,google地图和视频等一些非常强大的功能 ,毕竟是国内大企业肯定是要关注的。
在ueditor1.1.5版本的使用很简单
1、包含头文件
<link href="../themes/default/ueditor.css" rel="stylesheet" type="text/css" />
<script src="../editor_config.js" type="text/javascript"></script>
<script src="../editor_ui_all.js" type="text/javascript"></script>
将入口的js文件和css文件包含进来
2、html代码
<form action="add.php" method="POST" >
<textarea id="editor" ></textarea> <!--内容输入框 注意id的命名-->
<script language="javascript" type="text/javascript"> <!-- UEditor -->
var editor = new baidu.editor.ui.Editor(); <!--new一个对象,通过对象创建编辑器-->
editor.render("editor");<!--出入参数editor为textarea中的id值,并生成编辑器-->
</script>
<input type="submit" name="sub"/>
</form>
3、服务器接收数据
我的form表单中提交到add.php文件中,在add.php中通过$_POST接收编辑器传入的数据(asp、jsp也是一样的,只是提交到服务器的文件不一样)。
UEditor对编辑器编辑的内容有一个默认的名editorValue,所以可以通过$_POST['editorValue']接受出过来的数据。
以上就完成了对UEditor的配置
4、其他问题
1、如果你需要设置UEditor的一些参数的话,只要在HTML代码中的js片段断码加以修改
<script language="javascript" type="text/javascript">
var option = {
initialContent: '在编辑器中默认显示的内容', //初始化编辑器的内容
minFrameHeight: 200, //设置高度
textarea: 'content' //设置提交时编辑器内容的名字,之前我们用的名字是默认的editorValue
};
var editor = new baidu.editor.ui.Editor(option); //将设置初始化(之前的配置采用的是默认的,所以没有传参数)
editor.render("editor");
</script>
2、如果你的UEditor都弄好了,但是发现百度地图、google地图、视屏、表情都无法正常显示,问题可能是你的UEditor文件没有放在你的跟目录下,
但调用的文件是在根目录下(只要你调用UEditor的文件和UEditor文件没有放在同一级文件夹下面)。这是因为UEditor是根据相对路径来确定
调用自身的其他文件的,如果改成绝对路劲就可以解决这个问题了。
解决:
在UEditor(不一定是这个名称,看你命名是哪个就是哪个)文件夹下,有个配置文件editor_config.js,在里面可以更改配置信息。
更改"UEDITOR_HOME_URL"这个值,改为UEditor这个文件夹得在服务器下的绝对路径
例如:
UEDITOR_HOME_URL:'http://localhost/QingBlog/pm-static/UEditor/', //这里你可以配置成ueditor目录在您网站的绝对路径
OK 啦!
分享到:
相关推荐
百度UEditor使用说明 百度UEditor是中国搜索引擎巨头百度公司推出的富文本编辑器,旨在帮助开发者快速构建富文本编辑功能。下面是关于百度UEditor使用说明的详细知识点总结: 一、UEditor的下载和安装 在使用百度...
**百度UEditor使用心得** 百度UEditor是一款由百度公司开发的富文本编辑器,它专为Web开发者设计,提供了一套完整的在线文本编辑解决方案。这款编辑器以其强大的功能、易于集成和高度可定制性,受到了广大开发者的...
【百度Ueditor使用详解】 Ueditor是由百度开发的一款强大的Web富文本编辑器,它提供了丰富的功能,便于用户在网页上创建、编辑和格式化文本。本文将深入探讨如何使用和二次开发Ueditor。 **一、Ueditor的部署与...
百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器
在本文中,我们将深入探讨如何将Spring Boot、Thymeleaf和百度Ueditor进行整合,以便在Web应用程序中实现一个功能强大的富文本编辑器。这个集成的Demo将帮助开发者解决后端配置问题,确保文件上传功能正常运行。 ...
在"百度Ueditor最新版使用实例"中,我们可以学习到如何有效地利用这个编辑器来提升用户体验,以及如何进行配置和优化。 首先,要理解百度Ueditor的基本架构。它由前端界面和后端服务两部分组成。前端负责展示编辑器...
**百度UEditor官方包详解** 百度UEditor是一款由百度公司开发的开源富文本编辑器,它为网页开发者提供了强大的在线文字编辑功能。该编辑器以其稳定性、易用性和丰富的功能集而广受好评,适用于各类网站和应用的后台...
这个"百度ueditor完整包"包含了所有必要的组件和资源,使得用户能够在自己的网站上快速集成并使用这款编辑器。 UEditor的主要特点在于它的易用性和灵活性。它支持多种格式的文字输入,如HTML、Markdown等,同时提供...
**百度UEditor编辑器详解** 百度UEditor是一款由百度公司开发的专业级富文本编辑器,它以其强大功能和易用性在Web应用中广受欢迎。UEditor专为满足现代网络编辑需求而设计,提供丰富的文本格式化选项,支持多媒体...
**百度Ueditor** 百度Ueditor是一款由百度公司开发的开源富文本在线编辑器,它专为Web应用设计,提供了一种简洁、高效的HTML文本编辑体验。这个编辑器以易用性和强大功能著称,广泛应用于各类网站、博客、论坛以及...
【百度UEditor编辑器JSP版本详解】 UEditor是由百度公司旗下的Web前端研发部精心打造的一款强大而易用的富文本Web编辑器。其主要目标是提供一个轻量级、高性能且用户友好的编辑工具,使得用户在网页上能够轻松进行...
综合来看,这个"asp.net 百度UEditorDemo"项目是一个使用ASP.NET和.NET Framework 4.0开发的Web应用示例,主要展示了如何在VS2010 SP1环境下集成和使用百度UEditor这个富文本编辑器,以提供用户友好的在线文本编辑...
百度Ueditor是一款强大的在线编辑器,它提供了丰富的功能,包括图片上传、表格制作、代码编辑等。在本案例中,我们关注的是"百度ueditor编辑器的word导入功能",特别是在ASP.NET环境下。 百度Ueditor的Word导入功能...
wrap组件时导入的百度ueditor资源包,如果要恢复百度ueditor图片组件的功能,就去UEditor/dialogs/image/image.html 里面取消屏蔽23,24,25行代码,如果需要查看组件使用放法,请去我主页查看:uve 使用百度ueditor自定义...
**百度UEditor详解** 百度UEditor是一款由百度公司前端研发部精心打造的Web富文本编辑器,它在设计上强调了轻量化、可定制以及优秀的用户体验。作为一个开源项目,UEditor遵循MIT协议,这意味着用户可以自由地使用...
**百度UEditor简介** 百度UEditor是一款由百度公司开发的开源富文本编辑器,它专为Web应用设计,提供了一种简单、高效的在线文本编辑体验。UEditor支持多种功能,如图片上传、视频插入、表格操作、代码高亮等,广泛...
百度UEditor是一款功能强大的开源富文本编辑器,而135编辑器则是另一种广受欢迎的在线图文编辑工具。当我们需要将两者整合时,通常是为了利用135编辑器的丰富样式和模板资源来增强UEditor的功能。以下是对“百度...
通过以上介绍,我们可以看到百度Ueditor是一个功能强大、易于使用的在线富文本编辑器,无论是个人博客还是企业级项目,都能从中受益。其完善的API文档和丰富的示例代码,使得开发者能够快速地进行集成和二次开发,...