Configuration and use of rich text editor ckeditor4 in Vue

2022-04-29 04:29:59

Catalog

add to / Delete editor function

Set the default font size

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: '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

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. ！！！