FCKeditor编辑器|FCKeditor下载 4.2 官方标准版_ - pc6下载站ckeditor使用方法_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
喜欢此文档的还喜欢
ckeditor使用方法
c​k​e​d​i​t​o​r​使​用​方​法
阅读已结束，如果下载本文需要使用
想免费下载本文？
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
你可能喜欢
20080份文档欢迎来访秀站网，DEDE织梦模板第一服务平台！
当前位置： >
给dede织梦默认网页编辑器ckeditor添加字体
时间：&&来源：未知
&&作者：秀站网
DEDE5.7集成了ckeditor网页编辑器，它的原名是FCKeditor，是一个非常优秀的开源网页编辑器，但二者的配置却不完全相同。 下面分享一下为ckeditor网页编辑器添加中文字体的方法： 打开include/c
DEDE5.7集成了ckeditor网页编辑器，它的原名是FCKeditor，是一个非常优秀的开源网页编辑器，但二者的配置却不完全相同。
下面分享一下为ckeditor网页编辑器添加中文字体的方法：
打开include/ckeditor/ckeditor.js，搜索font_names，找到字体列表。添加所需的中文字体，添加后为：
i.font_names='Arial/Arial, Helvetica, sans-Comic Sans MS/Comic Sans MS,Courier New/Courier New, Courier,Georgia/Georgia,Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-Tahoma/Tahoma, Geneva, sans-Times New Roman/Times New Roman, Times,Trebuchet MS/Trebuchet MS, Helvetica, sans-Verdana/Verdana, Geneva, sans-宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑';
需要特别注意的是：添加的字体，要写成诸如&宋体/宋体&的形式，而不是&宋体&。即&显示的字体名称/实际字体名称&的格式。
本文地址：/dedecms_jq/570.html
责任编辑：
下一篇：没有了
免费一次安装
免费BUG修复收藏，812 浏览
本文介绍如何在Flask项目中集成富文本编辑器CKeditor，并实现图片上传、文件上传、视频上传等功能。
CKeditor是目前最优秀的可见即可得网页编辑器之一，它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行，互联网上很容易找到相关技术文档，国内许多WEB项目和大型网站均采用了CKeditor。
下载CKeditor
访问，进入下载页面，选择Standard Package（一般情况下功能足够用了），然后点击Download CKEditor按钮下载ZIP格式的安装文件。如果你想尝试更多的功能，可以选择下载Full Package。
下载好CKeditor之后，解压到Flask项目static/ckeditor目录即可。
在Flask项目中使用CKeditor
在Flask项目中使用CKeditor只需要执行两步就可以了：
在&script&标签引入CKeditor主脚本文件。可以引入本地的文件，也可以引用CDN上的文件。
使用CKEDITOR.replace()把现存的&textarea&标签替换成CKEditor。
示例代码：
html&!DOCTYPE html&
&title&A Simple Page with CKEditor&/title&
&!-- 请确保CKEditor文件路径正确 --&
&script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"&&/script&
&textarea name="editor1" id="editor1" rows="10" cols="80"&
This is my textarea to be replaced with CKEditor.
&/textarea&
// 用CKEditor替换&textarea id="editor1"&
// 使用默认配置
CKEDITOR.replace('editor1');
因为CKeditor足够优秀，所以第二步也可只为&textarea&追加名为ckeditor的class属性值，CKeditor就会自动将其替换。例如：
&!DOCTYPE html&
&title&A Simple Page with CKEditor&/title&
&!-- 请确保CKEditor文件路径正确 --&
&script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"&&/script&
&textarea name="editor1" id="editor1" class="ckeditor" rows="10" cols="80"&
This is my textarea to be replaced with CKEditor.
&/textarea&
CKEditor脚本文件也可以引用CDN上的文件，下面给出几个参考链接：
&script src="///4.4.6/basic/ckeditor.js"&&/script& 基础版（迷你版）
&script src="///4.4.6/standard/ckeditor.js"&&/script& 标准版
&script src="///4.4.6/full/ckeditor.js"&&/script& 完整版
开启上传功能
默认配置下，CKEditor是没有开启上传功能的，要开启上传功能，也相当的简单，只需要简单修改配置即可。下面来看看几个相关的配置值：
filebrowserUploadUrl ：文件上传路径。若设置了，则上传按钮会出现在链接、图片、Flash对话窗口。
filebrowserImageUploadUrl ： 图片上传路径。若不设置，则使用filebrowserUploadUrl值。
filebrowserFlashUploadUrl ： Flash上传路径。若不设置，则使用filebrowserUploadUrl值。
为了方便，这里我们只设置filebrowserUploadUrl值，其值设为/ckupload/（后面会在Flask中定义这个URL）。
设置配置值主要使用2种方法：
方法1：通过CKEditor根目录的配置文件config.js来设置:
javascriptCKEDITOR.editorConfig = function( config ) {
// file upload url
config.filebrowserUploadUrl = '/ckupload/';
方法2：将设置值放入作为参数放入CKEDITOR.replace():
javascript&script&
CKEDITOR.replace('editor1', {
filebrowserUploadUrl: '/ckupload/',
Flask处理上传请求
CKEditor上传功能是统一的接口，即一个接口可以处理图片上传、文件上传、Flash上传。先来看看代码：
pythondef gen_rnd_filename():
filename_prefix = datetime.datetime.now().strftime('%Y%m%d%H%M%S')
return '%s%s' % (filename_prefix, str(random.randrange()))
@app.route('/ckupload/', methods=['POST'])
def ckupload():
"""CKEditor file upload"""
error = ''
callback = request.args.get("CKEditorFuncNum")
if request.method == 'POST' and 'upload' in request.files:
fileobj = request.files['upload']
fname, fext = os.path.splitext(fileobj.filename)
rnd_name = '%s%s' % (gen_rnd_filename(), fext)
filepath = os.path.join(app.static_folder, 'upload', rnd_name)
# 检查路径是否存在，不存在则创建
dirname = os.path.dirname(filepath)
if not os.path.exists(dirname):
os.makedirs(dirname)
error = 'ERROR_CREATE_DIR'
elif not os.access(dirname, os.W_OK):
error = 'ERROR_DIR_NOT_WRITEABLE'
if not error:
fileobj.save(filepath)
url = url_for('static', filename='%s/%s' % ('upload', rnd_name))
error = 'post error'
&script type="text/javascript"&
window.parent.CKEDITOR.tools.callFunction(%s, '%s', '%s');
""" % (callback, url, error)
response = make_response(res)
response.headers["Content-Type"] = "text/html"
return response
上传文件的获取及保存部分比较简单，是标准的文件上传。这里主要讲讲上传成功后如何回调的问题。
CKEditor文件上传之后，服务端返回HTML文件，HTML文件包含JAVASCRIPT脚本，JS脚本会调用一个回调函数，若无错误，回调函数将返回的URL转交给CKEditor处理。
这3个参数依次是：
CKEditorFuncNum : 回调函数序号。CKEditor通过URL参数提交给服务端
URL : 上传后文件的URL
Error : 错误信息。若无错误，返回空字符串
这里有个简单的DEMO：
在之前的文章中，我们讲到了UEditor，就个人感觉而言，CKEditor的使用体验比UEditor好很多，使用方式也比较灵活。希望此文可以帮助大家在项目中加入优秀的CKEditor编辑器。
不要错过 TA 的任何更新
如果这篇文章对你有帮助，记得点赞收藏哦，你的支持是我们的动力 ^___^
分享到微博？
举报理由：
带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复（请编辑该提问指向已有相同问题）
内容质量差，或不适合在本网站出现
答非所问，不符合答题要求
其他原因（请补充说明）
补充说明：出处：http://blog.csdn.net
Ckeditor插件的下载首页：
，您可以根据自己的实际需要选择是Basic Package、Standard Package、Full Package。这三个版本实际上就是插件包含的js数量不同，也就是插件功能的差别。建议选择Full Package，因为ckeditor可以自定义插件的工具栏。下载ckeditor之后，将ckeditor存放至项目的WebRoot根目录下面即可。在页面引入js文件即可，如： &script
type=&text/javascript& src=&&%=basePath %&ckeditor/ckeditor.js&&&/script&。这样，我们就将该插件配置好了。
以该插件和textarea标签的使用为例，&textarea name=&editor&/&，在该标签后面接着加载该插件
&script type=&text/javascript&&
CKEDITOR.replace( &editor&,{toolbar:&mybar&});
其中绿色字体的是textarea的name属性的值，红色字体的是自定义的工具栏。自定义工具栏在配置文件config.js中，目录结构如下：
打开该配置文件，进行相关的配置：
CKEDITOR.editorConfig = function( config ) {
config.language = &zh-cn&;
config.uiColor = &#9AB8F3&;
config.toolbar = &Basic&;
//自定义工具栏1
config.toolbar_Basic =
[&Bold&,&Italic&,&Underline&,&Strike&,&-&,&Font&,&FontSize&,&TextColor&,&Print&]
//自定义工具栏2
config.toolbar_mybar =
[&Font&,&FontSize&]
config.skin=&kama&;
//去掉编辑面板下方的元素提示
config.removePlugins=&elementspath&;
红色阴影部分表示配置默认加载自定义工具栏1，当然在页面也可以动态加载如上面的mybar就是在加载的时候动态加载自定义工具栏2.比较方便的是ckeditor还可以自定义皮肤，官网现在提供了三种皮肤。直接将下载的皮肤包放到skins文件夹下即可，插件默认的是moono，以kama皮肤为例如下图：
config.removePlugins=&elementspath&;这句话很有用啊，默认的编辑框左下角会显示使用的效果标签如：font、p等，十分不美观，加上这句话就可以将该麻烦去除。
在后台获取前台form提交的内容时使用 String content=request.getParameter(&editor&)。在前台获取显示时，如果不想使用该插件而想使用普通的div显示时，可以这样取数据&div&&s:property
value=&entity.editor&
escape=&false&/&&/div&，其中 escape该属性的配置十分重要。一定不要把s:property 标签写在textarea标签之间，如&textarea&&s:property
value=&entity.editor&
escape=&false&/&&/textarea&
这种写法是无效的，建议放在div标签内。
设置ckeditor编辑器只读，可以使用如下js代码：
//设置富文本编辑器内容只读
CKEDITOR.on(
&instanceReady&, function( ev )
editor = ev.
editor.setReadOnly(
富实际上在编辑框内所有的操作都是产生相应的html标签，按下回车键时默认的是翻译成p标签，按下shift+Enter时默认翻译成br标签。我们可以根据自己的需要修改相应的配置，修改如下目录的文件：
只需要修改ckeditor.js文件中的配置即可，ctr+F查找并修改enterMode:CKEDITOR.ENTER_P,只要修改为enterMode:CKEDITOR.ENTER_BR这样按下回车键，默认的行距就没有那么大了。
好了，今天还有工作要做，未完待续讨论ckfinder和ckeditor的其他使用.................................................
作者：java_myheart 发表于 19:57:52
阅读：0 评论：0
相关 [富文本 插件 ckeditor] 推荐：
- CSDN博客推荐文章
Ckeditor插件的下载首页：
/download，您可以根据自己的实际需要选择是Basic Package、Standard Package、Full Package. 这三个版本实际上就是插件包含的js数量不同，也就是插件功能的差别. 建议选择Full Package，因为ckeditor可以自定义插件的工具栏. 下载ckeditor之后，将ckeditor存放至项目的WebRoot根目录下面即可. 在页面引入js文件即可，如： &script
type=&text/javascript& src=&&%=basePath %&ckeditor/ckeditor.js&&&/script&.
- Jarod - 爱范儿 · Beats of Bits
iPhone 上的文字处理软件非常多，为什么要推荐这款 Essay. 因为它的简洁高效，因为它的云端同步，因为它顺手的控制功能，Essay 完全有实力成为沙砾中的宝石. 在 iPhone 上处理纯文本，用自带的备忘录就足够了，在什么情况下需要处理富文本呢. 例如想用 iPhone 完成一篇博客. 你当然可以用 WordPress for iPhone ，但它粗糙的功能和简陋的编辑器会让你失去愉快的感觉. 这时候 Essay 就派上用场了. 在有限的屏幕空间里，要如何把字符和格式控制按钮摆放出来才算得上是优雅. 放在 QWERTY 软键盘上方是个不错的选择，Essay 就是这么做的. 常用的格式按钮：加粗，斜体，下划线，删除线，撤销和恢复都摆在最顺手的地方.
- SotongDJ - 谷奥——探寻谷歌的奥秘
Google继续丰富搜索引擎的富文本摘要内容，随着移动应用的火热，现在他们推出了符合移动应用显示的富文本摘要. 如上图，目前支持Android Market和App Store里的应用，在富文本摘要里可显示出移动应用的图标（仅Android Market支持）、评价星级、用户评价数量、介绍和更新日期. 另外Google也会对一些在线的下载站呈现这种富文本摘要，比如CNET download. 如果你有一个下载站或一个在线的应用市场，可以在自己的代码里加入很简单的元数据，即可让应用的信息以这种新的富文本摘要形式显示在Google搜索里. (C) musiXboy 发表于 谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2011.
- 小熊TONY -
UEditor是由百度 Web前端研发部开发的所见即所得的富文本在线编辑器，具有轻量，可定制，注重用户体验等特点，开源基于BSD协议，允许互联网开发者自由传播和使用代码. 百度UEditor的推出，可以帮助不少网站开者在开发富文本编辑器所遇到的难题，节约开发者因开发富文本编辑器所需要的大量时间，有效降低了企业的开发成本.
- ITeye资讯频道
Web 应用经常会用到富文本编辑器功能，当然如果是 JavaScript 大牛，重复造轮子也是可以的，如果想省时省力，可以关注下下面 5 款免费的文本编辑器框架. widgEditor 体积小，只有 33.4 KB，简洁实用，支持 HTML 编码. 主要优点：朴素，代码小，易用；. 缺点：功能不足，不易扩展，缺乏第三方支持. 实例：
The Man in Blue – widgEditor. 下载：
widgEditor 1.0.1. 文档：下载包中包括文档文件. 使用方式：将源文件下载到本地磁盘，在适当的地方用下面代码进行引用. 实例：
Tiny MCE 应用实例. 下载：
Tiny MCE 4.0.x.
- SegmentFault 最新的文章
本文介绍如何在Flask项目中集成富文本编辑器xhEditor，并实现图片上传、文件上传、视频上传、远程抓图等（包括拖拽上传）功能. xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器，基于网络访问并且兼容IE 6.0+, Firefox 3.0+, Opera 9.6+, Chrome 1.0+, Safari 3.22+. xhEditor曾经是我比较喜欢的编辑器，也是率先支持拖拽上传的编辑器之一. xhEditor在当年是优秀的编辑器，功能足够强大，使用体验也相当好，拖拽上传是我最喜欢的功能，只可惜已经停止开发了. xhEditor最后的稳定版本是1.1.14，至今已超过2年未更新（2013年发布了开发版本1.2.1），作者已经停止开发和维护了，社区论坛完全不能打开.
- Will - ITeye资讯频道
百度正式发布Ueditor富文本Web编辑器，并向第三方开发者和团队开放编辑器源代码.
据了解，这款所见即所得的编辑器由百度web前端研发部开发，具有轻量，可定制，注重用户体验等特点. 业内人士认为，Ueditor开源编辑器能降低网站的开发成本，尤其在代码部署和定制化开发方面提供解决方案.
作为与用户体验息息相关的一个环节，编辑器的优劣将直接影响到用户的应用体验. 然而由于国内缺乏先进的富文本编辑器，致使很多开发者在选择web编辑器时往往无所适从，或用户体验效果不理想.
百度称Ueditor开源编辑器的发布将改变这一现状. Ueditor基于BSD开源协议，除了具有代码精简、加载迅速的轻量级特质外，还采用了分层理念，使开发者可以根据实际应用和需求自由定制.
- Zoe - 谷奥——探寻谷歌的奥秘
现在Google搜索结果将可识别出页面里的音乐，并可按照富文本摘要的形式显示出音乐的歌名、时长、是音乐还是音乐视频、来自哪张专辑，直接点击歌名可直达那首歌的页面. 目前已经有一些网站支持音乐的富文本摘要了，包括MySpace, Rhapsody 和 ReverbNation. 如果你也想让自己的音乐网站的搜索结果也提供音乐的富文本摘要，可以查看这篇文章，其实很简单，就是安装schema.org制定的音乐标记规则来加一些代码即可. 做好后你可以用富文本摘要测试工具来确认自己的代码是否有问题. (C) musiXboy 发表于 谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2011.
- Amo - 電腦玩物
開場白還是那句老話：Evernote是我個人慣用的數位筆記本. 接著，繼之前「Evernote Android 關鍵更新，支援富文本編輯與桌面預覽便利貼」後，今天Evernote的iOS App也進行了一番大改造，其中最關鍵的新功能，就是繼Android版本後，現在iPhone、iPad上的Evernote也可以擁有富文本編輯工具列，並且擁有中文介面了. 雖然對於太複雜的內容格式，例如表格等的支援還不是很完善，但起碼像是基本的項目清單、段落樣式、粗體、斜體、刪節線等編輯功能都已經可以在iPhone、iPad上使用，而iPad上的Evernote App甚至還多出一個「螢光筆」功能. 如果從我之前分享過的「我的 iPad 確實取代了小筆電： iPad 隨身行動筆記 App 應用心得」經驗出發，透過新版的Evernote App，就能利用iPad進行更有彈性的內容記錄功能了.
- JavaScript - Web前端 - ITeye博客
jQuery插件的开发包括两种：. 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1
、类级别的插件开发. 类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法. 典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中. 关于类级别的插件开发可以采用如下几种形式进行扩展：. 1.1
添加一个新的全局函数. 添加一个全局函数，我们只需如下定义：.
坚持分享优质有趣的原创文章，并保留作者信息和版权声明，任何问题请联系：@。}