ckeditor的使用以及配置
1.使用ckeditor須要作的準備工做
- 須要下載ckeditor相關的.war文件(官網下載便可)，所謂的.war文件，其實就是咱們通常的所說的項目歸檔文件；
- 將下好的文件，粘貼到咱們的tomact服務器下面的webapps文件夾中；
- 手動啓動服務器，這時候，webapps下面就會多出來一個ckeditor的項目，其實就是咱們.war文件的解壓。
##2.使用ckeditor標籤替換頁面的指定文本域javascript
- 既然是使用ckeditor標籤，天然，咱們就須要導入相關的包。那包文件在哪裏找呢？其實，上面咱們不是說過，服務器啓動後，會多出來一個ckeditor的項目，我這裏是ckeditor-java-3.6.6.2，這就是一個開源項目，咱們在裏面的WEB-INF->lib找到一個.jar文件，就是咱們須要導入的標籤庫的包，我這裏是ckeditor-java-core-3.5.3.jar；
- 咱們在jsp頁面中引入標籤庫，跟咱們引入jstl的標籤庫同樣的方式
<%@ taglib prefix="ckeditor" uri="http://ckeditor.com" %>
至於相關參數，例如，prefix等咱們怎麼知道，填什麼的呢？咱們將jar文件粘貼到咱們項目的WEB-INF->lib中後，就會生成一個Referenced Libraries，在裏面找到咱們的jar文件，其中在META-INF中會有一個ckeditor.tld的文件，這個裏面就有咱們所須要的參數；java
- 咱們將tomacat->wbeapps中的ediotr項目中的ckeditor文件夾拷貝到咱們項目的webroot下面。由於咱們替換時須要指定basePath；
- 咱們在jsp頁面中寫一個textarea,並給它一個id，接着用ckeditor標籤去進行替換
<form> <textarea id="content" style=""></textarea> </form> <ckeditor:replace replace="content" basePath="ckeditor"></ckeditor:replace>
其中，replace屬性是咱們的textarea的id，basePath指咱們的ckeditor文件夾的路徑web
##2.使用ckeditor替換頁面全部的文本域數據庫
- 具體的實現方法與上面同樣，可能在頁面中咱們有多個textarea標籤,(注意要設置每一個標籤的id不同)，而後咱們利用repaceAll來具體實現
<form>
<textarea id="content"></textarea>
<textarea id="content2"></textarea>
</form>
<ckeditor:replaceAll basePath="ckeditor"></ckeditor:replaceAll>
##3.使用ckeditor建立實例服務器
- 這裏咱們可能就再也不須要textarea標籤了，而是直接建立一個ckeditor實例
<form> <ckeditor:editor editor="content" basePath="ckeditor" config="<%=cfg %>"></ckeditor:editor> </form>
其中這裏的editor屬性，相似於，咱們建立textarea時指定的name和id，config是咱們的配置信息，咱們可能須要配置ckeditor。(後面我會寫到)app
##4.使用javascript直接替換文本域webapp
- 上面的三種方式，都有一種共同點，就是咱們須要使用到java語言。那麼咱們能不能用一種與服務端無關的語言去進行替換呢？實際上，咱們是能夠直接利用javascript進行文本域的替換。
一、在頁面<head>中引入ckeditor核心文件ckeditor.js
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
二、在使用編輯器的地方插入HTML控件<textarea>
<textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>
若是是ASP.NET環境，也可用服務器端控件<TextBox>
<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox>
注意在控件中加上 class="ckeditor" 。
三、將相應的控件替換成編輯器代碼
<script type="text/javascript">
CKEDITOR.replace('TextArea1');
//若是是在ASP.NET環境下用的服務器端控件<TextBox>
CKEDITOR.replace('tbContent');
//若是<TextBox>控件在母版頁中，要這樣寫
CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>');
</script>
<form>
<textarea id="content" name="content"></textarea>
</form>
<script>
window.onload = function(){
CKEDITOR.replace("content");
}
</script>
在頁面加載的時候，咱們去執行CKEDITOR.replace("content");在這裏咱們須要導入ckeditor文件夾下面的ckeditor.jsjsp
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
上面我主要講了ckeditor使用的4中方式，下面我介紹ckeditor的相關配置編輯器
##5.ckeditor常見的幾種配置參數。這裏只是簡單列舉。參數有不少工具
- 下面是ckeditor常見的幾種配置參數
ckeditor的配置都集中在 ckeditor/config.js 文件中，下面是一些經常使用的配置參數：
// 界面語言，默認爲 'en'
config.language = 'zh-cn';
// 設置寬高
config.width = 400;
config.height = 400;
//編輯器樣式，有三種：'kama'（默認）、'office2003'、'v2'
config.skin = 'v2';
// 背景顏色
config.uiColor = '#FFF';
// 工具欄（基礎'Basic'、全能'Full'、自定義）plugins/toolbar/plugin.js
config.toolbar = 'Basic';
config.toolbar = 'Full';
這將配合：
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'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
];
//工具欄是否能夠被收縮
config.toolbarCanCollapse = true;
//工具欄的位置
config.toolbarLocation = 'top';//可選：bottom
//工具欄默認是否展開
config.toolbarStartupExpanded = true;
// 取消 「拖拽以改變尺寸」功能 plugins/resize/plugin.js
config.resize_enabled = false;
//改變大小的最大高度
config.resize_maxHeight = 3000;
//改變大小的最大寬度
config.resize_maxWidth = 3000;
//改變大小的最小高度
config.resize_minHeight = 250;
//改變大小的最小寬度
config.resize_minWidth = 750;
// 當提交包含有此編輯器的表單時，是否自動更新元素內的數據
config.autoUpdateElement = true;
// 設置是使用絕對目錄仍是相對目錄，爲空爲相對目錄
config.baseHref = ''
// 編輯器的z-index值
config.baseFloatZIndex = 10000;
##6.ckeditor配置的兩種方式
- 經過CKEditorConfig對象來進行配置，配置完成以後，要在ckeditor標籤中綁定config信息
<%
CKEditorConfig cfg = new CKEditorConfig();
cfg.addConfigValue("width","600");//設置高度
cfg.addConfigValue("skin","office2003"); //設置主題
//設置禁止拖拽
cfg.addConfigValue("resize_enabled",false);
%>
<ckeditor:editor editor="content" basePath="ckeditor" config="<%=cfg %>"></ckeditor:editor>
能夠看到，這樣實際上是很繁瑣的，由於咱們要以這種鍵值對的方式去進行設置，並且須要在jsp頁面中寫入java代碼，因而，咱們通常能夠經過第二種方式。
- 經過設置config.js來進行配置
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.width = 700;
config.height = 300;
config.resize_enabled = false;
//自定義工具條
config.toolbar_Full = [
['Source','-','Save','NewPage','Preview','-','Templates']
];
};
咱們能夠修改config.js來進行ckeditor的相關配置，可是必定要注意引入的問題，咱們須要引入這個js文件在第四種使用方式中，前三種不須要是由於，咱們使用ckeditor標籤的時候，指明的basePath。
##7.ckeditor提交表單
- 這裏與咱們普通的提交表單方式同樣。
<form action="EditorServlet" method="post"> <textarea id="content" name="content"></textarea> <input type="submit" value="提交"/> </form> <ckeditor:replace replace="content" basePath="ckeditor"></ckeditor:replace>
String content = request.getParameter("content");
System.out.println(content);
request.setAttribute("content",content);
request.getRequestDispatcher("result.jsp").forward(request, response);
<body>
${content }
</body>
其中，要注意的一點是，通常咱們須要將內容存放到數據庫中，再從數據庫中取出來，這樣一來，就很容易出現中文亂碼的問題，爲了防止這個問題，最好是將，咱們的content採用url編碼方式存放到數據庫中，從數據庫中取出來的時候，咱們再利用url解碼，這樣就防止中文亂碼問題。即URLEncoder.encode(s, enc)和URLEncoder.decode(s, enc)方法，其中s是咱們的content，enc即咱們須要設置的編碼方式，通常「utf-8」
相關文章
- 1. ckeditor的配置及使用
- 2. CKEditor配置及使用
- 3. CKeditor 配置使用
- 4. CKEDITOR使用與配置
- 5. CKEditor 3.0 配置 使用
- 6. JAVA裏使用CKEditor和CKFinder的配置
- 7. ckeditor、ckeditor配置--整合
- 8. (轉載)CKEditor 3.0 配置 使用
- 9. 配置ckeditor
- 10. CKEditor 3.0 配置
- 更多相關文章...
- • Spring Bean的配置及常用屬性 - Spring教程
- • Hibernate事務的配置 - Hibernate教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
- • IDEA下SpringBoot工程配置文件沒有提示
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章