`
xlaohe1
  • 浏览: 128591 次
  • 性别: Icon_minigender_1
  • 来自: 来处
社区版块
存档分类
最新评论

jquery cleditor 富文本编辑器textarea大小设置

阅读更多
// 初始化整个cleditor的高度,宽度默认大小
$('#textarea-id').cleditor({height: 400});
$("textarea").cleditor();
// 因为cleditor的文本内容在一个frame中,所以要得到$frame设置它的高度
// 但是这样设置有一个问题,就是浏览器的大小以改变,这个$frame的高度又到了默认的250
$('#textarea-id').cleditor()[0].$frame.css('height', '360px');


在官网上看了一下有一个refresh()的方法,但是没有用,这个是在resize的时候调用的

所以只有改源代码了
首先找到jquery.cleditor.js或者jquery.cleditor.min.js,在defaultOptions下面增加一个属性,比如是iheight: 360默认360
然后找到refresh方法下面,有一句话
<iframe frameborder="0" src="javascript:true;" />

把它改成

<iframe style="height: '+editor.options.iheight+'px;" frameborder="0" src="javascript:true;" />

注意:上面的都是jquery.cleditor.js的修改方法
如果是jquery.cleditor.min.js
就搜索:'auto',这里如果是width:'auto'那么就在前面加上iheight: 360
然后再搜索<iframe 加上style="height: '+editor.options.iheight+'px;"
这里的editor.options要根据前面的参数,有可能是i.options
只要看前面一句是什么.$frame就行了,如果是i.$frame那就是i.options了
最后在使用:
// 初始化整个cleditor的高度,宽度默认大小
$('#textarea-id').cleditor({height: 400, iheight: 360});
$("textarea").cleditor();

分享到:
评论

相关推荐

    简单的jQuery富文本编辑器插件

    在这个例子中,我们可以预期`index.html`会包含一个用于展示富文本编辑器的`&lt;textarea&gt;`元素,以及初始化编辑器的jQuery脚本。 `readme.html`通常是一个项目说明文档,包含如何使用、安装和配置该项目的指南。在这...

    layui 富文本编辑器和textarea值的相互传递方法

    Layui是一款基于jQuery的前端UI框架,其富文本编辑器是Layui组件中的重要部分,可以方便地实现网页中的文本编辑功能,而textarea是HTML中用于输入文本的表单元素。在实际开发中,经常会遇到需要在富文本编辑器和...

    jQuery富文本编辑器插件-wysiwyg.js

    **jQuery富文本编辑器插件-wysiwyg.js** 在Web开发中,富文本编辑器是一种常见的组件,它允许用户以类似Word的方式编辑HTML内容。`wysiwyg.js`是一款基于jQuery的富文本编辑器插件,为网页提供了一种高效、功能强大...

    富文本编辑器实例 富文本编辑器实例

    富文本编辑器是一种在线文本编辑工具,它允许用户在网页上进行类似Word的文本编辑操作,包括插入图片、格式化文字、添加链接等。在网页开发中,富文本编辑器通常用于论坛、博客、CMS(内容管理系统)等需要用户输入...

    H5下最简洁好用的富文本编辑器

    在现代Web开发中,富文本编辑器是必不可少的工具,特别是在需要用户输入格式化内容的场景下,如博客、论坛、评论系统等。H5(HTML5)作为最新的Web标准,提供了更多的API和功能,使得富文本编辑器的实现更加方便和...

    jquery 富文本编辑器

    在给定的“jquery 富文本编辑器”主题下,我们将深入探讨jQuery框架下实现富文本编辑器的相关知识点。 首先,jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery...

    百度Ueditor在线富文本编辑器

    **百度Ueditor在线富文本编辑器** 百度Ueditor是一款由百度公司开发的开源、免费的在线富文本编辑器,主要用于Web应用中提供便捷的文本编辑功能。它以其强大的功能、良好的用户体验以及易于集成的特点,被广泛应用...

    html5文本编辑器_在线文本编辑器_富文本编辑器

    因此,富文本编辑器应运而生,它们通常基于JavaScript构建,为用户提供类似于Word的界面,可以进行字体设置、段落调整、插入图片和链接等操作。 富文本编辑器的实现主要依赖于DOM(文档对象模型)和APIs,如...

    富文本编辑器

    例如,富文本编辑器的初始化过程可能涉及设置编辑器ID,正如描述中提到的,只需将textarea的id设置为"editor_id",然后调用编辑器库的初始化方法,就能使textarea转化为富文本编辑器。 以CKEditor为例,其基本使用...

    Mvc富文本编辑器(解决上传图片问题)

    在本文中,我们将深入探讨如何在ASP.NET MVC3.0框架下使用富文本编辑器,特别是针对上传图片功能的实现。富文本编辑器是Web应用中常见的一种组件,它允许用户以WYSIWYG(所见即所得)的方式编辑内容,如在网页上创建...

    sdEditor富文本编辑器 v1.1.1.zip

    1. **富文本编辑器**:富文本编辑器是一种能够支持格式化文本输入的工具,允许用户在网页上创建和编辑带有字体、颜色、大小、对齐方式、图片、链接等多种样式的文本。与普通文本编辑器(如textarea)相比,它提供了...

    富文本编辑器插件-wysiwyg.js

    富文本编辑器如`wysiwyg.js`便应运而生,它将`&lt;textarea&gt;`转化为一个功能齐全的编辑环境,支持字体样式调整、段落格式设置、插入图片、链接、列表等操作,极大地提升了用户的交互体验。 `jQuery`是一个广泛使用的...

    vue富文本编辑器:集成常用的编辑器提供学习

    2. **Vuetify**: Vuetify是一个基于Material Design的UI框架,它包含了名为`v-textarea`的组件,可以作为简单的富文本编辑器使用,但若需要更复杂的功能,可以配合`quill`或其他第三方库。 3. **TinyMCE**: TinyMCE...

    jquery页面文本编辑器

    在Web开发中,文本编辑器是一种不可或缺的交互元素,它允许用户在网页上进行富文本编辑,如撰写文章、发布博客等。jQuery作为一款强大的JavaScript库,提供了丰富的插件来实现这一功能。其中,HtmlBox是一款基于...

    asp.net mvc 百度UEdit富文本编辑器的使用

    UEditor是由百度开发的一款开源的JavaScript富文本编辑器,它提供了多种功能,如图片上传、视频插入、代码高亮等,使得用户可以在网页上实现类似Word的编辑体验。对于ASP.NET MVC开发者来说,引入UEditor可以极大地...

    JQ JS javascript layui UI框架 富文本 编辑器

    在富文本编辑器中,JQuery通常用于DOM操作,如获取或设置元素内容,监听用户交互,以及触发动画效果。 JavaScript,简称JS,是Web开发的核心语言,用于增加网页的动态功能。在富文本编辑器中,JavaScript负责实现...

    一个用bootstrap实现的在线富文本编辑器

    富文本编辑器的核心部分通常是隐藏的`&lt;textarea&gt;`,通过JavaScript库(如TinyMCE, CKEditor或Quill)转化为可视化编辑界面。 2. **JavaScript插件集成**:Bootstrap本身并不包含富文本编辑功能,但可以通过集成像...

    jquery轻量级文本编辑器

    4. **初始化编辑器**:在页面加载完成后,通过JavaScript调用编辑器插件的初始化函数,将标记的元素转换为富文本编辑器。 例如: ```html &lt;!DOCTYPE html&gt; &lt;script src="https://code.jquery....

    tinymce富文本编辑器集成demo,添加powerpaste插件,支持word、excel带格式粘贴

    Tinymce是一款流行的开源JavaScript富文本编辑器,它提供了丰富的功能和高度可定制性,广泛应用于网站、博客、内容管理系统等场景。在本示例中,我们关注的是如何将Tinymce与PowerPaste插件集成,以支持从Word和...

Global site tag (gtag.js) - Google Analytics