Configuration and use of rich text editor ckeditor4 in Vue

Catalog

add to / Delete editor function

Add font size

Set the default font size

One . Download and install

First time to do rich text editor , After two days of information and reference Official documents Finally complete the required function with the help of colleagues , Here are some ways to use .

Our needs are like this ： The required editor functions are shown in the figure below , Need to add Fonts , Set the default font size , It's also the place that bothers me most ！

Through the survey data ,vue Project use ckeditor4 There are two ways , One is to go to the official website to download ckeditor4 My bag , Decompress and put it in

In the project , Then according to their own needs , By modifying the editor's configuration file config.js File to add / Delete function , The other is to use packaged ckeditor4-vue package , I downloaded and installed by command ：

npm install --save ckeditor4-vue

<ckeditor
  ref="editor"
  :config="editorConfig"
  v-model="editorData"
  @blur="onBlur"
  @input="onTextChange">
</ckeditor>

export default {
   name: 'CkEditor4',
   components: {
    ckeditor: CKEditor.component
  },
  data () {
    return {
      editorData: '',
      editorConfig: {},

such , A basic editor is built

  Then it mainly explains how to add font size , And set the default font size ！

Not a professional front end , Some places don't understand , But if you don't write it like this, it won't work

data () {
    return {
      editorConfig: {
    toolbar: [
  { name: 'clipboard', items: [ 'Undo', 'Redo' ] },
  { name: 'links', items: [ 'Link', 'Unlink' ] },
  { name: 'align', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight'] },
  { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline' ] },
  { name: 'styles', items: ['Font', 'FontSize'] }, //  Format   typeface   size 
  { name: 'colors', items: ['TextColor', 'BGColor'] }, '/' ],
  font_names: 'メイリオ;ヒラギノ horn ゴPro W3;Hiragino Kaku Gothic Pro;ＭＳ Ｐゴシック;ＭＳ Ｐ The Ming dynasty ;ＭＳ ゴシック;ＭＳ  The Ming dynasty ;' +
              'Arial/Arial,Helvetica,sans-serif;' +
              'Comic Sans MS/Comic Sans MS,cursive;' +
              'Courier New/Courier New,Courier,monospace;' +
              'Georgia/Georgia,serif;' +
              'Lucida Sans Unicode/Lucida Sans Unicode,Lucida Grande,sans-serif;' +
              'Tahoma/Tahoma,Geneva,sans-serif;' +
              'Times New Roman/Times New Roman,Times,serif;' +
              'Trebuchet MS/Trebuchet MS,Helvetica,sans-serif;' +
              'Verdana/Verdana,Geneva,sans-serif',
  // fontSize_sizes: '8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px',
  font_defaultLabel: 'メイリオ',
  fontSize_defaultLabel: '16',
  contentsCss: './contents.css',
      extraPlugins: 'justify,font,colorbutton',
      resize_enabled: false
        },

add to / Delete editor function , And setting fonts and adding Fonts , They all need to be modified config, Above .

add to / Delete editor function

Add and modify editor functions in toolbar[ ] Set in , And add to extraPlugins: 'justify,font,colorbutton......', This should be a registered plug-in , Anyway, if you don't add it, you can't add functions , Refer to the first picture

Add font size

Refer to official documentation , The added font needs to be written in font_names, Pay attention to is , Once customized , Will overwrite all the original Fonts , You need to define all fonts according to your needs , Use... Between entries   " ; " Separate , Each entry can have multiple Fonts , With " , " Separate , And write the name of the font to be displayed in  " / " front .

for example ：'Arial/Arial, Helvetica, sans-serif', Only... Will be displayed in the font list 'Arial', But the output font is  'Arial, Helvetica, sans-serif'.

  Adding font size is the same , Refer to official documentation , I don't need to add font size for my needs , So note

Set the default font size

Or refer to the official documents , At first I thought it was to set up these two ,

Found after setting , Just the default display , No effect , Need to introduce contents.css Document and modify , This file can be downloaded from the official website ckeditor package , After decompression, it is under the root directory , take contents.css Put it in the project , and contentsCss: './contents.css' introduce , Then modify the following piece ：

.cke_editable
{
	font-size: 16px;
	font-family: メイリオ;
	line-height: 1.6;
	/* Fix for missing scrollbars with RTL texts. (#10488) */
	word-wrap: break-word;
}

At this point, the function is almost complete , Another part is inconvenient to show .

Not a professional front end , There are many details I don't quite understand , If there is a mistake , Please correct me. ！！！