ckeditor简单使用心得

最近在使用ckeditor来写文章，深深感觉到他的方便，这是一个所见即所得的编辑器，即你在编辑器中输入的内容是什么样子，那么最后出来的页面也是哪个样子。

下面来讲一下这些天来得使用心得：

1。首先需要下载ckeditor的文件

　　这个可以在ckeditor的官网上免费下载

　　如果需要实现上传等功能的话还需要下载ckfinder，同样也可以在官网上下载相应的文件。

2.接着只需要把ckeditor和ckfinder放到项目中即可：

　　其中：ckeditor文件夹是下载下来的ckeditor_4.x.x_xx.zip压缩包下的ckeditor

　　　　　ckfinder的路径为（以java为例）：ckfinder_Java_2.x.x/ckfinder/_sources/CKFinder for Java/WebApp/src/mian/webapp/

　　所需的jar包如下：

3.如果要使用ckfinder则需要进行如下配置：

　　a。配置config.xml：

　　　　config.xml可以在ckfinder_Java_2.x.x/ckfinder/_sources/CKFinder for Java/WebApp/src/mian/webapp/WEB-INF下找到

　　　　直接把config.xml复制到项目的WEB-INF下即可

　　　　把第一行<enable>false</enable>

　　　　　改成 <enable>ture</enable>

　　　　config.xml下的第三行：

　　　　　　<baseURL>即为文件上传的路径

　　b。配置web.xml

　　　　把如下代码插入即可：

<servlet><servlet-name>ConnectorServlet</servlet-name><servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class><init-param><param-name>XMLConfig</param-name><param-value>/WEB-INF/config.xml</param-value></init-param><init-param><param-name>debug</param-name><param-value>false</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet><servlet-name>CkServlet</servlet-name><servlet-class>cn.coolwind.servlet.CkServlet</servlet-class></servlet><servlet-mapping><servlet-name>ConnectorServlet</servlet-name><url-pattern>/ckfinder/core/connector/java/connector.java</url-pattern></servlet-mapping><servlet-mapping><servlet-name>CkServlet</servlet-name><url-pattern>/CkServlet</url-pattern></servlet-mapping>

4.如果不需要上传，则不用第三步，直接在页面中加入ckeditor

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>
<%@ taglib uri="http://ckfinder.com" prefix="ckfinder"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>  <head>  <script type="text/javascript">function test() {//JavaScript判空，如果确定var editor_data =CKEDITOR.instances.content.getData();if(editor_data==null||editor_data==""){  alert("数据为空不能提交");  }else{if(confirm(editor_data)){  document.myform.submit();  }  }         }</script>  <title>ckeditor富文本测试-- by jCuckoo</title>  </head>  <body>  <form action="<c:url value="/CkServlet" />" name="myform" method="post">  <input type="hidden" name="method" value="ckeditor" /><ckfinder:setupCKEditor editor="content" basePath="ckfinder/"  />     <ckeditor:editor basePath="ckeditor/"editor="content" value="test" />     <input type="button" οnclick="test()" value="提交数据"/>  </form>  </body>
</html>

至此已经可以显示出ckeditor了：

下面来说下ckeditor的一些简单的配置：

1.config.js文件：你可以通过修改他来实现你想要ckeditor展现出来的样子

CKEDITOR.editorConfig = function(config) {//Define changes to default configuration here. For example://config.language = 'fr';//config.uiColor = '#AADC6E';config.uiColor = '#00BBEC';//修改边框颜色//设置宽高config.width = 700;  config.height= 200;  config.toolbar= 'MyToolbar';//config.toolbar = 'Full';//config.toolbar = 'Basic';config.toolbar_Full =[     ['Source','-','Save','NewPage','Preview','-','Templates'],     ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],     ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],     ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],'/',     ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],     ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],     ['BidiLtr', 'BidiRtl'],     ['Link','Unlink','Anchor'],     ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],'/',     ['Styles','Format','Font','FontSize'],     ['TextColor','BGColor'],     ['Maximize', 'ShowBlocks','-','About']     ];     config.toolbar_Basic=[     ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']     ];   config.toolbar_MyToolbar=[     ['NewPage','Preview'],     ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],     ['Image','Flash','Table'],     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],'/',     ['Styles','Format'],     ['Bold','Italic','Strike'],     ['Link','Unlink','Anchor'],     ['TextColor','BGColor','CreateDiv'],  ];
};

其中toolbar为工具栏中显示出来的按钮，你可以在其中设置你想要出现的按钮；

2.contents.css文件:修改页面显示的CSS样式

3.styles.js文件：可以在其中增加你想要的样式

　　具体的格式为：

{name:'样式名称',element:'样式的元素',styles:{'xxx':'xxx','xxx':'xxx'}
}，

例如：

{                name: 'MyStyle3',                element: 'section',                styles: {                    'max-width': '740px',                    'word-wrap': 'break-word',                    'padding': '15px 25px',                    'top': '0px',                    'line-height': '24px',                    'font-size': '14px',                    'vertical-align': 'baseline',                    'border-left': '10px solid #00BBEC',                    'background-color': '#EFEFEF'                }            },

效果为：

转载于:https://www.cnblogs.com/slimo/p/4963361.html

ckeditor简单使用心得相关推荐

天下霸图修改_天下霸图2 简单修改心得
很多人说使用CureROM后无法窗口化,其实是可以的方法是先使用D3DWindower,然后使用CureROM进入钱和资源的修改不多说了,,这个玩过修改器的基本都知道不过我是采用锁定数值的办法修 ...
CKEditor 简单图片上传插件开发和详细步骤
CKEditor插件使用方法就不在这里赘述了,这里只讲CKEditor的插件开发,下面是官方开发的指南的地址官方插件开发指南 CKEditor插件目录 - ckeditor 根目录/ - plugi ...
bonjour简单使用心得
前段时间因为项目需要,开始研究Bonjour,下面先来介绍下Bonjour吧. 1.什么是Bonjour? Bonjour这个词来源于法语,是"你好"的意思.在这里它是指由Appl ...
vue-cli简单使用心得
对于大型的项目,需要考虑项目结构,项目构建和部署,热加载,代码单元测试等事情,这个时候我们就需要使用脚手架工具方便开发. 环境:node npm 这里我们使用vue-cli来开发vue项目: 1-安装 ...
Inno 简单使用心得记录
升级安装时: ;confirmoverwrite:"确认是否覆盖原有配置文件" Source: "SqlConfig.ini"; DestDir: " ...
matlab实验之简单识别手写0-9数字程序
实验目的能够用matlab设计一个程序,能够简单识别0-9等阿拉伯数字或者识别abcd等字母实验原理根据手写图片在二通道里的每个像素点以二进制表示,可以设计一个函数,得到每一个手写样本 ...
使用DataTable作为存储过程的参数
最近工作中写了几个存储过程,需要向存储过程中传递字符串,因为SQL Server 2000中没有内置类似于 split 的函数,只好自己处理,将前台数据集中的一列用逗号拆分存到一个List中,再转化 ...
[IDDFS+背包] 洛谷P2744 [USACO5.3]量取牛奶Milk Measuring
折腾了好几天的题目,简单讲讲心得. 首先看了题解才写出来的,因为有一个核心的一点没想到,用桶的数量当迭代加深搜索的层数,算是长见识了~ 每次dp数组的初始化自己手动赋值0,不然会TLE一个点. 思路 ...
周鸿祎：如何做好产品经理
我刚才来的时候,会议主办方跟我讲,今天来交流的很多人是设计师.产品经理,据说还有 50 位公司的高管,我今天希望跟大家有一个交流,对很多公司高管来讲,我其实有一个建议,过去这种公司分工特别明确,做一个 ...
非等级式随机森林----随机蕨分类器
这几天一直在捣鼓着非等级式的随机森林,在论文[1]中,作者利用各种手段,使得非等级式的随机森林呈现出来,至于是否十行C++代码就可以实现,这还有待考证,毕竟至少我的代码不只十行. OK~ 细 ...

ckeditor简单使用心得

ckeditor简单使用心得相关推荐

最新文章

热门文章