ckEditor.js
//编辑器工作模式判断
function isWysiwygareaAvailable() {
if (CKEDITOR.revision == ('%RE' + 'V%')) {
return true;
}
return !!CKEDITOR.plugins.get('wysiwygarea');
}
//启动ckeditor编辑页面区块
function htmlCkeditor(id) {
var obj = $('#' + id);
var editor;
if (CKEDITOR.env.ie && CKEDITOR.env.version < 9)
CKEDITOR.tools.enableHtml5Elements(document);
CKEDITOR.config.height = obj.height();
CKEDITOR.config.width = obj.width();
var wysiwygareaAvailable = isWysiwygareaAvailable();
var editorElement = CKEDITOR.document.getById(id);
if (wysiwygareaAvailable) {
editor = CKEDITOR.replace(id);
} else {
editorElement.setAttribute('contenteditable', 'true');
editor = CKEDITOR.inline(id);
}
var cssFiles = document.getElementsByTagName('link');
var css = [];
for (var i = 0; i < cssFiles.length; i++) {
var file = cssFiles[i];
css.push(file.href);
}
editor.config.contentsCss = css;
return editor;
}
//启动编辑模式
var selectEditElement, oldCss, oldZindex;
function startEditModel() {
$(document).unbind("click");
$(document).bind("click", function (e) {
var curr = e.originalEvent.srcElement;
if (selectEditElement != curr && curr.id != 'btnEditorModel') {
$(selectEditElement).css('border', oldCss).css('z-index', oldZindex);
oldCss = $(curr).css('border');
oldZindex = $(curr).css('z-index');
$(curr).css('border', '1px dotted red').css('z-index', '9995').on('dblclick', function () {
this.id = this.id || 'ck_' + (new Date().getTime());
htmlCkeditor(this.id);
});
selectEditElement = curr;
e.stopPropagation();
}
});
}
//终止编辑模式
function endEditModel() {
//解除页面文档的点击事件绑定
$(document).unbind("click");
//还原选中的页面区块样式
$(selectEditElement).css('border', oldCss).css('z-index', oldZindex);
for (var editor in CKEDITOR.instances) {
//还原编辑器覆盖的区块
$('#' + editor).css({ visibility: '' }).show();
//还原编辑器覆盖的区块
$('#' + editor).unbind("dblclick");;
//销毁编辑器实例
CKEDITOR.remove(CKEDITOR.instances[editor]);
//移除编辑器Jquery对象
$('#cke_' + editor).remove();
}
}
//处页面表单提交值
for (instance in CKEDITOR.instances){
CKEDITOR.instances[instance].updateElement();
}
}
分享到:
相关推荐
CKEditor是一款广泛使用的开源富文本编辑器,它允许用户在网页上进行文本编辑,并提供了丰富的格式设置和多媒体插入功能。本教程将详细讲解如何在CKEditor中实现本地视频和图片的上传功能,而不依赖于kfinal这样的第...
这篇博客文章“ckeditor 和 ckfinder集成,并解决ckeditor和jquery dialog冲突问题”主要探讨了如何将这两个组件整合在一起,以及如何处理可能出现的前端JavaScript库冲突。 首先,集成CKEditor和CKFinder的目的是...
CKEditor和CKFinder是两个在Web开发中广泛使用的工具,主要服务于富文本编辑和资源管理的需求。CKEditor是一款强大的开源JavaScript文本编辑器,而CKFinder则是一个与之配套的文件管理器,允许用户方便地上传、浏览...
在本文中,我们将深入探讨如何在CKEditor 4.2版本中实现自定义按钮和下拉框的功能。CKEditor是一款强大的富文本编辑器,广泛应用于网页内容编辑,它提供了丰富的API和可扩展性,允许开发者根据需求进行定制。 首先...
CKEditor 5全屏按钮的实现依赖于JavaScript和CSS技术。在代码层面,当用户点击全屏按钮时,编辑器会修改自身的CSS属性,如`position`、`height`、`width`以及可能的`z-index`,以达到全屏效果。同时,它还会动态处理...
在网页编辑器的发展中,CKEditor一直以其强大的功能和良好的用户体验而备受青睐。CKEditor4是其重要的一代产品,它提供了丰富的可扩展性,允许用户根据需求定制编辑器的功能。在众多的插件中,“行高插件”是一个...
同时,通过阅读CKEditor的开发者文档和社区资源,你可以学习更多高级技巧和最佳实践。 总结,CKEditor是一个强大且灵活的富文本编辑器,通过合理的配置和API使用,可以轻松集成到你的项目中,提升用户体验。了解其...
CKEditor 是一款强大的富文本编辑器,广泛应用于网站内容管理、博客系统和其他在线文本输入场景。在CKEditor 3.6.0版本中,它提供了文件上传功能,使得用户可以直接在编辑器内上传图片或其他文件,极大地提高了内容...
在网页编辑器领域,CKEditor 是一款非常知名的富文本编辑器,它提供了丰富的功能和高度的自定义性,使得用户可以方便地创建和编辑复杂的HTML内容。行间距(Line Height)是文本格式化中的一个重要元素,它决定了文本...
本文将深入探讨如何为CKEditor 4自定义音频和视频上传插件,以满足特定的媒体处理需求。 CKEditor 4音频视频上传插件的开发主要涉及以下几个核心知识点: 1. **CKEditor 4 API**:首先,我们需要熟悉CKEditor 4的...
【ckeditor和ckfinder简单功能】 在网页开发中,CKEditor和CKFinder是两个非常重要的工具,主要用于提升用户体验,特别是对于内容管理和编辑。CKEditor是一款强大的富文本编辑器,而CKFinder则是一个文件管理器,...
5. **性能优化**:CKEditor 4.0 进行了一系列性能优化,减少了内存占用,提高了编辑器的启动速度和运行效率,尤其在处理大量文本或复杂布局时更为明显。 6. **无障碍支持**:考虑到无障碍访问的重要性,CKEditor ...
"ckeditor数学公式编辑器"则是CKEditor的一个扩展插件,专门用于在文档中添加和编辑数学公式。 在Web教育、科研或技术文档编写中,数学公式是常见且重要的组成部分。传统的HTML和CSS并不支持复杂的数学公式展示,这...
1. `Global.asax`:这个文件定义了应用程序范围内的事件处理程序,例如应用程序启动、结束、会话开始和结束等,用于全局配置和处理。 2. `Default.aspx`、`About.aspx`:这些是ASP.NET的页面文件,分别代表默认首页...
ckeditor-5是互联网上广泛使用的文本编辑工具,它以其用户友好的界面和丰富的功能集而备受赞誉。这次更新为用户提供了更精细的文本格式控制,使得内容创作更加灵活,满足了不同场景下的排版需求。 首先,我们要明白...
在提供的文件列表中,我们可以看到`CKEditor.NETwithSamples.sln`和`CKEditor.NET.sln`这两个解决方案文件,这表明包含了ckeditor与ASP.NET集成的示例代码。`_Samples`目录下可能有更具体的例子,展示了如何实现图片...
本项目是关于如何配置CKEditor和CKFinder,实现在编辑器中上传图片和截图至远程服务器,并且能够直接将截图粘贴到编辑器内部。 首先,我们来看CKEditor。CKEditor提供了丰富的功能,包括字体设置、段落格式、链接...
CKEditor 3.6.2是该编辑器的一个特定版本,它在前一版本的基础上进行了优化和改进,以提升用户体验和功能。 CKEditor的主要特点包括: 1. **丰富的编辑功能**:CKEditor支持多种文本格式处理,如字体、字号、颜色...
把ckeditor 3.4的ckeditor.js复盖就行