`

ueditor-百度可视化编辑器简单使用方法

阅读更多

1、ueditor是百度可视化编辑工具

 

2、ueditor官网地址

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

 

3、开发步逐

    1、在官网上下载最新版本的jsp版本

图1


    2、将下载的压缩文件解压,改文件夹名称为“ueditor”;

    3、创建“ueditorTest”项目,ueditor添加到项目中;

    4、项目目录如下


 图2

    5、将ueditor\jsp\lib目录下的jar复制到项目lib目录下(这里是做后台配置的jar),然后ueditor\jsp\lib可以删除。

    6、创建”ueditorTest.jsp“页面测试

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>提示</title>
	
	<!--使用ueditor需要导入的js-->
	<script type="text/javascript" src="common/js/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" src="common/js/ueditor/ueditor.all.min.js"></script>
	<script type="text/javascript" src="common/js/ueditor/lang/zh-cn/zh-cn.js"></script>
	
	<style type="text/css">
	    #div_1 {
			border: thin none #069;
			padding: 1px;
			float: none;
			width: 500px;
			height: 300px;
			background-color: #9C6;
		}
    </style>
</head>
<body>
	<!-- 加载编辑器的容器 -->
    	<script id="container" name="content" type="text/plain"> </script>
	<script type="text/javascript">
		//<!-- 实例化编辑器 -->
		var ue = UE.getEditor('container');
		
    	function test(){
    		//获取html内容,返回: <p>hello</p>
   			var html = ue.getContent();
   		 	//获取纯文本内容,返回: hello
			var txt = ue.getContentTxt();
			
			alert(html);
			alert(txt);
    	}
	</script>
	
	<input type="button" value="测试" name="ceshi" onClick="test();"/>
</body>
</html>

   

    效果图:

图3 

    说明:

          1、上传图片、附件、截图存放路径在“ueditor/jsp/config.json”配置,如果没有配置会根据默认配置在工程下自动创建目录;

          2、"ueditor\jsp\controller.jsp",为ueditor配置项入口;

          3、ueditor\jsp\lib存放后台配置的jar,使用是须将该目录下的jar负责到项目中;

 

5、ueditor使用小心得

      1、实例化时设置一些初始话值

// 实例化编辑器
var ue = UE.getEditor('content',{
	initialFrameWidth :590,//设置编辑器宽度
	initialFrameHeight:400,//设置编辑器高度
	scaleEnabled:false
});

      2、直接赋值

<!--必须要在js里初始化编辑器-->
<td align="left" colspan="3">
	<script id="content" name="content" type="text/plain"> 
		${news.content}
	</script>	 			
</td>

    3、关闭编辑其自动增长,在ueditor.config.js配置文件中将autoHeightEnabled: true 修改为false即可。
                                                                                                图6

    

 

  • 大小: 79.1 KB
  • 大小: 26.9 KB
  • 大小: 30.6 KB
  • 大小: 73.3 KB
分享到:
评论

相关推荐

    百度富文本编辑器jar ueditor-1.1.2.jar

    ueditor-1.1.2 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 UEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本

    百度编辑器 ueditor-1.4.3.3版本 php版本

    《百度编辑器ueditor-1.4.3.3版本:多语言开发的网页富文本解决方案》 百度编辑器(ueditor)是一款广泛应用于网页端的富文本编辑器,其1.4.3.3版本提供了强大的功能和良好的用户体验。这款编辑器不仅支持PHP,还...

    ueditor-1.1.2

    开发者通过集成UEditor,可以将传统的多行文本输入框(textarea)无缝升级为功能丰富的可视化编辑区域,使得非技术背景的用户也能轻松进行图文混排、格式调整等复杂的编辑任务。 UEditor的核心特性包括: 1. **...

    UEditor公式编辑器 UEditor、mathquill集成公式编辑器

    1. **UEditor**:UEditor是由百度开发的一款开源的富文本Web编辑器,它提供了丰富的API和插件支持,可满足各种复杂的编辑需求。UEditor的设计目标是轻量级、高性能和易用性,使得开发者能够轻松地将其集成到自己的...

    com.baidu.ueditor-1.1.2-offical.jar

    com.baidu.ueditor-1.1.2-offical ueditor-1.1.2 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 UEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本

    百度编辑器ueditor.zip

    百度编辑器ueditor是一款功能强大的富文本在线编辑器,广泛应用于网站内容管理、博客、论坛等场景,为用户提供了一个便捷的可视化编辑环境。ueditor以其易用性、灵活性和丰富的功能,深受开发者喜爱。在下载并解压...

    可视化文本富文本编辑器

    2. **初始化编辑器**:在HTML页面中设定编辑器容器,并调用ueditor的初始化方法。 3. **配置参数**:根据实际需求,设置编辑器的配置参数,如工具栏、图片上传路径等。 4. **交互处理**:利用提供的API进行事件...

    UEditor可视化编辑

    **UEditor可视化编辑器详解** UEditor是一款由百度公司开发的强大的富文本在线编辑器,它以其丰富的功能、良好的用户体验和高性能的特点,在Web应用中得到了广泛应用。UEditor是一款基于JavaScript语言的开源插件,...

    可视化编辑器ueditor1

    可视化编辑器ueditor1是基于JavaScript的富文本编辑器,主要应用于网页内容的创建和编辑。在Flask框架和Python环境中,ueditor1可以被整合到Web应用中,提供用户友好的文字编辑体验。以下是对ueditor1及其配置的详细...

    百度UEditor HTML编辑器,

    - **可视化编辑**:UEditor通过模拟常见的桌面文字处理软件界面,让用户可以直接在浏览器中进行文字排版、插入图片、表格、链接等操作,无需编写HTML代码。 - **富文本支持**:支持多种富文本格式,如字体、字号、...

    百度编辑器UEditor Asp版.7z

    Ueditor是由百度Web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点。Ueditor基于BSD开源协议,除了具有代码精简、加载迅速的轻量级特质外,还采用了分层理念,使开发者可以根据实际应用和...

    百度富文本编辑器ueditor java引入.zip

    UEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 UEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本编辑器,这是java版,包含html段及js,以及前端文件...

    uedotor引入tinymce-formal公式插件的例子的编辑器.zip Latex 公式在线可视化编辑器

    首先,"ueditor引入tinymce-formal公式插件的例子"意味着这个项目演示了如何在ueditor中集成tinymce的正式版本,以实现LaTeX公式的在线可视化编辑。这通常涉及到编辑器的自定义配置,将tinymce-formal插件引入...

    ueditor1_4_3-utf8-jsp.zip

    UEditor 是百度推出的一款开源的富文本编辑器,其在 Web 开发领域具有广泛的应用,尤其在内容管理系统(CMS)、论坛、博客等场景下,UEditor 以其强大的功能和良好的用户体验受到开发者的青睐。本文将深入探讨 ...

    基于PHP的caozha UEditor(富文本编辑器).zip

    这种编辑器通常用于网站后台的新闻编辑、文章发布、论坛发帖等,提供了一种方便的可视化编辑方式,使得非专业程序员也能轻松编辑出结构化的、美观的内容。 【压缩包文件】:132699603295982425可能是压缩包内的一个...

    基于SSM使用ueditor编辑框文本、图片上传功能实现

    ueditor是由百度开发的一款开源的富文本在线编辑器,提供了丰富的API和配置选项,支持多种文本格式,以及图片、视频、表格等多媒体元素的插入和上传。它在网页端提供了良好的用户体验,广泛应用于博客、论坛、CMS...

    百度 富文本 编辑器 Ueditor 最新 2013年10月版

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码... 涵盖流行富文本编辑器特色功能,独创多种全新编辑操作模式。 ...

    dokuwiki编辑器修改版

    dokuwiki编辑器修改版 采用heditor编辑器,支持QQ截图直接拷贝到编辑器(这个功能只支持谷歌...wiki语法很蛋疼,有了这个可视化编辑器,就好了.创建页面同样可以使用wiki语法 同时还有提供代码高亮功能,骚年们,你还在等神马

    富文本编辑器

    4. 初始化编辑器,指定容器ID和相关配置项。 5. 调用编辑器提供的API进行交互,如获取或设置编辑器内容。 总的来说,富文本编辑器是Web开发中提高用户体验的重要工具,ueditor以其强大的功能和易用性,成为许多...

Global site tag (gtag.js) - Google Analytics