CKEditor配置,最适合新手两种方式详解。

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

 https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js

 http://cdn.bootcss.com/ckeditor/4.8.0/ckeditor.js

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!-- <script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script> -->

    <script src="http://cdn.bootcss.com/ckeditor/4.8.0/ckeditor.js"></script>

    <title>Document Editor</title>

    <style type="text/css">

        /* Minimal styling to center the editor in this sample */

        body {

            padding: 30px;

            display: flex;

            align-items: center;

            text-align: center;

        }

        .container {

            margin: 0 auto;

        }

    </style>

</head>

<body>

<div class="container">

    <h2><label for="editor1">Document Editor</label></h2>

    <textarea id="editor1">

        &lt;h2 style="text-align: center;"&gt;The Flavorful Tuscany Meetup&lt;/h2&gt;

        &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;

        &lt;p&gt;Dear Guest,&lt;/p&gt;

        &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;

        &lt;p&gt;Please find below the full schedule of the event.&lt;/p&gt;

        &lt;table class="schedule" cellpadding="15" cellspacing="0" style="border-collapse:collapse;width:100%;"&gt;

            &lt;thead&gt;

                &lt;tr&gt;

                    &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;

                &lt;/tr&gt;

            &lt;/thead&gt;

            &lt;tbody&gt;

                &lt;tr&gt;

                    &lt;td style="white-space:nowrap;"&gt;&lt;span&gt;9:30 AM - 11:30 AM&lt;/span&gt;&lt;/td&gt;

                    &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;

                &lt;/tr&gt;

                &lt;tr&gt;

                    &lt;td style="white-space:nowrap;"&gt;&lt;span&gt;1:00 PM - 3:00 PM&lt;/span&gt;&lt;/td&gt;

                    &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;

                &lt;/tr&gt;

                &lt;tr&gt;

                    &lt;td style="white-space:nowrap;"&gt;&lt;span&gt;5:00 PM - 8:00 PM&lt;/span&gt;&lt;/td&gt;

                    &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;

                &lt;/tr&gt;

            &lt;/tbody&gt;

        &lt;/table&gt;

        &lt;blockquote&gt;

            &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;

            &lt;p&gt;Angelina Calvino, food journalist&lt;/p&gt;

        &lt;/blockquote&gt;

        &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;

        &lt;p&gt;We look forward to welcoming you to the event.&lt;/p&gt;

        &lt;p&gt;&lt;/p&gt;

        &lt;p&gt;&lt;strong&gt;Victoria Valc&lt;/strong&gt;&lt;/p&gt;

        &lt;p&gt;&lt;strong&gt;Event Manager&lt;/strong&gt;&lt;/p&gt;

        &lt;p&gt;&lt;strong&gt;Bilancino Hotel&lt;/strong&gt;&lt;/p&gt;

    </textarea>

</div>

<script>

    CKEDITOR.replace( 'editor1', {

        // Define the toolbar: http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_toolbar

        // The full preset from CDN which we used as a base provides more features than we need.

        // Also by default it comes with a 3-line toolbar. Here we put all buttons in a single row.

        toolbar: [

            { name: 'document', items: [ 'Source' ] },

            { name: 'clipboard', items: [ 'Undo', 'Redo' ] },

            { name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },

            { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat', 'CopyFormatting' ] },

            { name: 'colors', items: [ 'TextColor', 'BGColor' ] },

            '/',

            { name: 'align', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },

            { name: 'links', items: [ 'Link', 'Unlink' ] },

            { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },

            { name: 'insert', items: [ 'Image', 'Table' ] },

            { name: 'tools', items: [ 'Maximize' ] },

            { name: 'editing', items: [ 'Scayt' ] }

        ],

        // Since we define all configuration options here, let's instruct CKEditor to not load config.js which it does by default.

        // One HTTP request less will result in a faster startup time.

        // For more information check http://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-customConfig

        customConfig: '',

        // Sometimes applications that convert HTML to PDF prefer setting image width through attributes instead of CSS styles.

        // For more information check:

        //  - About Advanced Content Filter: http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_advanced_content_filter

        //  - About Disallowed Content: http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_disallowed_content

        //  - About Allowed Content: http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_allowed_content_rules

        disallowedContent: 'img{width,height,float}',

        extraAllowedContent: 'img[width,height,align]',

        // Enabling extra plugins, available in the full-all preset: http://ckeditor.com/presets-all

        extraPlugins: 'tableresize,uploadimage,uploadfile',

        /*********************** File management support ***********************/

        // In order to turn on support for file uploads, CKEditor has to be configured to use some server side

        // solution with file upload/management capabilities, like for example CKFinder.

        // For more information see http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_ckfinder_integration

        // Uncomment and correct these lines after you setup your local CKFinder instance.

        // filebrowserBrowseUrl: 'http://example.com/ckfinder/ckfinder.html',

        // filebrowserUploadUrl: 'http://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',

        /*********************** File management support ***********************/

        // Make the editing area bigger than default.

        height: 800,

        // An array of stylesheets to style the WYSIWYG area.

        // Note: it is recommended to keep your own styles in a separate file in order to make future updates painless.

        contentsCss: [ 'https://cdn.ckeditor.com/4.8.0/full-all/contents.css', 'mystyles.css' ],

        // This is optional, but will let us define multiple different styles for multiple editors using the same CSS file.

        bodyClass: 'document-editor',

        // Reduce the list of block elements listed in the Format dropdown to the most commonly used.

        format_tags: 'p;h1;h2;h3;pre',

        // Simplify the Image and Link dialog windows. The "Advanced" tab is not needed in most cases.

        removeDialogTabs: 'image:advanced;link:advanced',

        // Define the list of styles which should be available in the Styles dropdown list.

        // If the "class" attribute is used to style an element, make sure to define the style for the class in "mystyles.css"

        // (and on your website so that it rendered in the same way).

        // Note: by default CKEditor looks for styles.js file. Defining stylesSet inline (as below) stops CKEditor from loading

        // that file, which means one HTTP request less (and a faster startup).

        // For more information see http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_styles

        stylesSet: [

            /* Inline Styles */

            { name: 'Marker', element: 'span', attributes: { 'class': 'marker' } },

            { name: 'Cited Work', element: 'cite' },

            { name: 'Inline Quotation', element: 'q' },

            /* Object Styles */

            {

                name: 'Special Container',

                element: 'div',

                styles: {

                    padding: '5px 10px',

                    background: '#eee',

                    border: '1px solid #ccc'

                }

            },

            {

                name: 'Compact table',

                element: 'table',

                attributes: {

                    cellpadding: '5',

                    cellspacing: '0',

                    border: '1',

                    bordercolor: '#ccc'

                },

                styles: {

                    'border-collapse': 'collapse'

                }

            },

            { name: 'Borderless Table', element: 'table', styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },

            { name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } }

        ]

    } );

</script>

</body>

</html>

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

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

进入配置文件

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

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

java中调用本地动态链接库（*.DLL）的两种方式详解和not found library、打包成jar,war包dll无法加载等等问题解决办法
我们经常会遇到需要java调用c++的案例,这里就java调用DLL本地动态链接库两种方式,和加载过程中遇到的问题进行详细介绍 1.通过System.loadLibrary("dll名称,不 ...
多表连接的三种方式详解 hash join、merge join、 nested loop
在多表联合查询的时候,如果我们查看它的执行计划,就会发现里面有多表之间的连接方式.多表之间的连接有三种方式:Nested Loops,Hash Join 和 Sort Merge Join.具体适用哪 ...
Java构造和解析Json数据的两种方法详解二
在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Jso ...
android emulator启动的两种方法详解
android emulator启动的两种方法详解转https://blog.csdn.net/TTS_Kevin/article/details/7452237 对于android学习者,模 ...
Java构造和解析Json数据的两种方法详解二——org.json
转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/24/3096437.html 在www.json.org上公布了很多JAVA下的jso ...
Java构造和解析Json数据的两种方法详解一——json-lib
转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/23/3096001.html 在www.json.org上公布了很多JAVA下的jso ...
SpringMVC配置字符过滤器的两种方式
有时候使用SpringMVC框架提交表单时会出现中文乱码,以下是我亲自试验过的配置字符过滤器的两种: 1.在web.xml中配置 <filter> <filter-name>c ...
转载Javascript继承两种形式详解
一直想对Javascript再次做一些总结,正好最近自己写了一个小型Js UI库,总结了一下Js的继承机制,在网上也看了一些前辈们博客里的总结,感觉分析不是特别全面.这里仅仅是把自己的学习体会拿出来分 ...
转载 Javascript继承两种形式详解
一直想对Javascript再次做一些总结,正好最近自己写了一个小型Js UI库,总结了一下Js的继承机制,在网上也看了一些前辈们博客里的总结,感觉分析不是特别全面.这里仅仅是把自己的学习体会拿出来分 ...

随机推荐

2019-4-29-dotnet-core-通过-frp-发布自己的网站
title author date CreateTime categories dotnet core 通过 frp 发布自己的网站 lindexi 2019-04-29 12:26:45 +0800 ...
PHPCMS快速建站系列之phpcms v9 模板标签说明整理
[摘要]本文介绍phpcms v9中模板标签使用说明. {template "content","header"} 调用根目录下phpcms\template\ ...
两种获取python版本的方法
方法1:查看python版本 import sys print("当前python版本",sys.version) 方法2:cmd框中查看的两种方式
Spring集成Hessian1
Hessian是一个轻量级的远程调用工具,采用的是Binary RPC协议,很适合于发送二进制数据,基于HTTP具有防火墙穿透能力.Hessian一般是通过Web应用来提供服务,因此非常类似于平时我们 ...
jQuery学习笔记之解除重复点击事情重复绑定
问题:有不同的按钮点击后都执行相同的事件,在jQuery重复点击就会产生事件重复绑定. 解决方法:使用unbind("click")方法,每次点击都先接触绑定已有事件再绑定新对象. ...
P2P四红线
P2P四红线刘张君指出,P2P网络借贷平台是一种新兴金融业态,在鼓励其创新发展的同时,要记住四点:一是要明确这个平台的中介性质,二是要明确平台本身不得提供担保,三是不得将归集资金搞资金池,四是不得非 ...
C# 设计模式责任链
责任链模式是一种对象的行为模式.在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链.请求在这个链上传递,直到链上的某一个对象决定处理此请求.发出这个请求的客户端并不知道链上的哪一个 ...
tensorflow 卷积层
TensorFlow 卷积层让我们看下如何在 TensorFlow 里面实现 CNN. TensorFlow 提供了 tf.nn.conv2d() 和 tf.nn.bias_add() 函数来创 ...
vue 后期追回的属性不更新视图问题
this.$set(this.problemList[index], 'sub', []) 因为原始数组是有set,get而追加的没有,所以需要用这种方式 // 添加 this.$set(th ...
@noi.ac - 506@ 强连通分量
目录 @description@ @solution@ @accepted code@ @details@ @description@ 有一天你学了一个叫能求出有向图中所有的强连通分量的算法,你决定将 ...

CKEditor配置,最适合新手两种方式详解。

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

随机推荐

热门专题