如题。

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

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

贴吧地址:ueditor讨论吧

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

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

  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的初始化代码:

  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变小。

Ueditor自定义默认宽度高度的更多相关文章

  1. 百度ueditor上传图片时如何设置默认宽高度

    百度ueditor上传图片时如何设置默认宽高度 一.总结 一句话总结:直接css或者js里面限制一下就好,可以用html全局限制一下图片的最大高度 直接css或者js里面限制一下就好,可以用html全 ...

  2. 富文本编辑器UEditor自定义工具栏(一、基础配置与字体、背景色、行间距、超链接实现)

    导读:UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,功能强大,可定制,是一款优秀的国产在线富文本编辑器,编辑器内可插入图片.音频.视频等. 一.UEditor自定义 ...

  3. 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  4. 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)

    导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...

  5. Ueditor设置默认字体、字号、行间距,添加字体种类(转)

    Ueditor默认字体.字号.行间距的修改: ueditor默认字号是16号,默认字体为sans-serif,默认行间距为5px,如下图所示: 首先,修改ueditor.all.js文件中如上图红框中 ...

  6. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

  7. 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  8. swiper轮播图设置每组显示的个数及自定义slide宽度

    一.html演示代码: <div class="swiper-container"> <div class="swiper-wrapper"& ...

  9. Django和Ueditor自定义存储上传文件的文件名

    django台后默认上传文件名 在不使用分布式文件存储系统等第三方文件存储时,django使用默认的后台ImageField和FileField上传文件名默认使用原文件名,当出现同名时会在后面追加下随 ...

随机推荐

  1. codeforces 278Div1 B题

    虚拟参赛的时候没想到是线段树,看到很多人都过了,也蛮着急的. 首先用二分+线段树的方法更新DP[i]:它表示以A[i]为结尾可以最前到哪个位置: 再用线段树计算ans[i]:它表示当前i个A元素可以最 ...

  2. hdu 1875

    题目很简单,我却WA了几十次,找错误找了我一个小时: 蛋都碎了! 后来发现错误的地方竟然是memset: 用一个循环来替代它就A了:╮(╯▽╰)╭ 今晚回去好好的看看memset!!! 发个代码纪念下 ...

  3. 如何解决C#编译中"csc不是内部或外部命令"的问题

    安装完 VisualStudio 2010编译环境后,是不能用命令行直接编译写好的csc文件的,如果不配置环境变量,在命令提示符(cmd)中编译扩展名为cs的文件,会出现错误提示“csc不是内部或外部 ...

  4. [mock]10月11日

    第二次mock.出的题是,假设有一个地区不能使用7,都用之后的数字代替,比如8代表7,18代表16(中间有7和17).那么给出一个这个地区的数X,求普通地区的数Y.首先是找规律,发现其实就是找给出的数 ...

  5. FFMPEG之TimeBase成员理解

    http://blog.csdn.net/supermanwg/article/details/14521869

  6. Android CoordinatorLayout + AppBarLayout(向上滚动隐藏指定的View)

    在新的Android Support Library里面,新增了CoordinatorLayout, AppBarLayout等. 实现的效果: 向下滚动RecylerView,Tab会被隐藏,向上滚 ...

  7. MVVM_Android-CleanArchitecture

    前言 "Architecture is About Intent, not Frameworks" - Robert C. Martin (Uncle Bob) Uncle Bob ...

  8. [Mac]使用xcode命令行编译protobuf

    因为不想每次测试与画面显示无关的小功能时把cocos2dx包含进去,所以改用xcode的command line tool直接建立c++项目. 方法: 1.点击file-new-project,选择o ...

  9. bzoj1822

    显然是二分+最大流判定但比较烦的是判断线段和圆及其内部是否有公共点我的判断方法是错的,但是数据弱目前只知道推公式分类讨论,如果有简单的方法求教 ; type node=record flow,po,n ...

  10. Java 编程下 Eclipse 如何设置单行代码显示的最大宽度

    Eclipse 下一行代码的默认宽度是 80 , 稍长一点的一行代码就会自动换行,代码可读性较差,我们可以自己在 Eclipse 对代码宽度进行设置. 设置路径为:[Window]→[Preferen ...