HTML 富文本编辑器插件 CKEditor

最新推荐文章于 2025-09-18 07:08:56 发布

原创最新推荐文章于 2025-09-18 07:08:56 发布 · 4.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

HTML 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了如何使用CKEditor作为HTML富文本编辑器，并详细阐述了如何添加‘粘贴图片为base64格式’的插件，提升编辑体验。

CKEditor 首页： http://ckeditor.com/

一、使用

1、将ckeditor整个文件夹放到网站资源目录下。

2、在要添加ckeditor的网页上加入ckeditor.js。

<!DOCTYPE html>
<html lang="en">
<head>
    <!--<script src="ckeditor/ckeditor.js"></script>-->
    <script src="resourse/ckeditor/ckeditor.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

3、在要转换成富文本的textarea下方编写js：CKEDITOR.replace('textarea的name')

<!DOCTYPE html>
<html lang="en">
<head>
    <!--<script src="ckeditor/ckeditor.js"></script>-->
    <script src="resourse/ckeditor/ckeditor.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <textarea rows="30" cols="50" name="editor01">请输入.</textarea>
    <script type="text/javascript">CKEDITOR.replace('editor01');</script>
</body>
</html>