首先包含以下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");
}
分享到:
相关推荐
通常,我们需要在HTML中引入`ckeditor.js`脚本文件,并通过JavaScript调用CKEditor的相关函数来创建实例,例如`CKEDITOR.replace('editor1')`,将某个元素(如id为'editor1'的textarea)替换为CKEditor实例。...
CKEditor是一款广泛应用于网页开发中的开源富文本编辑器,它为用户提供了一种“所见即所得”的编辑体验,使得在网页上编辑文本如同在Word等桌面应用中一样方便。CKEditor以其轻量级、易安装和高度可定制的特点受到...
保存完成后,你需要返回一个JavaScript字符串,调用CKEditor的回调函数并传递结果消息,以便CKEditor知道图片上传是否成功。 通过以上步骤,你就完成了CKEditor在C# MVC中的集成以及图片上传功能的实现。这使得用户...
此外,CKEditor与Ext的交互可以通过事件监听和调用CKEditor的API来实现。例如,你可以监听`instanceReady`事件,当编辑器准备好时执行特定的操作。你也可以通过CKEditor的API获取或设置编辑器的内容,如`CKEDITOR....
然后,为需要转换成编辑器的文本区域添加`id`,并调用CKEditor初始化函数: ```html <textarea id="myEditor" name="myEditor"></textarea> CKEDITOR.replace('myEditor'); ``` ### 4. 配置CKEditor CKEditor...
为了使用CKEditor,你需要在HTML页面中引入`ckeditor.js`,并按照官方文档或示例代码设置配置,然后在需要的地方调用CKEditor API来初始化编辑器。对于开发者而言,熟悉CKEditor的API和文档至关重要,这将有助于充分...
- **JavaScript API**:通过JavaScript调用CKEditor的API,可以实现编辑器的动态创建、销毁、内容获取和设置等操作。 - **事件处理**:编辑器提供了多种事件,如“实例已准备好”、“内容改变”等,允许开发者监听...
3. **初始化编辑器**:在JavaScript中调用CKEditor的`CKEDITOR.replace()`或`CKEDITOR.inline()`方法来初始化编辑器。 4. **数据交互**:当用户编辑完成后,可以通过JavaScript获取编辑器内的HTML内容,然后通过...
使用CKEditor 4.0时,首先需要在网页中引入jQuery库和CKEditor的相关文件,然后通过JavaScript调用CKEditor的初始化方法将一个普通的文本区域转换为富文本编辑器。例如: ```html <!DOCTYPE html> ...
3. **实例化编辑器**:在HTML中指定一个元素(通常是`<textarea>`)作为编辑器的容器,并通过JavaScript调用CKEditor的初始化方法。 4. **交互处理**:利用提供的API与编辑器进行交互,例如在提交表单时获取编辑器...
5. **获取编辑器值**:在用户完成编辑后,可以通过调用CKEditor的API来获取包含图片链接的HTML内容。在ASP.NET中,这通常是在表单提交时,通过JavaScript将CKEditor的`getData()`方法返回的值传递到服务器。 6. **...
2. 使用JavaScript调用CKEditor的初始化函数,将`<textarea>`转换为富文本编辑器。 3. 根据需要调整`config.js`配置,定制编辑器的外观和功能。 4. 如果需要启用文件上传,确保服务器端的上传脚本正确配置,并与...
然后通过JavaScript调用CKEditor的初始化方法,指定目标`textarea`。 4. **配置编辑器**:CKEditor提供了丰富的配置选项,可以调整工具栏、设置默认样式、禁用某些功能等。这些配置可以在初始化编辑器时通过参数...
例如,当用户在编辑器中完成内容编辑后,可以调用CKEditor的API获取编辑后的HTML代码,然后发送到服务器端进行存储。 在实际开发中,开发者需要注意CKEditor的安全性问题,比如防止XSS(跨站脚本攻击)和CSRF(跨站...
为了使CKEditor生效,你需要在JavaScript中调用CKEDITOR.replace()函数,传入对应的元素ID。在ASP.NET环境中,如果控件位于母版页,需要处理ClientID以匹配正确的ID。例如: ```javascript CKEDITOR.replace('...
4. **初始化编辑器**:在JavaScript中调用CKEditor的初始化函数,指定刚刚创建的`<textarea>`作为编辑器的容器。 5. **配置编辑器**:根据需要调整CKEditor的配置,例如设置初始内容、禁用某些功能等。 6. **测试与...
5. **初始化编辑器**:在页面加载时,通过JavaScript调用CKEditor的初始化函数,指定textarea的ID。 6. **配置编辑器**:可以通过配置文件或JavaScript代码自定义编辑器的行为和功能。 7. **数据交互**:当用户提交...
这通常通过在JavaScript中调用CKEDITOR.replace()函数实现。你还需要配置CKeditor的配置项,例如设置语言、工具栏等。 3. **集成CKfinder**: 为了使CKeditor能调用CKfinder,你需要配置CKeditor的...
完成上述配置后,就可以在JSP页面中调用ckeditor与ckfinder了。通常的做法是在JSP页面中引入ckeditor相关的JavaScript和CSS文件,并设置好必要的参数,例如指定ckfinder的路径等。这样就可以实现在JSP页面中使用...
2. 初始化与调用:在网页的JavaScript代码中,调用CKeditor的初始化函数,指定编辑器的容器元素,即可创建一个编辑器实例。 3. 用户交互:用户可以通过编辑器界面进行文本编辑,点击工具栏按钮进行格式化操作,或者...