QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

鱼友Ⅰ

Rank: 2Rank: 2

积分
166
查看: 126|回复: 0

[技术交流] js引入富文本编辑器(ueditor)

[复制链接]
最佳答案
6 
累计签到:63 天
连续签到:1 天
流浪1123 发表于 2017-10-12 17:53:26 1260 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 流浪1123 于 2017-10-13 10:43 编辑

有时我们希望我们能集成富文本编辑器。
富文本编辑器:
UMeditor,简称UM,是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑器。 UM的主要特点就是容量和加载速度上的改变,主文件的代码量为139k,而且放弃了使用传统的iframe模式,采用了div的加载方式, 以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧,贴吧每天几亿的pv是对UM各种指标的最好测试平台。 当然随着代码的减少,UM的功能对于UE来说还是有所减少,但我们经过调研和大家对于UM提出的各种意见,提供了现在UM的功能版本, 虽然有删减,但也有增加,比如拖拽图片上传,chrome的图片拖动改变大小等。让UM能在功能和体积上达到一个平衡。UM还会提供 CDN方式,减少大家部署的成本。我们的目标不仅是要提高在线编辑的编辑体验,也希望能改变前端技术中关于富文本技术的门槛,让大家不再觉得这块是个大坑。
========================================================以上来自开源的ueditor.baidu.com

                               
登录/注册后可看大图

这里我们将在我们的项目中集成这个编辑器!
这里我集成的ueditor如下:
jc.jpg
1.下载对应的编辑器源码
UEditor - 下载  http://ueditor.baidu.com/website/download.html
去对应的界面找到你的语言支持的源代码!
放到对应的文件夹下即可!(就是你的网页的根文件夹目录下)
2.引入js文件

  1.     <script type="text/javascript" charset="utf-8" src="/carshop/Public/ueditor/ueditor.config.js"></script>
  2.     <script type="text/javascript" charset="utf-8" src="/carshop/Public/ueditor/ueditor.all.min.js"> </script>
  3.     <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
  4.     <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
  5.     <script type="text/javascript" charset="utf-8" src="/carshop/Public/ueditor/lang/zh-cn/zh-cn.js"></script>
复制代码

3.写一小段js

  1. <script type="text/javascript">

  2.     //实例化编辑器
  3.     //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
  4.     //initialFrameWidth:1000,initialFrameHeight:320分别表示宽度和高度1000*320
  5.     UE.getEditor('content',{initialFrameWidth:1000,initialFrameHeight:320});

  6. </script>
复制代码

这样要注意content需要与引入对象的name字段的值
如:
  1.                             <tr>
  2.                                 <th>内容:</th>
  3.                                 <td><textarea name="content" class="common-textarea" id="content" cols="30" style="width: 98%;" rows="10"></textarea></td>
  4.                             </tr>
  5.                             <tr>
复制代码


整个的引入就是这么的简单!
楼层
跳转到指定楼层

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /2 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2017-12-16 19:08

快速回复 返回顶部 返回列表