CKEditor.js的配置，大概有两种方式，这里有基础版和全面的版本可以试验

  1.  https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js
  2.  http://cdn.bootcss.com/ckeditor/4.8.0/ckeditor.js

1.直接上代码，工具栏的配置修改 toolbar 中的属性查看

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!-- <script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script> -->
  6.     <script src="http://cdn.bootcss.com/ckeditor/4.8.0/ckeditor.js"></script>
  7.     <title>Document Editor</title>
  8.     <style type="text/css">
  9.         /* Minimal styling to center the editor in this sample */
  10.         body {
  11.             padding: 30px;
  12.             display: flex;
  13.             align-items: center;
  14.             text-align: center;
  15.         }
  16.         .container {
  17.             margin: 0 auto;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <div class="container">
  23.     <h2><label for="editor1">Document Editor</label></h2>
  24.     <textarea id="editor1">
  25.         &lt;h2 style="text-align: center;"&gt;The Flavorful Tuscany Meetup&lt;/h2&gt;
  26.         &lt;p style="text-align: center;"&gt;&lt;span style="color: #007ac9;"&gt;&lt;strong&gt;Welcome letter&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
  27.         &lt;p&gt;Dear Guest,&lt;/p&gt;
  28.         &lt;p&gt;We are delighted to welcome you to the annual &lt;em&gt;Flavorful Tuscany Meetup&lt;/em&gt; and hope you will enjoy the programme as well as your stay at the Bilancino Hotel.&lt;/p&gt;
  29.         &lt;p&gt;Please find below the full schedule of the event.&lt;/p&gt;
  30.         &lt;table class="schedule" cellpadding="15" cellspacing="0" style="border-collapse:collapse;width:100%;"&gt;
  31.             &lt;thead&gt;
  32.                 &lt;tr&gt;
  33.                     &lt;th colspan="2" scope="col" style="background-color: #F2F9FF; text-align: center; font-size: 21px;"&gt;&lt;span&gt;Saturday, July 14&lt;/span&gt;&lt;/th&gt;
  34.                 &lt;/tr&gt;
  35.             &lt;/thead&gt;
  36.             &lt;tbody&gt;
  37.                 &lt;tr&gt;
  38.                     &lt;td style="white-space:nowrap;"&gt;&lt;span&gt;9:30 AM - 11:30 AM&lt;/span&gt;&lt;/td&gt;
  39.                     &lt;td&gt;&lt;span&gt;Americano vs. Brewed - “know your coffee” session with &lt;strong&gt;Stefano Garau&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
  40.                 &lt;/tr&gt;
  41.                 &lt;tr&gt;
  42.                     &lt;td style="white-space:nowrap;"&gt;&lt;span&gt;1:00 PM - 3:00 PM&lt;/span&gt;&lt;/td&gt;
  43.                     &lt;td&gt;&lt;span&gt;Pappardelle al pomodoro - live cooking session with &lt;strong&gt;Rita Fresco&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
  44.                 &lt;/tr&gt;
  45.                 &lt;tr&gt;
  46.                     &lt;td style="white-space:nowrap;"&gt;&lt;span&gt;5:00 PM - 8:00 PM&lt;/span&gt;&lt;/td&gt;
  47.                     &lt;td&gt;&lt;span&gt;Tuscan vineyards at a glance - wine-tasting session with &lt;strong&gt;Frederico Riscoli&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
  48.                 &lt;/tr&gt;
  49.             &lt;/tbody&gt;
  50.         &lt;/table&gt;
  51.         &lt;blockquote&gt;
  52.             &lt;p&gt;The annual Flavorful Tuscany meetups are always a culinary discovery. You get the best of Tuscan flavors during an intense one-day stay at one of the top hotels of the region. All the sessions are lead by top chefs passionate about their profession. I would certainly recommend to save the date in your calendar for this one!&lt;/p&gt;
  53.             &lt;p&gt;Angelina Calvino, food journalist&lt;/p&gt;
  54.         &lt;/blockquote&gt;
  55.         &lt;p&gt;Please arrive at the Bilancino Hotel reception desk at least &lt;strong&gt;half an hour earlier&lt;/strong&gt; to make sure that the registration process goes as smoothly as possible.&lt;/p&gt;
  56.         &lt;p&gt;We look forward to welcoming you to the event.&lt;/p&gt;
  57.         &lt;p&gt;&lt;/p&gt;
  58.         &lt;p&gt;&lt;strong&gt;Victoria Valc&lt;/strong&gt;&lt;/p&gt;
  59.         &lt;p&gt;&lt;strong&gt;Event Manager&lt;/strong&gt;&lt;/p&gt;
  60.         &lt;p&gt;&lt;strong&gt;Bilancino Hotel&lt;/strong&gt;&lt;/p&gt;
  61.     </textarea>
  62. </div>
  63. <script>
  64.     CKEDITOR.replace( 'editor1', {
  65.         // Define the toolbar: http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_toolbar
  66.         // The full preset from CDN which we used as a base provides more features than we need.
  67.         // Also by default it comes with a 3-line toolbar. Here we put all buttons in a single row.
  68.         toolbar: [
  69.             { name: 'document', items: [ 'Source' ] },
  70.             { name: 'clipboard', items: [ 'Undo', 'Redo' ] },
  71.             { name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },
  72.             { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat', 'CopyFormatting' ] },
  73.             { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
  74.             '/',
  75.             { name: 'align', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
  76.             { name: 'links', items: [ 'Link', 'Unlink' ] },
  77.             { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
  78.             { name: 'insert', items: [ 'Image', 'Table' ] },
  79.             { name: 'tools', items: [ 'Maximize' ] },
  80.             { name: 'editing', items: [ 'Scayt' ] }
  81.         ],
  82.         // Since we define all configuration options here, let's instruct CKEditor to not load config.js which it does by default.
  83.         // One HTTP request less will result in a faster startup time.
  84.         // For more information check http://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-customConfig
  85.         customConfig: '',
  86.         // Sometimes applications that convert HTML to PDF prefer setting image width through attributes instead of CSS styles.
  87.         // For more information check:
  88.         //  - About Advanced Content Filter: http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_advanced_content_filter
  89.         //  - About Disallowed Content: http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_disallowed_content
  90.         //  - About Allowed Content: http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_allowed_content_rules
  91.         disallowedContent: 'img{width,height,float}',
  92.         extraAllowedContent: 'img[width,height,align]',
  93.         // Enabling extra plugins, available in the full-all preset: http://ckeditor.com/presets-all
  94.         extraPlugins: 'tableresize,uploadimage,uploadfile',
  95.         /*********************** File management support ***********************/
  96.         // In order to turn on support for file uploads, CKEditor has to be configured to use some server side
  97.         // solution with file upload/management capabilities, like for example CKFinder.
  98.         // For more information see http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_ckfinder_integration
  99.         // Uncomment and correct these lines after you setup your local CKFinder instance.
  100.         // filebrowserBrowseUrl: 'http://example.com/ckfinder/ckfinder.html',
  101.         // filebrowserUploadUrl: 'http://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
  102.         /*********************** File management support ***********************/
  103.         // Make the editing area bigger than default.
  104.         height: 800,
  105.         // An array of stylesheets to style the WYSIWYG area.
  106.         // Note: it is recommended to keep your own styles in a separate file in order to make future updates painless.
  107.         contentsCss: [ 'https://cdn.ckeditor.com/4.8.0/full-all/contents.css', 'mystyles.css' ],
  108.         // This is optional, but will let us define multiple different styles for multiple editors using the same CSS file.
  109.         bodyClass: 'document-editor',
  110.         // Reduce the list of block elements listed in the Format dropdown to the most commonly used.
  111.         format_tags: 'p;h1;h2;h3;pre',
  112.         // Simplify the Image and Link dialog windows. The "Advanced" tab is not needed in most cases.
  113.         removeDialogTabs: 'image:advanced;link:advanced',
  114.         // Define the list of styles which should be available in the Styles dropdown list.
  115.         // If the "class" attribute is used to style an element, make sure to define the style for the class in "mystyles.css"
  116.         // (and on your website so that it rendered in the same way).
  117.         // Note: by default CKEditor looks for styles.js file. Defining stylesSet inline (as below) stops CKEditor from loading
  118.         // that file, which means one HTTP request less (and a faster startup).
  119.         // For more information see http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_styles
  120.         stylesSet: [
  121.             /* Inline Styles */
  122.             { name: 'Marker', element: 'span', attributes: { 'class': 'marker' } },
  123.             { name: 'Cited Work', element: 'cite' },
  124.             { name: 'Inline Quotation', element: 'q' },
  125.             /* Object Styles */
  126.             {
  127.                 name: 'Special Container',
  128.                 element: 'div',
  129.                 styles: {
  130.                     padding: '5px 10px',
  131.                     background: '#eee',
  132.                     border: '1px solid #ccc'
  133.                 }
  134.             },
  135.             {
  136.                 name: 'Compact table',
  137.                 element: 'table',
  138.                 attributes: {
  139.                     cellpadding: '5',
  140.                     cellspacing: '0',
  141.                     border: '1',
  142.                     bordercolor: '#ccc'
  143.                 },
  144.                 styles: {
  145.                     'border-collapse': 'collapse'
  146.                 }
  147.             },
  148.             { name: 'Borderless Table', element: 'table', styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
  149.             { name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } }
  150.         ]
  151.     } );
  152. </script>
  153. </body>
  154. </html>

2.直接上图片，在vue-cli项目中使用

下载下来放入static目录下，在main.js内引入（全局）

进入配置文件

最后说明一下引入的ckeditor.js不一样，配置可能会不一样。

CKEditor配置,最适合新手两种方式详解。的更多相关文章

  1. java中调用本地动态链接库（*.DLL）的两种方式详解和not found library、打包成jar,war包dll无法加载等等问题解决办法

    我们经常会遇到需要java调用c++的案例,这里就java调用DLL本地动态链接库两种方式,和加载过程中遇到的问题进行详细介绍 1.通过System.loadLibrary("dll名称,不 ...

  2. 多表连接的三种方式详解 hash join、merge join、 nested loop

    在多表联合查询的时候,如果我们查看它的执行计划,就会发现里面有多表之间的连接方式.多表之间的连接有三种方式:Nested Loops,Hash Join 和 Sort Merge Join.具体适用哪 ...

  3. Java构造和解析Json数据的两种方法详解二

    在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Jso ...

  4. android emulator启动的两种方法详解

    android emulator启动的两种方法详解    转https://blog.csdn.net/TTS_Kevin/article/details/7452237 对于android学习者,模 ...

  5. Java构造和解析Json数据的两种方法详解二——org.json

    转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/24/3096437.html 在www.json.org上公布了很多JAVA下的jso ...

  6. Java构造和解析Json数据的两种方法详解一——json-lib

    转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/23/3096001.html 在www.json.org上公布了很多JAVA下的jso ...

  7. SpringMVC配置字符过滤器的两种方式

    有时候使用SpringMVC框架提交表单时会出现中文乱码,以下是我亲自试验过的配置字符过滤器的两种: 1.在web.xml中配置 <filter> <filter-name>c ...

  8. 转载Javascript继承两种形式详解

    一直想对Javascript再次做一些总结,正好最近自己写了一个小型Js UI库,总结了一下Js的继承机制,在网上也看了一些前辈们博客里的总结,感觉分析不是特别全面.这里仅仅是把自己的学习体会拿出来分 ...

  9. 转载 Javascript继承两种形式详解

    一直想对Javascript再次做一些总结,正好最近自己写了一个小型Js UI库,总结了一下Js的继承机制,在网上也看了一些前辈们博客里的总结,感觉分析不是特别全面.这里仅仅是把自己的学习体会拿出来分 ...

随机推荐

  1. Directx11教程(55) 建立球形和锥形物体

    原文:Directx11教程(55) 建立球形和锥形物体 本教程中,我们新建2个model class,SphereModelClass以及CylinderModelClass,分别用来表示球形和锥形 ...

  2. framework7日期插件使用

    1.引入框架文件 <link rel="stylesheet" href="framework7.ios.min.css"> <link re ...

  3. Oracle事物处理

    n  什么是事物 事物是把对数据库的一系列操作(dml)看做一个整体 事物用于保证数据的一致性,它由一组相关的dml语句组成,改组的dml语句要么全部成功,要么全部失败. 如:网上转账就是典型的要用事 ...

  4. 在dva框架和create-react-app创建出来的框架中修饰器语法与按需加载引入antd分别配置

    按需加载需要的包  babel-plugin-import    装饰器语法需要的包  @babel/plugin-proposal-decorators dva框架 将.webpackrc  改成. ...

  5. 【NS2】NS2中802.11代码深入理解—packet传输的流程（转载）

    如何传送一个封包(How to transmit a packet?)首先,我们要看的第一个function是在mac-802_11.cc内的recv( ),程式会先判断目前呼叫recv( )这个pa ...

  6. 二分查找 Day08

    package com.sxt.arraytest2; /* * 二分查找 前提:有序 */ public class TestBinarySearch { public static void ma ...

  7. @bzoj - 4356@ Ceoi2014 Wall

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给出一个N*M的网格图,有一些方格里面存在城市,其中首都位于网格 ...

  8. Flask学习之十 全文搜索

    英文博客地址:blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-x-full-text-search 中文翻译地址:http://ww ...

  9. JavaScript指定周期来调用函数setTimeout和setInterval

    setTimeout方法:setTimeout setInterval方法:setInterval

  10. Python 2.X 版本 600行入门基础

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...