Texto rico

CKEditor 4

1. Descarga el archivo https://ckeditor.com/ckeditor-4/download/

2. Elija la versión completa

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-wlk9LGHC-1650961055749)(images/image-20220106115655947.png)]

3. Descomprima el archivo y colóquelo en el directorio del proyecto.

inserte la descripción de la imagen aquí

4. Configurar barra de herramientas

Encuentra index.html para abrir la página

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y subirla directamente (img-SuipS51p-1650961055752)(images/image-20220106134639640.png)]

Edita tu propia barra de herramientas

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y subirla directamente (img-xjfpEzef-1650961055753)(images/image-20220106134722874.png)]

Seleccione la opción de la barra de herramientas que desee según sus necesidades y obtenga el código de configuración

inserte la descripción de la imagen aquí

Copiar código de configuración

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y subirla directamente (img-wcd2SNgm-1650961055755)(images/image-20220106135003143.png)]

Pegar en el archivo de configuración
[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y subirla directamente (img-47RWL8Zp-1650961055755)(images/image-20220106135157839.png)]

5. Las páginas HTML usan texto enriquecido

<!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. Edición de contenido de texto enriquecido

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

7. Modificar fondo de texto enriquecido

Agregue el siguiente código en el archivo config.js

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

El contenido del archivo config.js es el siguiente:

/**
 * @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. Modifique el estilo predeterminado de texto enriquecido

Modifique el estilo deseado en el archivo content.css y guárdelo.

9. Modifique el atributo de solo lectura de texto enriquecido

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

El efecto de página es como se muestra en la figura:
inserte la descripción de la imagen aquí

Descarga y uso de CKEditor 4