FCKeditor使用方法(FCKeditor_2.6.3)详细使用说明

FCKeditor_2.6.3 使用说明

简介

FCKeditor_2.6.3 是一款开源的富文本编辑器，该编辑器使网站开发者能够轻松地添加富文本编辑功能到自己的Web项目中。本篇文章将介绍如何使用FCKeditor_2.6.3。

安装和配置

下载FCKeditor_2.6.3

首先需要下载FCKeditor_2.6.3，可以在官网下载：https://ckeditor.com/ckeditor-4/

配置FCKeditor

下载之后需要将下载好的文件解压到项目中，并且引入FCKeditor的配置文件和样式文件。

<!-- 引入FCKeditor -->
<script type="text/javascript" src="./fckeditor/fckeditor.js"></script>

<!-- FCKeditor 基本配置 -->
<script type="text/javascript">
    var fck;
    window.onload = function() {
        fck = new FCKeditor('fck_content');
        fck.BasePath = './fckeditor/'; // 配置FCKeditor文件路径
        fck.ToolbarSet = 'Default'; // 配置工具栏
        fck.Width = '900px'; // 配置编辑器的宽度
        fck.Height = '450px'; // 配置编辑器的高度
        fck.ReplaceTextarea(); // 将textarea替换为FCKeditor
    }
</script>

使用示例

示例一

首先在html文档中添加一个textarea，配置id为"fck_content"。

<div>
    <textarea id="fck_content" name="content"></textarea>
</div>

然后在JavaScript中初始化FCKeditor编辑器。

<script type="text/javascript">
    var fck;
    window.onload = function() {
        fck = new FCKeditor('fck_content');
        fck.BasePath = './fckeditor/';
        fck.ToolbarSet = 'Default';
        fck.Width = '900px';
        fck.Height = '450px';
        fck.ReplaceTextarea();
    }
</script>

最后，可以在表单提交之前获取编辑器中的内容并提交到服务器。

<form action="submit.php" method="post">
    <div>
        <textarea id="fck_content" name="content"></textarea>
    </div>
    <input type="submit" value="提交">
</form>

<script type="text/javascript">
    function submitForm() {
        var content = fck.GetHTML();
        document.getElementById("fck_content").value = content;
        return true;
    }
</script>

示例二

使用JavaScript控制编辑器内容的改变。先在html文档中添加一个按钮，然后通过JavaScript来实现点击按钮触发编辑器内容改变。

<button onclick="changeContent()">改变内容</button>
<div>
    <textarea id="fck_content" name="content"></textarea>
</div>
<script type="text/javascript">
    var fck;
    window.onload = function() {
        fck = new FCKeditor('fck_content');
        fck.BasePath = './fckeditor/';
        fck.ToolbarSet = 'Default';
        fck.Width = '900px';
        fck.Height = '450px';
        fck.ReplaceTextarea();
    }

    function changeContent() {
        fck.SetHTML("<p>新的内容</p>")
    }
</script>