最新kindeditor富文本的使用方法

Rm_and_Rf

于 2019-10-15 10:15:31 发布

阅读量294

点赞数

CC 4.0 BY-SA版权

分类专栏： kindeditor 富文本编辑器文章标签：富文本编辑器

本文链接：https://blog.youkuaiyun.com/Rm_and_Rf/article/details/102561575

kindeditor 同时被 2 个专栏收录

5 篇文章

订阅专栏

富文本编辑器

3 篇文章

订阅专栏

本文详细介绍如何从官网下载KindEditor，并在HTML页面中配置和使用该富文本编辑器，包括引入必要的JS与CSS文件，以及创建编辑器实例的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们先从官网下载最新的kindeditor压缩包

在这里插入图片描述

打开里面有我们需要用到的js和css样式等，打开如下所示

在这里插入图片描述

里面有asp、asp.net、jsp、php的上传方式和演示demo(不建议在生产环境使用演示demo)

首先修改HTML页面，在需要显示编辑器的位置添加textarea输入框。

<textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>

在需要用到富文本的HTML中引入JS与css

<script charset="utf-8" src="../../../kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="../../../kindeditor/lang/zh-CN.js"></script>
<link href="../../../kindeditor/themes/default/default.css" rel="stylesheet" />
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');
        });
</script>

这样就能简单的使用富文本了
如果在上传出现问题可以参考以下文章：

修改kindeditor中uploadJson的默认地址

最新kindeditor的解决跨域问题

更多详情点击kindeditor官网