`

ckeditor4.2的配置使用与问题解决

阅读更多
一、CKeditor的使用
首先从CKEditor的官方网站(http://ckeditor.com/download) 下载开发包并解压。
将解压后文件夹里面的ckeditor文件夹放到项目webroot下面。
CKEditor 的基本使用
1、页面引入js文件
<script type="text/javascript"src="js/ckeditor/ckeditor.js"></script>
2、使用<textarea id="editor1" class="ckeditor">待输入内容</textarea>
3、配置样式及宽高<script type="text/javascript">$(function () {
               CKEDITOR.replace( 'editor1', {
height: '200px',
width: '350px',
  });}) </script>

4.关于取出textarea中输入内容的问题
取值:CKEDITOR.instances.editor1.getData();
设置值:CKEDITOR.instances.editor1.setData();
5.关于在IE下出现不兼容的问题:

在html标签上方添加:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


二、ckeditor的配置

在ckeditor的文件夹中找到config.js,根据自己需要选择功能
CKEDITOR.editorConfig = function( config ) {
  config.toolbarGroups = [
//{ name: 'clipboard'//,groups: [ 'clipboard', 'undo' ] },
    //  { name: 'editing'   //groups: [ 'find', 'selection', 'spellchecker' ]},
{ name: 'links' },
{ name: 'insert' },
//{ name: 'forms' },
//{ name: 'tools' },
//{ name: 'document'   //,    groups: [ 'mode', 'document', 'doctools' ]},
//{ name: 'others' },
'/',
{ name: 'basicstyles' //, groups: [ 'basicstyles', 'cleanup' ]
},
{ name: 'paragraph' ,   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ]
},
{ name: 'styles' },
{ name: 'colors' }

];
//config.removeButtons = 'Underline,Subscript,Superscript';
//config.format_tags = 'p;h1;h2;h3;pre';
//config.removeDialogTabs = 'image:advanced;link:advanced';
};

三、ckeditor的精简

    在部署到Web服务器上时,下列文件夹和文件都可以删除:

    /_samples :示例文件夹;

    /_source :未压缩源程序;

    /lang文件夹下除 zh-cn.js、en.js 以外的文件(也可以根据需要保留其他语言文件);

    根目录下的 changes.html(更新列表),install.html(安装指向),license.html(使用许可);
0
0
分享到:
评论

相关推荐

    CKEditor4.2_full

    CKEditor4.2_full 是一个基于Web的富文本编辑器,是CKEditor系列的一个版本,以其全面的功能和稳定性而受到广大开发者的欢迎。这个编辑器主要用于网页内容的创建和编辑,提供了一种用户友好的界面,使得非技术背景的...

    CKEditor4.2编辑器和使用指南

    "CKEditor 4 开发人员指南.pdf"这份文档很可能是CKEditor4.2的官方开发指南,内容可能包括安装教程、API参考、插件开发、自定义配置等方面的详细指导。通过阅读这份文档,开发者可以深入理解CKEditor的工作原理,...

    ckeditor4.2与ckfinder整合到一起

    以下将详细介绍如何将CKEditor 4.2与CKFinder整合到一起,以及在VS2010环境下进行这个过程的关键步骤。 首先,我们需要理解CKEditor 4.2的功能。这是一个JavaScript库,提供了丰富的文本编辑功能,包括字体样式、...

    ckeditor4.2 自定义按钮和下拉框实现

    &lt;title&gt;CKEditor 4.2 自定义按钮与下拉框示例 &lt;script src="ckeditor/ckeditor.js"&gt; &lt;script src="ckeditor/plugins/custombutton/plugin.js"&gt; &lt;script src="ckeditor/plugins/dropdown/plugin.js"&gt; ...

    ckeditor4.2 整合ckfinder_2.4 for PHP

    《ckeditor4.2整合ckfinder_2.4 for PHP:构建强大的富文本编辑器与文件管理器》 在Web开发中,富文本编辑器(WYSIWYG Editor)是不可或缺的一部分,它允许用户以类似Word的方式创建和编辑内容。CKEditor 4.2.2是一...

    struts下ckeditor4.2+ckfinder2.3.1结合简单demo

    在这个"struts下ckeditor4.2+ckfinder2.3.1结合简单demo"中,我们将探讨如何在Struts框架中整合这两个工具以实现高效的富文本编辑和文件管理。 首先,集成CKEditor和CKFinder需要在项目中引入它们的库文件。...

    ckeditor_4.2_standard

    CKEditor 4.2 Standard版是一款著名的开源富文本编辑器,广泛应用于网页内容编辑和管理。这个版本专注于提供基础...通过正确配置和使用这个压缩包中的文件,开发者能够轻松集成CKEditor到自己的网站中,提升用户体验。

    [java]ckeditor4.2+ckfinder2.4 组合富文本例子支持weblogic上传图片

    本例子 基于[java]ckeditor4.2+ckfinder2.4 集成 实现 富文本上传图片例子,支持图片存放绝对路径,解决weblogic下无法浏览 及上传报500 无法找到xml的错误,虽然是修改源码实现,但修改量并不大。依然可以重新打jar...

    ckeditor+ckfinder配置

    1. **下载与解压**:首先,下载已经整合好的"ckeditor4.2+ckfinder2.3.1"压缩包,解压后得到"js"文件夹。 2. **部署到Web项目**:将"js"文件夹复制到你的Web项目的公共资源目录下,如"public/js"或"assets/js"。 3...

    最新版本ckeditor+ckfinder,集成上传功能

    同时,`安装说明.txt`提供了详细的步骤指导,包括如何配置ckfinder与ckeditor的连接,以及可能遇到的问题和解决方案。 `upfiles`文件夹通常是用来存储用户上传的文件和图片的,ckfinder会读取并管理这个目录中的...

    ckeditor 和 ckfinder集成,并解决ckeditor和jquery dialog冲突问题

    这篇博客文章“ckeditor 和 ckfinder集成,并解决ckeditor和jquery dialog冲突问题”主要探讨了如何将这两个组件整合在一起,以及如何处理可能出现的前端JavaScript库冲突。 首先,集成CKEditor和CKFinder的目的是...

    ckeditor4.2.2自定义配置

    **ckeditor4.2.2自定义配置** CKEditor是一款强大的富文本编辑器,广泛应用于网页内容编辑、CMS系统以及各种...通过灵活地修改`config.js`文件,可以实现从简单到复杂的各种配置,确保CKEditor与你的应用无缝集成。

    ckeditor及配置方法

    **ckeditor及配置方法** ...总结,CKEditor是一个强大且灵活的富文本编辑器,通过合理的配置和API使用,可以轻松集成到你的项目中,提升用户体验。了解其配置和API,能帮助你定制出满足特定需求的在线编辑环境。

    ckeditor配置上传视频

    但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹里面的plugins文件夹下面。然后配置config.js文件的节点:config.extraPlugins = 'flvPlayer'; ...

    ckeditor配置(详细)

    本文将深入解析CKEditor的配置方法及常用配置参数,帮助开发者更好地掌握其使用技巧。 #### 一、CKEditor的基本使用 1. **引入CKEditor核心文件**:要在页面中使用CKEditor,首先需要在`&lt;head&gt;`标签内引入CKEditor...

    ckeditor的详细配置

    ### ckeditor的详细配置 ckeditor是一款非常流行的富文本编辑器,它是FCKeditor的后续版本,广泛应用于网页开发中,支持多种浏览器环境。本文将详细阐述如何进行ckeditor的基本配置及高级定制,帮助开发者更好地...

    CKEditor4配置与开发详细中文说明文档

    CKEditor4 配置与开发详细中文说明文档 CKEditor4 是一个功能强大且灵活的富文本编辑器,广泛应用于各种 Web 应用程序中。为了帮助开发者快速上手 CKEditor4,这篇文档提供了详细的配置和开发指南。 一、CKEditor4...

    ckeditor的配置(html在线文本编辑器)

    对于`objectDataSource`这个文件名,这可能是指CKEditor中与数据对象源相关的配置或插件。在CKEditor中,数据源主要用于连接外部数据,比如数据库或者API,以实现动态加载或保存内容。配置对象数据源可能涉及设置URL...

    ckeditor与ckfinder详细配置与使用说明

    CKEditor是一款强大的富文本编辑器,而CKFinder则是一个文件管理器,常与CKEditor配合使用,允许用户上传和管理编辑器中的图片、文件等资源。 CKEditor的配置主要通过修改`config.js`文件实现。在配置中,你可以...

    CKeditor配置使用[参照].pdf

    在本文中,我们将深入探讨如何配置和使用CKeditor,以及它的一些关键配置参数。 首先,要使用CKeditor,你需要从其官方网站[http://ckeditor.com/](http://ckeditor.com/)下载所需版本。在这个例子中,我们使用的是...

Global site tag (gtag.js) - Google Analytics