kindeditor模板如何使用？-网站模板-锦华智联科技

KindEditor 的模板功能允许你预先定义好一段富文本内容，然后在编辑时一键插入，这对于撰写格式固定的文章（如新闻稿、产品介绍、周报等）非常有用，能极大地提高效率和保证格式统一。

（图片来源网络，侵删）

下面我将从 功能概述、使用方法、进阶技巧 三个方面为你详细解析。

功能概述

KindEditor 的模板功能主要通过两个核心方法实现：

editor.html(template)：设置模板，将一段 HTML 字符串设置为当前编辑器的默认模板。
editor.loadTemplate(templateName)：加载模板，从一个预设的模板列表中，根据模板名称加载对应的模板内容到编辑器中。

设置模板：像给编辑器一个“初始值”。
加载模板：从“模板库”里选择一个“模板”来填充编辑器。

使用方法

使用 `editor.html()` 设置简单模板

这种方法适合在页面加载时,直接给编辑器一个固定的初始内容。

示例代码：

（图片来源网络，侵删）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />KindEditor 简单模板示例</title>
    <script charset="utf-8" src="kindeditor/kindeditor-all-min.js"></script>
    <script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
</head>
<body>
    <h3>编辑器内容将来自模板</h3>
    <textarea id="editor1" name="content" style="width:800px;height:400px;"></textarea>
    <script>
        KindEditor.ready(function(K) {
            var editor = K.create('#editor1', {
                // 这里可以配置编辑器，比如上传功能等
                allowFileManager : true
            });
            // 1. 定义你的模板内容（HTML字符串）
            var myTemplate = '<h2>欢迎使用 KindEditor 模板功能</h2>' +
                             '<p>这是一个通过 <strong>editor.html()</strong> 方法设置的模板。</p>' +
                             '<p>您可以直接在这里开始编辑。</p>' +
                             '<p><br></p>' + // 添加一个空行
                             '<p>日期：' + new Date().toLocaleDateString() + '</p>';
            // 2. 使用 editor.html() 将模板内容设置到编辑器中
            editor.html(myTemplate);
        });
    </script>
</body>
</html>

说明： 当页面加载后，编辑器会自动显示 myTemplate 中定义的 HTML 内容。

使用 `editor.loadTemplate()` 从列表加载模板

这是更常用、更灵活的方法，它允许你定义一个模板列表，然后通过一个下拉菜单让用户选择不同的模板。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />KindEditor 模板列表示例</title>
    <script charset="utf-8" src="kindeditor/kindeditor-all-min.js"></script>
    <script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
</head>
<body>
    <h3>请从下拉菜单中选择一个模板</h3>
    <select id="templateSelect">
        <option value="">-- 请选择模板 --</option>
        <option value="newsTemplate">新闻稿模板</option>
        <option value="productTemplate">产品介绍模板</option>
        <option value="reportTemplate">工作周报模板</option>
    </select>
    <br><br>
    <textarea id="editor2" name="content" style="width:800px;height:400px;"></textarea>
    <script>
        KindEditor.ready(function(K) {
            var editor = K.create('#editor2', {
                allowFileManager : true
            });
            // 1. 定义一个模板对象（键值对）
            var templates = {
                // 模板名称: 模板内容
                'newsTemplate': '<h2 class="title">{title}</h2>' +
                               '<p class="info">作者：{author} &nbsp;&nbsp; 发布时间：{date}</p>' +
                               '<hr>' +
                               '<p class="intro">{intro}</p>' +
                               '<p class="content">{content}</p>',
                'productTemplate': '<h1>{productName}</h1>' +
                                   '<p><img src="{imageUrl}" width="300" /></p>' +
                                   '<h2>产品特点</h2>' +
                                   '<ul><li>特点一</li><li>特点二</li><li>特点三</li></ul>' +
                                   '<h2>产品详情</h2>' +
                                   '<p>{description}</p>',
                'reportTemplate': '<h2>工作周报</h2>' +
                                  '<p>汇报人：{name} &nbsp;&nbsp; 汇报周期：{startDate} 至 {endDate}</p>' +
                                  '<h3>本周完成工作</h3>' +
                                  '<ol><li>任务一</li><li>任务二</li></ol>' +
                                  '<h3>下周工作计划</h3>' +
                                  '<ol><li>计划一</li><li>计划二</li></ol>'
            };
            // 2. 为下拉菜单绑定 change 事件
            K('#templateSelect').change(function() {
                var templateName = this.value;
                if (templateName) {
                    // 3. 当选择改变时，调用 editor.loadTemplate() 加载对应模板
                    editor.loadTemplate(templateName, templates);
                } else {
                    // 如果选择为空，则清空编辑器
                    editor.html('');
                }
            });
        });
    </script>
</body>
</html>

说明：

我们创建了一个 templates 对象，每个属性名（如 newsTemplate）对应一个模板，属性值是模板的 HTML 内容。
在 HTML 中，我们添加了一个 <select> 下拉菜单，它的 value 值与 templates 对象的属性名一一对应。
当用户选择不同的模板时,change 事件被触发，editor.loadTemplate(templateName, templates) 方法会根据 templateName 从 templates 对象中找到对应的 HTML 内容，并插入到编辑器中。

进阶技巧

模板中的变量占位符

在方法二的示例中,我们使用了 {title}, {author} 等占位符，这只是一个命名约定，KindEditor 本身不会自动替换它们。

你需要手动替换这些占位符,最简单的时机是在加载模板之后。

修改方法二中的 change 事件处理代码：

K('#templateSelect').change(function() {
    var templateName = this.value;
    if (templateName) {
        // 加载模板
        editor.loadTemplate(templateName, templates);
        // 获取模板内容
        var templateHtml = editor.html();
        // 定义要替换的变量
        var replacements = {
            '{title}': '请输入标题',
            '{author}': '当前用户',
            '{date}': new Date().toLocaleString(),
            '{intro}': '这里是文章摘要...',
            '{content}': '这里是文章正文...',
            '{productName}': '请输入产品名称',
            '{imageUrl}': 'https://via.placeholder.com/300',
            '{description}': '请输入产品描述...',
            '{name}': '张三',
            '{startDate}': '2025-10-23',
            '{endDate}': '2025-10-27'
        };
        // 遍历并替换所有占位符
        for (var key in replacements) {
            templateHtml = templateHtml.replace(new RegExp(key, 'g'), replacements[key]);
        }
        // 将替换后的内容重新设置回编辑器
        editor.html(templateHtml);
    } else {
        editor.html('');
    }
});

这样,当模板加载后，所有的占位符都会被你预设的值替换掉，用户可以直接在修改这些内容，而不是在空白处寻找输入位置。

添加自定义工具栏按钮

你可以将“加载模板”的功能做成一个编辑器工具栏上的按钮，这样更直观。

示例代码：

KindEditor.ready(function(K) {
    var editor = K.create('#editor2', {
        items : [ // 自定义工具栏按钮
            'source', '|', 'undo', 'redo', '|', 'preview', '|',
            'template', '|', 'bold', 'italic', 'underline', '|',
            'justifyleft', 'justifycenter', 'justifyright', '|',
            'insertorderedlist', 'insertunorderedlist', '|',
            'forecolor', 'hilitecolor', '|', 'image', 'link'
        ],
        // ... 其他配置
    });
    // 定义模板列表（同上）
    var templates = { /* ... */ };
    // 创建一个下拉菜单用于选择模板
    var templateMenu = K.menu({
        itemClick : function() {
            var templateName = this.name;
            if (templateName) {
                // 加载模板并替换变量（逻辑同上）
                editor.loadTemplate(templateName, templates);
                // ... 替换占位符的逻辑 ...
            }
        }
    });
    // 为 "template" 按钮添加菜单
    K('button[name="template"]').click(function(e) {
        // 清空之前的菜单项
        templateMenu.remove();
        // 添加新的菜单项
        for (var name in templates) {
            templateMenu.addItem({
                name : name,
                title : name // 可以改成更友好的名字，如 "新闻稿"
            });
        }
        // 显示菜单
        var pos = K(this).pos();
        templateMenu.pos(pos.x, pos.y + this.offsetHeight).show();
    });
});

说明：

在 items 配置中添加 'template'。
使用 K.menu() 创建一个动态菜单。
当点击 "template" 按钮时，动态生成菜单项，并绑定点击事件来加载对应的模板。

从服务器端加载模板

对于复杂的系统,模板通常存储在数据库中，而不是在前端硬编码，你可以通过 AJAX 从服务器获取模板列表和模板内容。

前端 AJAX 示例 (使用 jQuery):

KindEditor.ready(function(K) {
    var editor = K.create('#editor2');
    // 点击按钮时，从服务器加载模板
    K('#loadServerTemplateBtn').click(function() {
        $.ajax({
            url: '/api/get_templates', // 你的后端API地址
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                // data 应该是一个对象，格式如：{ "newsTemplate": "<h2>...</h2>", ... }
                if (data) {
                    // 加载第一个模板作为示例
                    var firstTemplateName = Object.keys(data)[0];
                    editor.loadTemplate(firstTemplateName, data);
                    console.log('从服务器加载模板成功:', data);
                }
            },
            error: function(err) {
                alert('加载模板失败: ' + err.statusText);
            }
        });
    });
});

后端 API (Node.js/Express 示例):

// server.js (Express)
app.get('/api/get_templates', (req, res) => {
    // 这里可以从数据库或配置文件中读取模板
    const templatesFromDB = {
        'newsTemplate': '<h2>从服务器加载的新闻标题</h2><p>内容...</p>',
        'productTemplate': '<h1>从服务器加载的产品名</h1><p>详情...</p>'
    };
    res.json(templatesFromDB);
});

这种方式让模板管理更加灵活和动态。

功能点	方法	适用场景
简单初始化	`editor.html(htmlString)`	页面加载时给编辑器一个固定的初始内容。
用户选择模板	`editor.loadTemplate(name, templates)` + 下拉菜单	提供多个预设模板，让用户自由选择，如新闻稿、产品介绍等。
模板变量替换	`editor.html()` + `replace()`	在加载模板后，自动填充一些默认信息（如日期、用户名），提升用户体验。
自定义工具栏	`K.menu()` + `items` 配置	将模板功能集成到编辑器的工具栏中，操作更便捷。
动态加载	`$.ajax()` + 后端 API	模板需要频繁更新或存储在数据库中的大型应用。

希望这份详细的指南能帮助你完全掌握 KindEditor 的模板功能！

kindeditor模板如何使用？

功能概述

使用方法

使用 editor.html() 设置简单模板

使用 editor.loadTemplate() 从列表加载模板

进阶技巧

模板中的变量占位符

添加自定义工具栏按钮

从服务器端加载模板

使用 `editor.html()` 设置简单模板

使用 `editor.loadTemplate()` 从列表加载模板