rich text

CKEditor 4

1. Download the file https://ckeditor.com/ckeditor-4/download/

2. Choose the full version

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-wlk9LGHC-1650961055749)(images/image-20220106115655947.png)]

3. Unzip the file and put it in the project directory

insert image description here

4. Configure Toolbar

Find index.html to open the page

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-SuipS51p-1650961055752)(images/image-20220106134639640.png)]

Edit your own toolbar

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-xjfpEzef-1650961055753)(images/image-20220106134722874.png)]

Select the toolbar option you want according to your needs, and get the configuration code

insert image description here

Copy configuration code

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-wcd2SNgm-1650961055755)(images/image-20220106135003143.png)]

Paste into config file
[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-47RWL8Zp-1650961055755)(images/image-20220106135157839.png)]

5. HTML pages use rich text

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="richText">
        <button onclick="getData()">获取内容</button>
        <div id="Text"></div>
    </div>
    <!-- 引入富文本 -->
    <script src="./ckeditor/ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
        CKEDITOR.replace('Text');
        function getData() {
      
      
            <!-- 获取富文本的内容 -->
            var CHtml = CKEDITOR.instances.Text.getData();
            console.log(CHtml);
        }
    </script>
</body>

</html>

6. Rich text content editing

//获取富文本内容
CKEDITOR.instances.Text.getData();
//设置富文本内容
CKEDITOR.instances.Text.setData();

7. Modify rich text background

Add the following code in the config.js file

CKEDITOR.addCss(".cke_editable{background-color: #FFF5D3}")

The content of the config.js file is as follows:

/**
 * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

CKEDITOR.editorConfig = function (config) {
    
    
    config.toolbarGroups = [
        {
    
     name: 'document', groups: ['mode', 'document', 'doctools'] },
        {
    
     name: 'clipboard', groups: ['clipboard', 'undo'] },
        {
    
     name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing'] },
        {
    
     name: 'forms', groups: ['forms'] },
        '/',
        {
    
     name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
        {
    
     name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph'] },
        {
    
     name: 'links', groups: ['links'] },
        {
    
     name: 'insert', groups: ['insert'] },
        '/',
        {
    
     name: 'styles', groups: ['styles'] },
        {
    
     name: 'colors', groups: ['colors'] },
        {
    
     name: 'tools', groups: ['tools'] },
        {
    
     name: 'others', groups: ['others'] },
        {
    
     name: 'about', groups: ['about'] }
    ];
    config.removeButtons = 'Save,Print';
    
    // 背景颜色
    CKEDITOR.addCss(".cke_editable{background-color: #FFF5D3}")
};

8. Modify the default style of rich text

Modify the desired style in the content.css file and save it.

9. Modify the rich text read-only attribute

// Text是页面标签的id，true为只读，false为可编辑
CKEDITOR.instances['Text'].setReadOnly(false);

The page effect is as shown in the figure:
insert image description here

CKEditor 4 download and use