CkEditor的安装与基础使用

CKEditor系列教程（一）

CkEditor有4版本以及最新5系列版本，看了内容，感觉4就够了，有兴趣的人可以下载5。

下载地址

https://ckeditor.com/ckeditor-4/download/

CkEditor4有4个版本下载：base（基础版）、standard（标准版）、full（完整版）、custome（定制版）。

说白了就是插件多少的问题，建议选择full版本，反正项目部署到服务器，CkEditor插件每次也不会更新，不会影响任何问题。

其他方式安装：https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html

Demo

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>ditor demo</title>
    <script type="text/javascript" src="ckeditor_4.15.1_full_easyimage/ckeditor.js"></script>
</head>
<body>
    <button onclick="show()">展示</button>
    <br>
    <br>
    <form>
        <textarea name="articleArea" id="articleArea" rows="10" cols="80">
        </textarea>
    </form>

</body>
<script>
    // with a CKEditor 4, instance, using default configuration.
    CKEDITOR.replace( 'articleArea' );

    function show() {
         var editor_data = CKEDITOR.instances.articleArea.getData();
        console.log(editor_data)
    }

</script>
</html>

show方法是打印内容。

学习参考

官网：https://ckeditor.com/
CKEditor系列教程（一）：<a href="/articles/9743/" target="_blank" class="block_project_a">CkEditor的安装与基础使用</a>
CKEditor系列教程（二）：<a href="/articles/32150/" target="_blank" class="block_project_a">CkEditor的配置说明</a>
CKEditor系列教程（三）：<a href="/articles/32287/" target="_blank" class="block_project_a">CkEditor图片上传到服务端</a>

前端开发
#HTML #前端组件 #CkEditor #富文本编辑器
CkEditor的安装与基础使用
http://pygo2.top/articles/9743/
作者
mingliang.gao
发布于
2021年1月18日
许可协议