论坛首页 Web前端技术论坛

调用CkEditor

浏览 2750 次
锁定老帖子 主题:调用CkEditor
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-01-19  
首先包含以下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");
}
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics