CKEditor4 在java web中的应用说明（详细可行）

浏览数：60 / 时间：2015年06月08日

按照官方的说明书就可，这里主要注意一点！！

　　就是<script src="../ckeditor.js"></script>中js文件的路径问题，我的ckeditor文件夹是在WebContent文件夹下，jsp文件是同一层目录的，所以最后的代码应该是

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

注意斜杆号前面的一点，或者干脆写成如下格式：

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

这个问题弄了半个小时。！！！哎。

下次写关于上传图片的和上传文件的。

CKEditor 4 Documentation

CKEditor Quick Start Guide

Contents

The aim of this article is to get you up and running with CKEditor in two minutes.

Download

Visit the official CKEditor Download site. For a production site we recommend you choose the default Standard Package and click theDownload CKEditor button to get the .zip installation file. If you want to try out more editor features, you can download the Full Packageinstead.

Unpacking

Unpack (extract) the downloaded .zip archive to the ckeditor directory in the root of your website.

Trying Out

CKEditor comes with a collection of samples that you can try out to verify if the installation was successful as well as see some CKEditor usage scenarios, both basic and more advanced.

Open the following page in the browser: http://<your site>/ckeditor/samples/index.html

Browse the samples to see how CKEditor can be used and customized.

Adding CKEditor to Your Page

If the samples work correctly, you are ready to build your own site with CKEditor included.

To start, create a simple HTML page with a <textarea> element in it. You will then need to do two things:

Add a call to the CKEditor script in the <script> element of your page.
Use the CKEDITOR.replace() method to replace the existing <textarea> element with CKEditor.

See the following example:

<!DOCTYPE html>
<html>
    <head>
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="../ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( ‘editor1‘ );
            </script>
        </form>
    </body>
</html>

When you are done, open your sample page in the browser.

Congratulations! You have just installed and used CKEditor on your own page in virtually no time!

Next Steps

Go ahead and play a bit more with the samples; try to add the same functionality to your own pages (you can always see the sample source for some hints). And when you are ready to dive a bit deeper into CKEditor, you can try the following:

Check the Configuration section to see how to adjust the editor to your needs.
Get familiar with Advanced Content Filter. This is a useful tool that adjusts the content inserted into CKEditor to the features that are enabled and filters out disallowed content.
Modify your toolbar to only include the features that you need. You can find the complete list of all toolbar buttons available in your build in the "Toolbar Configurations" sample.
Browse the Add-ons Repository for some additional plugins or skins.
Use CKBuilder to create your custom CKEditor build.
Browse the Developer‘s Guide for some further ideas on what to do with CKEditor and join the community to discuss all things CKEditor with fellow developers!