search
HomeWeb Front-endHTML TutorialCKEditor使用笔记_html/css_WEB-ITnose

相关资源

1. 首页地址:http://ckeditor.com/

2. 下载地址:http://ckeditor.com/download

3. SDK地址:http://sdk.ckeditor.com/

如何开始

1、选择位置,放置CKEditor的包

如:放置在webapp/plugin路径下,其中webapp是web项目的根目录。

2、在页面中引入ckeditor.js

<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/ckeditor/ckeditor.js"></script>

3、在页面中定义textarea,定义id和name属性

<textarea id="editor" name="content"></textarea>

4、激活控件

在页面加载完成后调用下述语句:

CKEDITOR.replace("editor"); // 指定textarea的id或name

如果顺利,可以看到效果:

补充:

1. 激活控件需要指定textarea的id或name,优先使用id,name用于作为请求参数的key。

2. 激活控件之后,原textarea隐藏,CKEditor取代textarea展示。控件中输入的内容和隐藏的textarea的内容不是实时同步的,目前所知,表单提交前是会同步的,后台根据textarea的name获取的参数值和ckeditor的输入是一致的。

3. 如果想在js随时获取控件的内容,可以使用下述的语句:

var value = CKEDITOR.instances.editor.getData();

注意:editor是CKEDITOR的一个instance,与激活控件时传入的字符串一致。

自定义配置

ckeditor/config.js文件用于CKEditor的配置。刚下载下来时,内容如下:

/** * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or http://ckeditor.com/license */CKEDITOR.editorConfig = function( config ) {    // Define changes to default configuration here. For example:    // config.language = 'fr';    // config.uiColor = '#AADC6E';};

我们需要自定义配置,写在方法里。

配置工具栏

CKEditor划分了三个版本,支持详简不同的工具栏。如果我们需要在此基础上进行配置,可以使用下载包里提供的配置工具,直接以本浏览器打开/ckeditor/samples/toolbarconfigurator/index.html

工具栏的层级划分:行 — 工具条 — 组 — 项目。行与行之间,以row separator分隔;工具条之间有明显的间距;组之间有竖线。

配置完成之后,点击Get toolbar config按钮,可以得到一份源码,将源码copy到config.js中,就实现了工具栏的配置。

字体配置

config.font_names = '宋体/SimSun;新宋体/NSimSun;仿宋/FangSong';

如:将上述代码复制到config.js的方法中,可以配置控件的字体分别为宋体、新宋体、仿宋。

控件可以配置多个字体实体,字体之间以;分隔。字体又分显示名和设置名之别,以/分隔;显示名用于在控件中显示,设置名用于设置对应的font-family,所以设置名不能随意填写。如,按照上述的配置,选择了新宋体之后,输出的代码为style="font-family:nsimsun"。

font-family可以设置多个字体的序列,所以控件的一个字体实体,可以有多个输出名,以,分隔。如:

config.font_names = 'Times New Roman/Times New Roman, Times, serif';

换行模式配置

在默认的情况下,Enter键是添加一个p标签,而Shift+Enter是添加一个br标签。控件提供了三种模式:

1. CKEDITOR.ENTER_P

新增一个p标签

2. CKEDITOR.ENTER_BR

新增一个br标签

3. CKEDITOR.ENTER_DIV

新增一个div标签

控件使用下述的参数名来配置模式:

1. enterMode

配置单击Enter键的模式

2. shiftEnterMode

配置Shift + Enter组合键的模式

如下述代码:

config.enterMode = CKEDITOR.ENTER_BR; // 配置Enter是换行config.shiftEnterMode = CKEDITOR.ENTER_P; // 配置Shift + Enter是换段落

更多配置

参考CKEDITOR.config的API。

配置的方式

除了上文中描述的,直接修改config.js文件,还有另外两种配置的方式。

1. 激活时配置

CKEDITOR.replace( 'editor', {    language: 'fr',    uiColor: '#9AB8F3'});

2. 自定义配置文件

CKEDITOR.replace( 'editor1', {    customConfig: '/custom/ckeditor_config.js'});

要求自定义配置文件的结构和默认的config.js一致。

功能试炼

1、初始最大化

CKEDITOR.editor有事件instanceReady,CKEDITOR.editor#on( 'instanceReady', function(evt) )可以捕捉控件初始化完成的时机;

CKEDITOR.instances.editorId可以获取指定editorId的CKEDITOR.editor实例;

CKEDITOR.editor#execCommand( commandName, [data] )用于执行命令,'maximize'是最大化命令;

结合以上知识,我们可以得到代码

CKEDITOR.instances.editor.on('instanceReady', function (e) {    CKEDITOR.instances.editor.execCommand('maximize'); // 初始最大化});

2、获取控件的富文本内容

CKEDITOR.editor#getData()可用于获取富文本的内容

var value = CKEDITOR.instances.editor.getData();

3、打印预览

CKEDITOR.instances.editor.execCommand('preview');  // 预览CKEDITOR.instances.editor.execCommand('print');  // 打印

关于execCommand的说明

"maximize"是最大化的命令,"preview"是预览的命令,"print"的命令。大家一定想要一份command的清单,求知有哪些命令可供我们使用。很遗憾,我没有找到这样的清单,通过走读源码,在ckeditor.js中,会调用CKEDITOR.plugins.add( {String}name, {Object}[definition] )来注册资源,"maximize"、"preview"、"print"都在其中。

通过关键字匹配,共有72个资源:

dialogui, dialog, about, a11yhelp, dialogadvtab, basicstyles, bidi, blockquote, clipboard, button, panelbutton, panel, floatpanel, colorbutton, colordialog, templates, menu, contextmenu, div, resize, toolbar, elementspath, enterkey, entities, popup, filebrowser, find, fakeobjects, flash, floatingspace, listblock, richcombo, font, forms, format, horizontalrule, htmlwriter, iframe, wysiwygarea, image, indent, indentblock, indentlist, smiley, justify, menubutton, language, link, list, liststyle, magicline, maximize, newpage, pagebreak, pastetext, pastefromword, preview, print, removeformat, save, selectall, showblocks, showborders, sourcearea, specialchar, scayt, stylescombo, tab, table, tabletools, undo, wsc

 

Technorati 标签: CKEditor使用, CKEditor配置

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Beyond HTML: Essential Technologies for Web DevelopmentBeyond HTML: Essential Technologies for Web DevelopmentApr 26, 2025 am 12:04 AM

To build a website with powerful functions and good user experience, HTML alone is not enough. The following technology is also required: JavaScript gives web page dynamic and interactiveness, and real-time changes are achieved by operating DOM. CSS is responsible for the style and layout of the web page to improve aesthetics and user experience. Modern frameworks and libraries such as React, Vue.js and Angular improve development efficiency and code organization structure.

What are boolean attributes in HTML? Give some examples.What are boolean attributes in HTML? Give some examples.Apr 25, 2025 am 12:01 AM

Boolean attributes are special attributes in HTML that are activated without a value. 1. The Boolean attribute controls the behavior of the element by whether it exists or not, such as disabled disable the input box. 2.Their working principle is to change element behavior according to the existence of attributes when the browser parses. 3. The basic usage is to directly add attributes, and the advanced usage can be dynamically controlled through JavaScript. 4. Common mistakes are mistakenly thinking that values ​​need to be set, and the correct writing method should be concise. 5. The best practice is to keep the code concise and use Boolean properties reasonably to optimize web page performance and user experience.

How can you validate your HTML code?How can you validate your HTML code?Apr 24, 2025 am 12:04 AM

HTML code can be cleaner with online validators, integrated tools and automated processes. 1) Use W3CMarkupValidationService to verify HTML code online. 2) Install and configure HTMLHint extension in VisualStudioCode for real-time verification. 3) Use HTMLTidy to automatically verify and clean HTML files in the construction process.

HTML vs. CSS and JavaScript: Comparing Web TechnologiesHTML vs. CSS and JavaScript: Comparing Web TechnologiesApr 23, 2025 am 12:05 AM

HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

HTML as a Markup Language: Its Function and PurposeHTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AM

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The Future of HTML, CSS, and JavaScript: Web Development TrendsThe Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorHTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignThe Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),