富文本

CKEditor 4

1.下载文件https://ckeditor.com/ckeditor-4/download/

2.选择完整版

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wlk9LGHC-1650961055749)(images/image-20220106115655947.png)]

3.解压文件放在项目目录

在这里插入图片描述

4.配置工具栏

找到index.html打开页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SuipS51p-1650961055752)(images/image-20220106134639640.png)]

编辑自己的工具栏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xjfpEzef-1650961055753)(images/image-20220106134722874.png)]

根据需求选择想要的工具栏选项，获取配置代码

在这里插入图片描述

复制配置代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wcd2SNgm-1650961055755)(images/image-20220106135003143.png)]

粘贴到配置文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47RWL8Zp-1650961055755)(images/image-20220106135157839.png)]

5. html页面使用富文本

<!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.富文本内容编辑

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

7. 修改富文本背景

在config.js文件中添加以下代码

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

config.js文件内容如下：

/**
 * @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. 修改富文本默认样式

在content.css这个文件中修改想要的样式保存即可。

9. 修改富文本只读属性

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

页面效果如图：
在这里插入图片描述

CKEditor 4下载和使用

富文本