百度ueditor获取选中html_UEditor 富文本编辑器的使用

大家做很多后台系统项目大多数都会用到，百度 UEditor 它是由百度 web 前端研发部开发所见即所得富文本 web 编辑器， 简单好用易上手，相对其他百度其他产品 ...... UEditor 对开发者来说还算是良心之作啊，下面分享下百度 UEditor 使用方法，希望对大家有帮助。

1、进入 UEditor 官网下载插件

UEditor 官方网址：http://ueditor.baidu.com/website/index.html

UEditor 下载网址：http://ueditor.baidu.com/website/download.html

直接进入下载页面，Java 的话建议使用 jsp 版本

2、具体使用

下载的文件导入到项目中，文件如下

页面使用必须引入下面文件

<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.config.js}"></script> 
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.all.min.js}"></script

实例化调用编辑器

html 代码如下

<div class="form-group">
	<div class="flexa">
		<label class="control-label">富文本</label>
		<div>
			<textarea id="editor" ></textarea>
		</div>
	</div>
</div>

js 代码如下

		//实例化编辑器
		var ue = UE.getEditor('editor', {
			initialFrameWidth : 800,
			initialFrameHeight : 250,
			elementPathEnabled : false, //删除元素路径
			pasteplain : true, /* 纯文本粘贴 */
			autoHeightEnabled : true,/* 启用右侧滚轮,默认是true自动长高模式*/
			autoFloatEnabled : true,
			toolbars : [ [ 'fullscreen', 'source', '|', 'undo', 'redo', '|',
					'bold', 'italic', 'underline', 'removeformat', '|',
					'insertorderedlist', 'insertunorderedlist', 'indent', '|',
					'justifyleft', 'justifycenter', '|', 'imagenone',
					'imageleft', 'imageright', 'imagecenter', 'insertimage',
					'|', 'link', 'unlink' ] ]
		});
		var uu = UE.getEditor('notice', {
			initialFrameWidth : 800,
			initialFrameHeight : 250,
			elementPathEnabled : false, //删除元素路径
			pasteplain : true, /* 纯文本粘贴 */
			autoHeightEnabled : true,/* 启用右侧滚轮,默认是true自动长高模式*/
			autoFloatEnabled : true,
			toolbars : [ [ 'fullscreen', 'source', '|', 'undo', 'redo', '|',
					'bold', 'italic', 'underline', 'removeformat', '|',
					'insertorderedlist', 'insertunorderedlist', 'indent', '|',
					'justifyleft', 'justifycenter', '|', 'imagenone',
					'imageleft', 'imageright', 'imagecenter', 'insertimage',
					'|', 'link', 'unlink' ] ]
		});

3、效果如下

实现起来很简单，在这里简单记录下抛砖引玉，希望对大家有帮助。

码字不易，转载请注明出处。