Ueditor自定义默认宽度高度

如题。

        最近需要使用到网页后台富文本编辑器。经过同学推荐,最后决定使用百度家的Ueditor.

官方地址:http://ueditor.baidu.com/website/

贴吧地址:ueditor讨论吧

官方提供了网页上非常方便的自定义工具栏的功能。自定义之后直接下载对应的代码包并按照文档部署到项目中即可。其中主要的问题是路径的配置。

首先是将下载好的代码包发布到我们项目的根目录下面。然后在需要添加富文本编辑器的页面头部添加如下代码:

        

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <script type="text/javascript" src="相对该文档的路径/ueditor/ueditor.config.js"></script>  
  2. <script type="text/javascript" src="相对该文档的路径/ueditor/ueditor.all.js"></script>  
  3. <script>  
  4. <span style="white-space:pre">  </span>window.UEDITOR_HOME_URL = "/项目相对网址池绝对路径/ueditor";  
  5. </script>  

配置路径这一块是非常重要的。特别是下面的Ueditor的路径,是相对我们整个代码库的目录的。

 

配置完成之后,直接在我们网页中的<textarea>标签下面添加ueditor的初始化代码:

 

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <script type="text/javascript">  
  2.     var editor = new UE.ui.Editor({initialFrameHeight:100,initialFrameWidth:400 });  
  3.         editor.render("actDescribe");  
  4. </script>  

 

官方的文档并没有给出如何设置ueditor的宽度和高度的说明。这是我在网上网友那里找到的解决方法。在声明编辑器的变量的时候,在参数列表中添加对initialFrameHeight和initialFrameWidth的设置即可。注意,数值后面不需要添加px。

 

 

可是,这种方法有时候奏效有时候也不奏效,因为我碰过一种情况就是无论如何调整initialHeight和initialWidth的数值,编辑器的大小都还是不会改变。这个时候,我发现,可以通过调整editor所跟随的textarea的宽高来撑开editor的大小。这也是一种方法,各位同学在官方说明文档出来之前可以两种方法都尝试一下。

 

当然,好用的文本编辑器还是有很多的,例如kindeditor,之前准备使用这个的,而其文档方面也比较齐全,同时,整个编辑器的size也比较小,对网页的加载速度比较有利。百度的Ueditor还是有点庞大。加载时会有卡顿的速度。估计是我对底层代码的研究不够,多了很多不必要的内容。慢慢研究或许可以使得Ueditor变小。

posted @   郑文亮  阅读(47185)  评论(1编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
历史上的今天:
2013-03-06 成功运行samba(已验证)
2013-03-06 虚拟机和主机之间文本的复制和粘贴
2012-03-06 div中的相对定位与绝对定位(转)
2012-03-06 用ul和li实现表格table效果 (转)
2012-03-06 css display 的用法
2012-03-06 js鼠标滑过弹出层的定位bug解决办法(转)
2012-03-06 软件外包的几个网址
点击右上角即可分享
微信分享提示