jquery可定制的在线编辑器

UMeditor，是百度web前端研发部门开发的一款迷你版所见即所得的富文本web编辑器UEditor，具有重量轻、可定制、注重用户体验等特点。允许自由使用和修改代码，适用于前台快速简单的回复框或后台的内容编辑器。

使用方法：

因为这个插件是百度FEX前端R&D团队开发的，而且官方有强大详细的中文文档，所以这篇文章的目的就是让朋友们知道有这么好的插件，所以文档手册、下载和示例都是链接到官方的。下载所需的语言版本，然后解压缩它，并在解压缩的目录中创建一个名为demo的html文件。代码如下。

！DOCTYPE html html head meta charset=' UTF-8 ' title ueditor demo/title/head body！-加载编辑器的容器-脚本id=' container ' name=' content ' type=' text/plain '在此处写入您的初始化内容/脚本！-配置文件-脚本类型=' text/JavaScript ' src=' http : u editor . config . js '/script！-编辑器源代码文件-脚本类型=' text/JavaScript ' src=' http : u editor . all . js '/脚本！-实例化编辑器-脚本类型=' text/JavaScript ' var UE=UE . geteditor(' container ')；/script/body /htmlOK，完成以上工作，用浏览器打开demo.html。如果看到下图，恭喜你，初始部署成功！

怎么用？另一个详细用法：要创建demo.html文件，首先在需要添加编辑器的地方添加以下代码，并使用style设置编辑器的宽度和高度。

脚本类型=' text/plain ' id=' myEditor ' style=' width :98 '；' height:240px'然后，加载与UMeditor相关的js和css文件。相关文件可从本网站下载或直接下载到UMeditor官网下载最新版本。

脚本src=' http :3358 libs . useso.com/js/jquery/2 . 1 . 0/jquery . min . js '/脚本脚本类型=' text/JavaScript ' charset=' utf-8 ' src=' http : umeditor . config . js '/脚本类型=' text/JavaScript ' charset=' utf-8 ' src=' http : umeditor . min . js '/脚本

脚本类型=' text/JavaScript ' var um=um . geteditor(' myEditor ')；/script现在我们可以打开浏览器预览编辑器效果了。自定义选项UMeditor提供了丰富的选项设置，用户可以根据自己的项目需求进行自定义。您可以使用以下代码在编辑器中获取内容，也可以获取纯文本内容。

UM . GetEdeditor(' my editor ')。getContent()；要判断编辑器是否有内容，可以使用以下代码：

var cont=UM.getEditor('myEditor ')。has contents()；If(cont==true){ alert('有内容，'。);}else{ alert ('nothing ')。);}如果将编辑器放入表单并设置动作路径，则可以提交表单并在编辑器中传输内容。例如：

表单操作='server.php '方法='post '脚本id='container '名称='content '类型='text/plain '样式=' width :98 '；' height:240px'在这里写你的初始化内容/script button type=' submit ' class=' BTN ' submit/button/form。我们可以设置工具栏中允许的工具图标。例如，下面是几个常用工具图标的简单定制：

var editor=um . geteditor(' container '，{ toolbar: ['粗体斜体下划线全屏'，' link unlink '，' | justify left justify center justify right justify | '，'情感图像视频|地图']})；UMeditor提供了很多工具，可以根据需求进行定制，如表格编辑、列表布局、多媒体插入、图片上传、地图调用等。UMeditor提供多种语言版本的服务器，主要用于上传图片。用户可以设置上传路径、上传文件类型限制、大小限制等。只要设置它来应用它。

使用效果：

以上就是本文的全部内容，希望能帮助大家更好的利用UMeditor。