vue2使用ckeditor4富文本，超详细，超多插件！

首先，给大家看看效果。

功能非常多，格式化，居中对齐，改变字体大小、颜色，实在是过于好用。接下来告诉大家vue中如何使用如此好用的富文本编辑器。

1.首先我们一定要去官网下载对应的最全的工具包！！

官网：https://ckeditor.com/ckeditor-4/

下载后解压出来是这样。

2.接下来，我们要把这整个文件夹放到服务器上。

小编这里使用的是nginx,这里需要你有一点nginx基础。我是这么配置的。

nginx.conf

		server{
			listen       443 ssl;
			server_name  xxx;
			ssl_certificate      /home/nginx/cert/xxx.crt;
			ssl_certificate_key  /home/nginx/cert/xxx.key;

			ssl_session_cache    shared:SSL:1m;
			ssl_session_timeout  5m;
			ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
			ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
			ssl_prefer_server_ciphers  on;
			client_max_body_size  100M;

			
			location /ckeditor {
				alias /home/xxx/ckeditor/;
			}
		}

这样就能通过公网：https://xxx/ckeditor/ckeditor.js 来访问你的ckeditor.js了。

3.vue使用ckeditor4

npm install ckeditor4-vue

在main.js中导入，注册为全局，简单省事：

import Vue from 'vue';
import CKEditor from 'ckeditor4-vue';

Vue.use( CKEditor );

在本地文件中使用：

<template>
    <div id="app">
        <ckeditor v-model="editorData" :config="editorConfig" :editorUrl="editorUrl"></ckeditor>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                editorData: '<p>Content of the editor.</p>',
                editorUrl: "https://xxx/ckeditor/ckeditor.js",
                editorConfig: {
                    language: 'zh-cn'
                }
            };
        }
    }
</script>

就可以啦