1. 程式人生 > >CKEditor學習筆記2(CKEditor基本配置修改)

CKEditor學習筆記2(CKEditor基本配置修改)

第二篇,圍繞這5個問題進行基本配置:
1、自定義ToolbarSet,去掉一些功能
2、加上幾種常用的字型
3、修改“回車”和“Shift+回車”的換行行為
4、修改編輯區樣式檔案
5、更換表情圖片

這些資訊的配置,可以通過config.js檔案進行,當然也可以建立自己的配置檔案。
可以參考我的步驟:
1、首先建立一個目錄custom,接著在該目錄內新建一個myConfig.js配置檔案。

2、JavaScript呼叫方式二(上一篇內容),修改為:

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

有興趣的可以用JSP呼叫標籤來指定配置檔案。。。

好了,該切入主題了,哈哈。
1、首先了解一下,CKEditor提供的ToolbarSet
基本工具集
CKEDITOR.config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
完全工具集(當然功能很全,我們可以刪除不需要的功能)
CKEDITOR.config.toolbar_Full =
[
{ name: 'document',		items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard',	items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing',		items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms',		items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles',	items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph',	items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links',		items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert',		items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles',		items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors',		items : [ 'TextColor','BGColor' ] },
{ name: 'tools',		items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

Note that this setting is composed by "toolbar_name" added by the toolbar name。(這是文件上摘錄的一句話)
它說,工具集的名稱以toolbar_為字首+工具集名稱,好了,該建立屬於自己的工具集了。
注意:刪除的時候,不要破壞了它的結構。

myConfig.js
CKEDITOR.editorConfig = function( config )
{
}

myConfig.js(任務1:自定義ToolbarSet,去掉一些功能)
config.toolbar_mytool =
[
{ name: 'document',		items : [ 'Source','-','Save'] },
{ name: 'basicstyles',	items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph',	items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links',		items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert',		items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles',		items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors',		items : [ 'TextColor','BGColor' ] },
{ name: 'tools',		items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

myConfig.js(任務2:加上幾種常用的字型)
//字型編輯時的字符集 可以新增常用的中文字元:宋體、楷體、黑體等
config.font_names = "Arial;Times New Roman;Verdana";

myConfig.js(任務3:修改“回車”和“Shift+回車”的換行行為)
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;

myConfig.js(任務4:修改編輯區樣式檔案)
首先有必須瞭解一下,概念。
例如,現在有一個論壇網站,你可以引用別人的句子,再新增自己的評論(這時應該區分別人的評論和自己的評論吧,所以說需要給別人的評論內容新增樣式,但是這時有個問題(你頁面寫編寫的樣式,CKEditor編輯區不鳥你,哈哈),這時這個修改編輯區樣式就有用了。
這時也有兩種做法
方式一:
1、找到ckeditor目錄下的contents.css檔案,將需要用到的樣式新增進去(當前如果你這樣做,可能存在程式碼的重複性哦)
2、myConfig.js新增配置
config.contentsCss = "ckeditor/contents.css"
方式二:
1、在ckeditor目錄下建立一個css資料夾,用於放置CKEditor編輯區使用到的樣式,新建一個myCss.css。
2、contents.css檔案內,通過@import url(css/myCss.css)引入自己的css檔案。
3、myConfig.js新增配置
config.contentsCss = "ckeditor/contents.css"

CKEditor預設提供的表情圖片有點少,可以通過配置,新增更多的表情圖片,滿足需求。
阿里旺旺表情圖片
myConfig.js(任務:5更換表情圖片)
首先將下載目錄,放到ckeditor/plugins/smiley目錄下。
//表情路徑
config.smiley_path = CKEDITOR.basePath + 'plugins/smiley/wangwang/';
//表情圖片
config.smiley_images = [
    '1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif','11.gif',
    '12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif','21.gif',
    '22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif','31.gif',
    '32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif','41.gif',
    '42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif','50.gif','51.gif',
    '52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif','59.gif','60.gif','61.gif',
    '62.gif','63.gif','64.gif','65.gif','66.gif','67.gif','68.gif','69.gif','70.gif','71.gif',
    '72.gif','73.gif','74.gif','75.gif','76.gif','77.gif','78.gif','79.gif','80.gif','81.gif',
    '82.gif','83.gif','84.gif','85.gif'];
//單行表情個數
config.smiley_columns = 8;

如果你做到了這裡,恭喜你了,勝利不遠了。
現在表情框,因為沒有設定最大寬度、最大高度,滾動條效果,導致效果不咋的,解決這個問題很Easy,只需要修改一下CSS檔案(該解決方案感覺不好,可惜找不到其它解決方案。。。)
ckeditor/skins/kama/dialog.css檔案新增
.cke_dialog_ui_html{overflow-y:scroll; overflow-x:hidden;max-width:650px;max-height:455px;}
希望大家能看懂了,我的描述吧。下一篇將提到CKEditor+CKFind forJava整合。

相關推薦

CKEditor學習筆記2CKEditor基本配置修改

第二篇,圍繞這5個問題進行基本配置: 1、自定義ToolbarSet,去掉一些功能 2、加上幾種常用的字型 3、修改“回車”和“Shift+回車”的換行行為 4、修改編輯區樣式檔案 5、更換表情圖片 這些資訊的配置,可以通過config.js檔案進行,當然也可以建立自己的配

CKEditor學習筆記3CKEditor與CKFinder的Java整合

下載地址CKEditor 我下載的版本ckfinder_java_2.4 解壓之後,會看到一個CKFinderJava-2.4.war檔案,直接放到Tomcat/webapps釋出目錄下,把服務開啟就自動解壓了,然後將ckfinder目錄Copy到你專案WebRoot下。

AC自動機學習筆記-2Trie圖&&last優化

我是連月更都做不到的蒟蒻博主QwQ 考慮到我太菜了,考完noip就要退役了,所以我決定還是把部落格的倒數第二篇部落格給寫了,也算是填了一個坑吧。(最後一篇?當然是悲愴のnoip退役記啦QAQ) 所以我們今天學習的是AC自動機的Trie圖和last優化。如果不知道什麼是AC自動機,建議看一看我的上一篇部落格:A

python 查天氣學習筆記2crossin的程式設計教室

然而,照樣輸入程式會報錯: provinces=content1.split(',') TypeError: a bytes-like object is required, not 'str' 於是,加了一句就OK啦,轉化為字串:content1=str(urll

流媒體學習筆記2live555中的Session

畢業課題打算從最原始的地方做起。好吧,那就從live555採集轉發本地攝像頭視訊開始吧。首先從原始碼開始吧,今天看了點liveMedia中的session,這裡做個總結。 整個原始碼中的繼承順序為 H264VideoFileServerMediaSubsession::Fi

IKE學習筆記2IKE交換第一階段

   IKE第一階段目的是建立一個保密和驗證無誤的通訊通道(IKE SA),以及建立驗證過的金鑰。為雙方的IKE通訊提供機密性,訊息完整性以及訊息驗證服務。     參與通訊雙方會生成四種祕密:SKEYID(後續所有祕密建立在他之上);SKEYID_d(用於為其他協議,如ip

Ubuntu作業系統學習筆記2vi文字編輯器、程序的基本狀態及其轉換

文字編輯器是對純文字檔案進行編輯、檢視、修改等操作的應用程式。vi編輯器具有文字編輯的所有功能,並且執行速度快,具有強大的編輯功能,廣泛的適用性和靈活性。 一、vi文字編輯器 1、vi編輯器的啟動與退出 (1)啟動 格式:vi  [檔名] 檔名有以下情況: 未指定檔

IDEA 學習筆記之 安裝和基本配置

window eclipse 自動 ref size 工作 ips ctr line 安裝和基本配置: 下載:https://www.jetbrains.com/idea/download/#section=windows 下載Zip安裝包: 基礎知識:

ElasticSearch學習筆記--2、ES相關配置

last 學習 -- code logs 相關數 clas 名稱 config 1、配置文件 ES的配置文件位置:config/elasticsearch.yml可以直接搜索elasticsearch.yml 2、配置遠程api訪問 network.host: 192

Java學習筆記2輸入與隨機數簡單介紹

args image public 數據類型 system double next class gpo 輸入: import java.util.Scanner; public class ScannerDemo{   public static void main(Str

深度學習筆記2手寫字型

  1、下載手寫字型 網址【1】 2、下載程式碼 網址【2】   3、執行程式碼 直接執行就可以了   參考網址: 【1】MNIST資料集官方網址為:http://yann.lecun.com/exdb/mnist/&nbs

誰說菜鳥不會資料分析入門篇----- 學習筆記2結構為王:確定分析思路 4P 5W2H

1、資料分析方法論 確定分析思路需要以營銷、管理等理論為指導,把這些跟資料分析相關的營銷、管理等理論統稱為資料分析方法論。 資料分析方法論主要用來指導資料分析師進行一次完整的資料分析,更多的是指資料分析思路,如從哪方面開展資料分析?各方面包含什麼內容和指標。 資料分析方法論主要

TF學習筆記2建立一個釋出者

在接下來的兩個教程中,我們將編寫程式碼以重現tf介紹教程的Demo。之後,以下教程將重點放在使用更高階的tf功能擴充套件演示。 在開始之前,您需要為此專案建立一個新的ros包。 建立一個名為learning_tf的包,它依賴於tf,roscpp,rospy和turtlesim: $ c

Selenium3+webdriver學習筆記2常用元素定位方式,定位單個元素共8種,總共有18種

#!/usr/bin/env python# -*- coding:utf-8 -*-from selenium import webdriverimport time,os# about:addons 火狐瀏覽器安裝元件,訪問的地址# <input id="kw" name="wd" class="s

誰說菜鳥不會資料分析工具篇----- 學習筆記2結構為王:確定分析思路

1、資料分析方法論 確定分析思路需要以營銷、管理等理論為指導,把這些跟資料分析相關的營銷、管理等理論統稱為資料分析方法論。 資料分析方法論主要用來指導資料分析師進行一次完整的資料分析,更多的是指資料分析思路,如從哪方面開展資料分析?各方面包含什麼內容和指標。 資料分析方

ITK學習筆記2編譯介紹

##1 include檔案和類定義 在 ITK 中類最大限度地定義在兩個檔案中:一個是.h 字尾的標頭檔案;另一個是執行檔案,非模板類時為.cxx 字尾,模板類為.txx 字尾。 除了類的標頭檔案外,下面介紹一些其他重要的標頭檔案。 itkMacro.h:在目錄

資料結構與演算法學習筆記 2 2018.10.06

演算法分析 兩個主要方面:                  正確性:演算法的功能與問題要求一致?                                  數學證明?可不那麼簡單...                    成本:執行時間 + 所需儲存空間

QT學習筆記2應用程式設計基礎

一、UI檔案設計與執行機制 1、專案管理檔案(.pro) 專案的管理檔案以 .pro結尾,開啟之後 #------------------------------------------------- # # Project created by QtCreator

Socket學習筆記之一常用基本定義

常用型別的定義:(以下定義從Winsock2.h檔案中擷取)/* * The new type to be used in all * instances which refer to sockets. */typedef UINT_PTR        SOCKET;//SOCKET原來就是一個

python學習筆記2隨機數,運算子與表示式

隨機數的常見操作 #隨機數 import random print(random.choice([1,3,5,7,9,aa])) #從1,3,5,7,9,aa中隨機取一個 print(random.choice(range(5))) #range(5)=[0,1,2,3,4] pr