zoukankan      html  css  js  c++  java
  • CKEditor使用

    一个强大的HTML文本编辑插件,主要实现了在线网页编辑的功能!操作起来就跟MS WORD一样简单!据我所知,FCKeditor是目前互联网上最好的编辑器,功能强大,支持多种浏览器,无平台限制,可以和多种WEB语言融合,多语言支持,开源等。

    文档地址:http://docs.ckeditor.com/

    首先引入文件:

    <script src="/ckeditor/ckeditor.js"></script>

    创建editor:

    Now that the CKEditor JavaScript API is available on the page, you can use it to create editor instances. There are two different options available in order to achieve this:

    • Framed Editing – the most common way to use CKEditor, when the editor is usually represented by a toolbar and an editing area placed in a specific position on the page.

    • Inline Editing – used on pages that need to look like the final page. Editing is enabled directly on HTML elements through the HTML5 contenteditableattribute. The editor toolbar appears automatically for these elements, floating on the page.

    In order to examine both usage scenarios, choose the preferred option above to get more information. See also the Framed Editing and Inline Editing demos on our website.

    一般用的是Framed edit。

    Creating a Framed Editor

    In Framed Editing, CKEditor works just like a <textarea> element on your page. The editor offers a user interface to write, format, and work with rich text in a hassle-free manner, but the same content could be added (though not that easily) through a <textarea> element, requiring the user to type HTML code inside.

    As a matter of fact, CKEditor uses the <textarea> element to transfer its data to the server. The <textarea> element is invisible to the end user. In order to create an editor instance, you must first add a <textarea> element to the source code of your HTML page:

    <textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>

    Note that if you want to load data into the editor, for example from a database, you need to put that data inside the <textarea> element, just like the HTML-encoded <p> element in the example above. In this case the <textarea> element was named editor1. This name can be used in the server-side code later, when receiving the posted data.

    After the <textarea> element is inserted, you can use the CKEditor JavaScript API to replace this HTML element with an editor instance. A simpleCKEDITOR.replace method call will be enough to achieve that:

    <script>CKEDITOR.replace('editor1');</script>

    This script block must be included at any point after the <textarea> tag in the source code of the page. You can also call the CKEDITOR.replace method inside the <head> section, but in this case you will need to listen for the window.onload event:

    <script>
        window.onload = function() {
            CKEDITOR.replace( 'editor1' );
        };
    </script>

    Saving the Editor Data

    As stated above, the editor works just like a <textarea> field. This means that when submitting a form containing an editor instance, its data will simply be posted, using the <textarea> element name as the key to retrieve it.

    For example, following the above example, you could create the following PHP code:

    <?php
        $editor_data = $_POST[ 'editor1' ];
    ?>

    Client-Side Data Handling


    Some applications (like those based on Ajax) need to handle all data on the client side, sending it to the server using their specific methods. If this is the case, it is enough to use the CKEditor JavaScript API to easily retrieve the editor instance data. In order to do this, you can use the getData method:

    <script>
       var editor_data = CKEDITOR.instances.editor1.getData();
    </script>


    完整的例子:To insert a CKEditor instance, you can use the following sample that creates a basic page containing a form with a <textarea> element that is replaced with CKEditor.
    <!DOCTYPE html>
    <html>
    <head>
        <title>CKEditor Sample</title>
        <script src="/ckeditor/ckeditor.js"></script>
    </head>
    <body>
        <form method="post">
            <p>
                My Editor:<br>
                <textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
                <script>
                    CKEDITOR.replace( 'editor1' );
                </script>
            </p>
            <p>
                <input type="submit">
            </p>
        </form>
    </body>
    </html>

    自己配置config.js

    CKEDITOR.editorConfig = function( config ) {
        // Define changes to default configuration here. For example:
        // config.language = 'fr';
        // config.uiColor = '#AADC6E';
    };

    或者在page页面动态配置:

    In-page settings can be passed to any of the editor instance creation functions, namely CKEDITOR.replace and CKEDITOR.appendTo. For example:

    CKEDITOR.replace( 'editor1', {
        toolbar: 'Basic',
        uiColor: '#9AB8F3'
    });

    配置toolbar

    While CKEditor is a full-featured WYSIWYG editor, not all of its options may be needed in all cases. Because of this, toolbar customization is one of the most common requirements.

    There are two ways to configure the toolbar to match your needs:

    组配置group:

    Grouping configuration is defined by the toolbarGroups setting. The following the the configuration used by the "standard" distribution of CKEditor:

    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

    it is a list (Array) of objects, each one with a "name" (e.g "clipboard" or "links") and a optional "sub-groups" list.

    Changing the Groups Order
    You can easily customize the groups ordering and position by simply changing the above configuration.

    You can force row-breaks in the toolbar by adding '/' into the list, just like you could see above.

    Note that there are unused groups in the above configuration. This is "by design" (see "The Benefits of Group Configuration").

    The Benefits of Group Configuration
          The most important benefit of toolbar grouping configuration over the "item by item" configuration is: automation.

        It is now possible for plugin developers to define into which group their plugins should add buttons in the toolbar. For example, the "image" plugin, includes its button into the "insert" group, while the undo and redo buttons go into the "undo" sub-group.

       While not mandatory, having all groups and sub-groups configured (including not used ones) is recommended because at any moment in the future, when a new plugin gets installed, its button will automatically appear in the toolbar without further configuration requirements.

    The Drawbacks of Group Configuration

       The most evident problem with grouping configuration its that it is not possible to control precisely where each item is placed in the toolbar. It is the plugin itself to decide it.

    "Item by Item" Configuration

    Other than the grouping configuration, it is also possible to have more control over every single element in the toolbar by defining their precise position. That is done by configuring a "toolbar definition".

    A toolbar definition is a JavaScript array that contains the elements to be displayed in all toolbar rows available in the editor. The following is an example: 这种方法比较好:

    config.toolbar = [
        { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },
        { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
        '/',
        { name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
    ];

    Here every toolbar group is given a name and their precise list of items is defined.

    The above can also be achieved with a simpler syntax (see "Accessibility Concerns" later on):

    config.toolbar = [
        [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
        [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
        '/',
        [ 'Bold', 'Italic' ]
    ];

    Items separator can be included by adding '-' (dash) to the list of items, as seen above.( -破折号表示项目分隔符)

    You can force row-breaks in the toolbar by adding '/' between groups. They can be used to force a break at the point where they were placed, rendering the next toolbar group in a new row.

    The Benefits of "Item by Item" configuration
      The most evident benefit of this kind of configuration is that the position of every single item in the toolbar is under control.

    The drawbacks of "Item by Item" configuration
       The biggest problem it that there will be no automation when new plugins get installed. This means that, if any new plugin get into your editor, you'll have to manually change your configurations, to include the plugin buttons at any desired position.

  • 相关阅读:
    centos下安装Anaconda
    centos下安装python2.7.9和pip以及数据科学常用的包
    mysql基础(5)-关联(mysql+pandas)
    mysql基础(4)-数据导入
    mysql基础(3)-高级查询
    mysql基础(2)-数据处理(mysql+pandas)
    mysql基础(1)-基本操作
    创建线程的三种方法
    Jar 包 及运行Jar包
    导出成可运行jar包时所遇问题的解决办法
  • 原文地址:https://www.cnblogs.com/youxin/p/3150547.html
Copyright © 2011-2022 走看看