vue js ckeditor 적용법

vue js ckeditor 적용법 

---

1. 전제 사항 

   ▶ vue cli 을 사용 하여 vue init webpack  으로 프로젝트를 생성 하였습니다. 

   ▶ 톰켓 같은 웹서버가 필요 합니다. 

2. 필요 사항 

  build -> webpack.base.conf.js -> 

const path = require('path')

const utils = require('./utils')

const config = require('../config')

const vueLoaderConfig = require('./vue-loader.conf')

require('es6-promise/auto');

require('es6-promise/auto');

을 추가 해 줍니다. 

module.exports = {

context: path.resolve(__dirname, '../'),

entry: {

app: ['babel-polyfill', './src/main.js']

},

app: ['babel-polyfill', './src/main.js']  수정을 해줍니다.  

물론 이 2가지는 npm install 을 이용하여서 해당 패키지를 설치 해줘야합니다. 

그리고 JQuery 를 사용하기 위해서  

npm install --save jquery  을 설치 해줍니다. 

build -> webpack.dev.conf.js -> 

plugins: [

new webpack.DefinePlugin({

'process.env': require('../config/dev.env')

}),

new webpack.HotModuleReplacementPlugin(),

new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.

new webpack.NoEmitOnErrorsPlugin(),

// https://github.com/ampedandwired/html-webpack-plugin

new HtmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

inject: true

}),

// copy custom static assets

new CopyWebpackPlugin([{

from: path.resolve(__dirname, '../static'),

to: config.dev.assetsSubDirectory,

ignore: ['.*']

}]),

new webpack.ProvidePlugin({

Vue: ['vue/dist/vue.esm.js', 'default'],

jQuery: 'jquery',

'window.jQuery': 'jquery',

$: 'jquery',

moment: 'moment',

})

]

중에서  

new webpack.ProvidePlugin({

Vue: ['vue/dist/vue.esm.js', 'default'],

jQuery: 'jquery',

'window.jQuery': 'jquery',

$: 'jquery',

해당 부분을 추가해 줘야 합니다. 

 

dev.conf.js 는 npm run dev 의 개발시만  적용 되므로  npm run build 의 상황에도 적용되게 하기 위해서 

build -> webpack.dev.conf.js->

똑같이 

new webpack.ProvidePlugin({

Vue: ['vue/dist/vue.esm.js', 'default'],

jQuery: 'jquery',

'window.jQuery': 'jquery',

$: 'jquery',

적용 시켜 줍니다. 

이렇게 되면 vue js의 scirpt 에서 $(jquery 코드) 을 사용 할수 있습니다. 

이제 npm install ckeditor@4.8.0 --save  (참고)

 

설치가 완료 되면 

node_modules ->  ckeditor  

파일 js 파일을 1개 만들어 줘야 합니다. 

저같은 경우 loader.js  라고 만들었습니다. 

window.CKEDITOR_BASEPATH = 'http://10.20.10.101:8080/test1/node_modules/ckeditor/';

이라고 코딩 해줬습니다 .

그리고 나서 톰캣등을 이용하여 위에 해당 하는 url 에  node_modules 폴더를 만들고 

npm install 로 다운 받은  ckeditor 을 복사해서 넣어 줍니다. 

저같은 경우 위와 같이 업로드 했습니다. 

그리고 vuejs 의 sript 태그 안에 

import 'ckeditor/loader.js'

import 'ckeditor/ckeditor.js'

위와 같은 순서로  코딩 해 줍니다. 

<template>

<textarea id="now_way" ref="now_way" />

</template>

<script>

import 'ckeditor/loader.js'

import 'ckeditor/ckeditor.js'

var now_way_board = this.$refs.now_way;

CKEDITOR.replace( now_way_board , {

// 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: [ 'Print' ] },

{ 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,image2,justify,print',

removePlugins: 'image',

/*********************** 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: 350,

// 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: [ 'http://10.20.10.101:8080/wisoleis/node_modules/ckeditor/contents.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',

imageUploadUrl : '/W_Server/suggestion_image_upload?doc_number='+this.no,

// 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>

위와 같은 코드로 적용 하면  

ckeditor 적용가 적용 됩니다.