文章目錄javascript

1、CKEditor概述

CKEditor是一款專業在線文字編輯器，支持各類不一樣的瀏覽器，可讓Web開發者輕鬆實如今線編輯功能。

一、在頁面頭部引入ckeditor核心文件ckeditor.js

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

二、在使用編輯器的地方插入文本區控件

<textarea id="mckeditor" cols="20" rows="2" class="ckeditor"></textarea>

注意在控件中加上 class="ckeditor" 。

三、將相應的控件替換成編輯器代碼

<script type="text/javascript">

    CKEDITOR.replace('mckeditor');

</script>

四、配置ckeditor編輯器

ckeditor的配置都集中在 ckeditor/config.js 文件中，下面是一些經常使用的配置參數：

CKEDITOR.editorConfig = function( config )

{

    config.language = 'zh-cn'; // 配置語言   

    config.uiColor = '#FFF'; // 背景顏色   

    config.width = 'auto'; // 寬度   

    config.height = '300px'; // 高度   

    config.skin = 'office2003'; // 界面v2,kama,office2003   

    config.toolbar = 'Full'; // 工具欄風格Full,Basic 

    config.font_names='宋體/宋體;黑體/黑體;仿宋/仿宋_GB2312;楷體/楷體_GB2312;隸書/隸書;幼圓/幼圓;'+ config.font_names; // 將中文字體加入到字體列表    

};

2、案例演示

一、建立Web項目CKEditorDemo

二、從網上下載ckeditor，添加到web目錄

三、在web目錄裏建立upload子目錄，在裏面建立一個測試文件

四、在web目錄裏建立上傳頁面upload.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<html>
<head>
    <title>在線編輯器CKeditor演示</title>
</head>
<body>
<h3>在線編輯器CKeditor演示</h3>
<form action="do_upload.jsp" method="post" onsubmit="return checkEditor();">
		<textarea cols="80" id="mckeditor" name="mckeditor" rows="10">
			歡迎使用CKeditor在線編輯器！
		</textarea>
    <script type="text/javascript">
        CKEDITOR.replace('mckeditor', {
            filebrowserImageUploadUrl: '../../fileUpload?type=image',// 圖片上傳組件路徑
            filebrowserFlashUploadUrl: '../../fileUpload?type=flash' // Flash上傳組件路徑
        });
    </script>
    <input type="submit" name="submit" value="提交"/>
</form>
<script type="text/javascript">
    //編輯器內容檢查
    function checkEditor() {
        //經過javascript	代碼讀取編輯器中的內容
        var editor_data = CKEDITOR.instances.mckeditor.getData();
        if (editor_data == "") {
            alert("編輯器內容不能爲空，請輸入具體內容而後再提交！");
            return false;
        } else {
            return true;
        }
    }
</script>
</body>
</html>

五、在web目錄裏建立上傳處理頁面do_upload.jsp

<%@ page import="java.io.File" %>
<%@ page import="java.io.FileOutputStream" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>在線編輯器CKeditor演示</title>
</head>
<body>
<h3>在線編輯器CKeditor演示</h3>
<hr>
<%
    request.setCharacterEncoding("utf-8");
    String context = request.getParameter("mckeditor");
    String realPath = application.getRealPath("/upload").replaceAll("\\\\", "/");
    String fileName = String.valueOf(System.currentTimeMillis()) + ".html";
    File file = new File(realPath, fileName);
    FileOutputStream fos = new FileOutputStream(file);
    fos.write(context.getBytes());
    fos.flush();
    fos.close();
    out.println("表單內容已寫入文件：" + realPath + "/" + fileName + "<hr>");
    out.println(context);
%>
</body>
</html>

六、啓動服務器，查看運行效果

3、課後做業

嘗試在Web應用中嵌入使用Markdown編輯器。

本文分享 CSDN - howard2005。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。

Java Web學習筆記12：CKEditor在線編輯器