zoukankan      html  css  js  c++  java
  • CKEditor与定制

    开始使用

    官网

    基本示例:

    1. 搭建服务器(这里使用apache)
    2. 下载standard的ckeditor解压放在apache的htdocs的目录下
    3. 在htdoc下面新建index.html,写入代码:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>A Simple Page with CKEditor</title>
            <!-- Make sure the path to CKEditor is correct. -->
            <script src="ckeditor/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>
    

    注意:上面引入ckeditor.js的路径要写正确。

    打开localhost:apache端口/index.html,看到ckeditor的页面,说明配置正确。接下来就自定义的扩展了。

    二 配置

    所有配置项: 参见。右上角可以简单搜索。

    2.1 在页面配置

    最好的配置方式在加载页面的时候设置配置:

    CKEDITOR.replace( 'editor1', {
      language: 'zh-cn',
      uiColor: '#9AB8F3'
    });
    

    2.2 使用配置文件配置

    主要配置:config.js,位于ckeditor根目录。默认的配置文件,大部分是空的,添加想要的配置进去,CKEDITOR.editorConfig方法是必须的。如:

    CKEDITOR.editorConfig = function( config ) {
      config.language: 'zh-cn',
      config.uiColor: '#9AB8F3'
    };
    

    2.3 使用用户自定义配置文件

    这是另一个推荐使用的配置方式。代替使用默认的config.js文件。复制一份该config.js,然后指向它,避免修改默认的配置文件,以后再升级CKEditor时,可以直接覆盖现在的所有文件,而不会覆盖到配置文件。
    复制config.js重命名为custom.js或者其他,放在网站根目录下,然后加载页面创建editor实例的时候指向该配置即可。如:

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

    ckeditor_config.js配置

    CKEDITOR.editorConfig = function( config ) {
      config.language = 'zh-cn'; //这里是等号
      config.uiColor = '#9AB8F3'
    }
    

    2.4 配置的加载顺序

    上面的3中配置方式可以混合使用,只是会有加载顺序或者覆盖的情况。
    custom.js > 当前页面加载时写的配置 > 默认的配置文件

    2.5 禁止加载额外的配置文件

    把customConfig的路径指空即可

    CKEDITOR.replace( 'editor1', {
        customConfig: ''
    });
    

    打开文件上传和图片上传按钮

    配置:

    filebrowserImageUploadUrl: '/uploader/upload.php?type=Images',
    filebrowserImageBrowseUrl: '/uploader/upload.php?type=Images',
    filebrowserBrowseUrl: '/uploader/upload.php',
    filebrowserUploadUrl: '/uploader/upload.php',
    

    注意:配置了要等很久才会生效,大概半个小时到一个小时

    集成外部文件浏览与上传

    去除图片那堆预览的拉丁文

    image_previewText: ' '
    

    安装插件

    插件驱动的框架。直接看官文,详细的很。

    推荐Online builder添加插件,会自动安装该插件依赖的其他的插件(手动的不知道依赖关系),选择好了要安装的插件,重新下载ckeditor覆盖原来的就好。

  • 相关阅读:
    Codeforces Round #709 (Div. 2, based on Technocup 2021 Final Round)
    Codeforces Round #708 (Div. 2)
    Educational Codeforces Round 106 (Rated for Div. 2)
    ccf csp 202012-1
    带配额的文件系统 (带模拟)
    阔力梯的树
    Codeforces Round #707 (Div. 2, based on Moscow Open Olympiad in Informatics)
    如何获取某个网站IP地址?
    C++开发者眼中的Java关键字abstract
    Java代码中如何获文件名和行号等源码信息?
  • 原文地址:https://www.cnblogs.com/for-you/p/8745864.html
Copyright © 2011-2022 走看看