当前位置: 首页 > 编程笔记 >

基于jquery实现可定制的web在线富文本编辑器附源码下载

刘狐若
2023-03-14
本文向大家介绍基于jquery实现可定制的web在线富文本编辑器附源码下载,包括了基于jquery实现可定制的web在线富文本编辑器附源码下载的使用技巧和注意事项,需要的朋友参考一下

今天给大家介绍一款非常棒的WEB在线富文本编辑器——UMeditor,它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器,具有轻量,可定制,注重用户体验等特点,允许自由使用和修改代码,适用于前台快速简单回复框或后台内容编辑器。

在线预览     源码下载

如何使用?

建立一个demo.html文件,首先在需要添加编辑器的地方加入以下代码,使用style可以设置编辑器的宽度和高度。

<script type="text/plain" id="myEditor" style="width:98%;height:240px;"> 
 <p>内容区域</p> 
</script> 

然后,将UMeditor相关js和css文件加载。相关文件可以在本站下载或者直接到UMeditor官网下载最新版本。

<script src="http://libs.useso.com/js/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="umeditor.config.js"></script> 
<script type="text/javascript" charset="utf-8" src="umeditor.min.js"></script> 
<link href="themes/default/css/umeditor.min.css" type="text/css" rel="stylesheet"> 

接下来,我们开始调用编辑器:

<script type="text/javascript"> 
 var um = UM.getEditor('myEditor'); 
</script> 

现在我们可以打开浏览器预览编辑器效果了。

定制选项

UMeditor提供了丰富的选项设置,用户可以根据自己项目需求适当定制。

获取编辑器里的内容可以使用如下代码,你还可以获取纯文本内容。


UM.getEditor('myEditor').getContent(); 

判断编辑器是否有内容,可以使用如下代码:

 var cont = UM.getEditor('myEditor').hasContents(); 
 if(cont==true){ 
  alert('有内容。'); 
 }else{ 
  alert('无内容。'); 
 } 

如果把编辑器放入表单form中,设置好action路径,就可以提交表单传送编辑器里的内容了。如:

<form action="server.php" method="post"> 
 <script id="container" name="content" type="text/plain" style="width:98%;height:240px;">这里写你的初始化内容</script> 
 <button type="submit" class="btn">提交</button> 
</form> 

我们可以设置工具栏里允许使用的工具图标,如以下是简单的定制几个常用的工具图标:

var editor = UM.getEditor('container',{ 
 toolbar: 
  ['bold italic underline fullscreen', 'link unlink','| justifyleft justifycenter justifyright justifyjustify |', 'emotion image video | map'] 
}); 

UMeditor提供了许多工具,可以根据需求定制,如表格编辑、列表布局、多媒体插入、图片上传、地图调用等等。UMeditor提供了服务端的几种语言版本,主要是用于上传图片的处理。用户可以设置上传路径、上传文件类型限制、大小限制等等。只需设置一下即可应用。

 类似资料:
  • 本文向大家介绍基于jQuery实现的扇形定时器附源码下载,包括了基于jQuery实现的扇形定时器附源码下载的使用技巧和注意事项,需要的朋友参考一下 效果图如下所示: 效果演示  源码下载 Pietimer是一个可以在页面上生成一个扇形变化的定时器,它基于jQuery,可以自定义定时时间秒数,自定义扇形的颜色、宽度和高度等,并且支持定时结束时回调函数,可以控制开始和暂停,适用于需要定时器的页面如在线

  • 本文向大家介绍jQuery实现可以编辑的表格实例详解【附demo源码下载】,包括了jQuery实现可以编辑的表格实例详解【附demo源码下载】的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现可以编辑的表格。分享给大家供大家参考,具体如下: 今天小编主要给大家讲解一下,如何利用jQuery+js+css实现表格的编辑。接下来,小编就简单总结一下如何实现这个小例子。 第一步:编

  • Django集成UEditor (封装成应用) 百度富文本编辑器 http://ueditor.baidu.com/website/ 使用效果 测试环境 ubuntu 16.04 python3.5.2 django1.11.7 目前测试解决了出现的以下两个问题,都是python版本问题 error1 # name 'file' is not defined controller.py 68行

  • 本文向大家介绍基于jQuery实现选取月份插件附源码下载,包括了基于jQuery实现选取月份插件附源码下载的使用技巧和注意事项,需要的朋友参考一下 这是一个基于jQuery的可以选择年份和月份的月份拾取插件,你可以设置点击页面上的任意元素触发弹出年月选择面板,可以是一个链接也可以是一个输入框,广泛应用于月份查询,而无需设置select表单。 效果展示        源码下载   HTML 首先将m

  • 本文向大家介绍iOS实现富文本编辑器的方法详解,包括了iOS实现富文本编辑器的方法详解的使用技巧和注意事项,需要的朋友参考一下 前言 富文本编辑器不同于文本编辑器,国内做的比较好的比如有百度的UEditor和kindEditor。但是这两个也有它的缺点:界面过于复杂、不够简洁、UI设计也比较落后、不够轻量化,这篇文章我们将给大家介绍利用iOS如何实现富文本编辑器。 实现的效果 解决思路 采用web

  • 本文向大家介绍基于jQuery和CSS3制作数字时钟附源码下载(jquery篇),包括了基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,先给大家展示下效果图,感兴趣的朋友继续往下看 哦 查看演示       源码下载 HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>