富文本_UEditor 富文本编辑器的使用-白红宇

富文本_UEditor 富文本编辑器的使用

阅读量：4964 次

发布时间：2019-06-12

本文共 346 字，大约阅读时间需要 1 分钟。

大家做很多后台系统项目大多数都会用到，百度 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、具体使用

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

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

实例化调用编辑器

html 代码如下


     	
      		
       富文本

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、效果如下

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

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

你可能感兴趣的文章