`
hsys
  • 浏览: 290872 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

调用CkEditor

阅读更多
首先包含以下js
<script language="javascript" src="${media_root}/scripts/ckeditor/ckeditor.js"></script>
<script language="javascript" src="${media_root}/scripts/jquery/jquery-1.3.1.js"></script>
<script language="javascript" src="${media_root}/scripts/editor.js"></script>


然后调用
<textarea name="txt" id="txtId" rows="10" cols="50"></textarea>
		<input type="button" onclick="showeditor('txtId')" value="载入窗口">


editor.js的内容
var $jq=jQuery.noConflict();
var flag = 1;
var obj;
var editor;
function showeditor(taId){
	if(flag == 1){
		appendDiv();
	}
	obj = document.getElementById(taId);
	
	var div_obj = $jq("#pop-editor");  
	var windowWidth = document.body.clientWidth;       
	var windowHeight = document.body.clientHeight;  
	var popupHeight = div_obj.height();       
	var popupWidth = div_obj.width();    
	$jq("<div id='mask-editor'></div>").addClass("mask")   
                              .width(windowWidth )   
                              .height(windowHeight )   
                              .appendTo("body")   
                              .fadeIn(200);   
	div_obj.css({"position": "absolute"}).animate({left:windowWidth/2-popupWidth/2,top: windowHeight/2-popupHeight/2, opacity: "show" }, "fast");

	editor.setData(obj.value);
}

function appendDiv(){
	var html = "<div id='pop-editor' style='width: 550px;height:350px' class='pop-box'><h4>HengXin Editor</h4>";
	html += "<div class='pop-box-body' id='pop-editor-content'>";
	html += "<input type='textarea' id='myText'>";
	html += "<input id=btnSure type=button onclick='getContent();' value='确定'/>";
	html += "<input id=btnClose type=button onclick='hideEditor();' value='取消'/>";
	html += "</div></div>"
	$jq("body").append(html);
	editor = CKEDITOR.replace("myText");
	flag = 0;
}

function getContent(){ 
	obj.value = editor.getData();	
	hideEditor();
}

function hideEditor() {   
	$jq("#mask-editor").remove();   
	$jq("#pop-editor").animate({left: 0, top: 0, opacity: "hide" }, "fast");
}
分享到:
评论

相关推荐

    ckeditor 完美精简版、优化版,附带调用方法页面

    通常,我们需要在HTML中引入`ckeditor.js`脚本文件,并通过JavaScript调用CKEditor的相关函数来创建实例,例如`CKEDITOR.replace('editor1')`,将某个元素(如id为'editor1'的textarea)替换为CKEditor实例。...

    ckeditor的使用

    CKEditor是一款广泛应用于网页开发中的开源富文本编辑器,它为用户提供了一种“所见即所得”的编辑体验,使得在网页上编辑文本如同在Word等桌面应用中一样方便。CKEditor以其轻量级、易安装和高度可定制的特点受到...

    c# mvc中使用ckeditor上传图片介绍

    保存完成后,你需要返回一个JavaScript字符串,调用CKEditor的回调函数并传递结果消息,以便CKEditor知道图片上传是否成功。 通过以上步骤,你就完成了CKEditor在C# MVC中的集成以及图片上传功能的实现。这使得用户...

    Ext中CKEditor应用事例

    此外,CKEditor与Ext的交互可以通过事件监听和调用CKEditor的API来实现。例如,你可以监听`instanceReady`事件,当编辑器准备好时执行特定的操作。你也可以通过CKEditor的API获取或设置编辑器的内容,如`CKEDITOR....

    ckeditor及配置方法

    然后,为需要转换成编辑器的文本区域添加`id`,并调用CKEditor初始化函数: ```html &lt;textarea id="myEditor" name="myEditor"&gt;&lt;/textarea&gt; CKEDITOR.replace('myEditor'); ``` ### 4. 配置CKEditor CKEditor...

    ckeditor_4.11.3_full.zip

    为了使用CKEditor,你需要在HTML页面中引入`ckeditor.js`,并按照官方文档或示例代码设置配置,然后在需要的地方调用CKEditor API来初始化编辑器。对于开发者而言,熟悉CKEditor的API和文档至关重要,这将有助于充分...

    ckeditor富文本编辑器

    - **JavaScript API**:通过JavaScript调用CKEditor的API,可以实现编辑器的动态创建、销毁、内容获取和设置等操作。 - **事件处理**:编辑器提供了多种事件,如“实例已准备好”、“内容改变”等,允许开发者监听...

    ckeditor工具代码

    3. **初始化编辑器**:在JavaScript中调用CKEditor的`CKEDITOR.replace()`或`CKEDITOR.inline()`方法来初始化编辑器。 4. **数据交互**:当用户编辑完成后,可以通过JavaScript获取编辑器内的HTML内容,然后通过...

    jquery版本的文本编辑框,ckeditor_4.0

    使用CKEditor 4.0时,首先需要在网页中引入jQuery库和CKEditor的相关文件,然后通过JavaScript调用CKEditor的初始化方法将一个普通的文本区域转换为富文本编辑器。例如: ```html &lt;!DOCTYPE html&gt; ...

    CKEditor.NET

    3. **实例化编辑器**:在HTML中指定一个元素(通常是`&lt;textarea&gt;`)作为编辑器的容器,并通过JavaScript调用CKEditor的初始化方法。 4. **交互处理**:利用提供的API与编辑器进行交互,例如在提交表单时获取编辑器...

    ASP.NET C# CKEditor(4.14版本)+CKFinder上传图片

    5. **获取编辑器值**:在用户完成编辑后,可以通过调用CKEditor的API来获取包含图片链接的HTML内容。在ASP.NET中,这通常是在表单提交时,通过JavaScript将CKEditor的`getData()`方法返回的值传递到服务器。 6. **...

    ckeditor在线编辑器

    2. 使用JavaScript调用CKEditor的初始化函数,将`&lt;textarea&gt;`转换为富文本编辑器。 3. 根据需要调整`config.js`配置,定制编辑器的外观和功能。 4. 如果需要启用文件上传,确保服务器端的上传脚本正确配置,并与...

    ckeditor4and5.rar

    然后通过JavaScript调用CKEditor的初始化方法,指定目标`textarea`。 4. **配置编辑器**:CKEditor提供了丰富的配置选项,可以调整工具栏、设置默认样式、禁用某些功能等。这些配置可以在初始化编辑器时通过参数...

    CKEDITOR文字输入工具

    例如,当用户在编辑器中完成内容编辑后,可以调用CKEditor的API获取编辑后的HTML代码,然后发送到服务器端进行存储。 在实际开发中,开发者需要注意CKEditor的安全性问题,比如防止XSS(跨站脚本攻击)和CSRF(跨站...

    ckeditor的使用和配置方法分享

    为了使CKEditor生效,你需要在JavaScript中调用CKEDITOR.replace()函数,传入对应的元素ID。在ASP.NET环境中,如果控件位于母版页,需要处理ClientID以匹配正确的ID。例如: ```javascript CKEDITOR.replace('...

    ckeditor_ch.rar

    4. **初始化编辑器**:在JavaScript中调用CKEditor的初始化函数,指定刚刚创建的`&lt;textarea&gt;`作为编辑器的容器。 5. **配置编辑器**:根据需要调整CKEditor的配置,例如设置初始内容、禁用某些功能等。 6. **测试与...

    asp.net编辑器ckeditor

    5. **初始化编辑器**:在页面加载时,通过JavaScript调用CKEditor的初始化函数,指定textarea的ID。 6. **配置编辑器**:可以通过配置文件或JavaScript代码自定义编辑器的行为和功能。 7. **数据交互**:当用户提交...

    Struts2整合之CKeditor和CKfinder

    这通常通过在JavaScript中调用CKEDITOR.replace()函数实现。你还需要配置CKeditor的配置项,例如设置语言、工具栏等。 3. **集成CKfinder**: 为了使CKeditor能调用CKfinder,你需要配置CKeditor的...

    jsp ckeditor3.6.2集成ckfinder

    完成上述配置后,就可以在JSP页面中调用ckeditor与ckfinder了。通常的做法是在JSP页面中引入ckeditor相关的JavaScript和CSS文件,并设置好必要的参数,例如指定ckfinder的路径等。这样就可以实现在JSP页面中使用...

    CKeditor 编辑器

    2. 初始化与调用:在网页的JavaScript代码中,调用CKeditor的初始化函数,指定编辑器的容器元素,即可创建一个编辑器实例。 3. 用户交互:用户可以通过编辑器界面进行文本编辑,点击工具栏按钮进行格式化操作,或者...

Global site tag (gtag.js) - Google Analytics