8

我想在 CodeIgniter 中加载 CKEditor，我搜索了很多，但无法理解他们的方式。

我将 ckeditor 放在application/plugins文件夹中，现在我想制作编辑器，所以我在 Controller Method 中执行以下操作。

include APPPATH.'plugins/ckeditor/ckeditor.php';
$CKEditor = new CKEditor();
$CKEditor->basePath = '/'.APPPATH.'plugins/ckeditor/';
$initialValue = '<p>This is some <strong>sample text</strong>.</p>';
echo $CKEditor->editor("editor1", $initialValue);

但它只制作简单的茶树，与

This is some sample text.

价值。问题出在哪里，我应该如何解决？

4

7 回答 7

31

我使用以下步骤将 ckeditor 添加到我的 codeigniter 应用程序中：

1) 下载这些文件：

2) 将刚刚下载的文件复制到Application/libraries文件夹中

3) 在此处下载 ckeditor 助手：http: //pastebin.com/Cd3GqYbx

4) 将application/helper文件夹中的最后一个文件复制为ckeditor_helper.php

5）在这里下载CKeditor控制器：http: //pastebin.com/UD0bB9ig

6) 将您的应用程序/控制器文件夹中的控制器复制为ckeditor.php

7）从官网下载ckeditor主工程：http: //ckeditor.com/download/

8) 将刚才下载的ckeditor文件夹复制到asset文件夹中（如果需要也可以下载ckfinder工程放在同一个文件夹下）

9）将这行js添加到您的视图文件中（调整路径）：

<script type="text/javascript" src="/asset/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/asset/ckfinder/ckfinder.js"></script>

10) 在您的控制器中添加此 php 代码并调整路径：

$this->load->library('ckeditor');
$this->load->library('ckfinder');



$this->ckeditor->basePath = base_url().'asset/ckeditor/';
$this->ckeditor->config['toolbar'] = array(
                array( 'Source', '-', 'Bold', 'Italic', 'Underline', '-','Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo','-','NumberedList','BulletedList' )
                                                    );
$this->ckeditor->config['language'] = 'it';
$this->ckeditor->config['width'] = '730px';
$this->ckeditor->config['height'] = '300px';            

//Add Ckfinder to Ckeditor
$this->ckfinder->SetupCKEditor($this->ckeditor,'../../asset/ckfinder/');

11) 在您看来，使用以下命令打印编辑器：

echo $this->ckeditor->editor("textarea name","default textarea value");
于 2012-08-05T08:38:38.417 回答
4

你可以这样做：

  1. 将 CKEditor 文件复制到源根目录中的文件夹，例如 ckeditor

  2. 在视图文件中包含 CKEditor 文件

     <script src="<?php echo base_url(); ?>ckeditor/ckeditor.js"></script>
        <link rel="stylesheet" href="<?php base_url(); ?>style/format.css">

  3. 最后是你的 html 文档中的 textarea

     <textarea cols="80" id="edi" name="editor1" rows="10">
                <?php echo $page_content->message1; ?>
                            </textarea>
                            <script>

                                CKEDITOR.replace('edi');

                     </script>    </body>

这对我很有用。享受！

于 2013-03-07T15:50:23.193 回答
1

我在这里找到了一个非常简单的 2 代码行解释： http ://www.iprogrammerindia.in/how-to-integrate-ckeditor-in-codeigniter/#comment-73

以防万一链接消失，我将在此处粘贴文本。这对我有用 2014 年 8 月 1 日：

将此行包含在您要使用 ckeditor 的视图中，并将您的 ckeditor 文件夹放在根文件夹中。这里我放在根文件夹中的 js/ckeditor/

<script type="text/javascript" src="<?php echo base_url();?>js/ckeditor/ckeditor.js"></script>

接下来在同一视图中包含以下行，

<?php echo form_textarea(array('name' =>'desc','id'=>'desc','class'=>"ckeditor")); ?>
于 2014-08-02T01:11:38.487 回答
1
  1. 从https://ckeditor.com/ckeditor-4/download/下载 CKEditor 包
  2. 在您的首选位置解压缩 Codeigniter 项目文件夹中的文件夹。
  3. 在页面中包含<script>加载 CKEditor 的元素。
  4. 使用CKEditorCKEDITOR.replace()替换现有<textarea>元素的方法。

请参见以下示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="../ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </body>
</html>
于 2018-12-04T11:43:58.163 回答
0

好吧，我知道这个问题很老，但这就是我所做的，对我来说似乎是最简单的。

  1. 在我的根目录下，我有一个名为“js”的目录，其中有一个名为“plugins”的目录。我在那里复制了ckeditor文件。
  2. 然后在application/views/common/headers目录中我有一个标题为' ckeditor.php'的头文件。在这个文件中只有以下代码：
<script type="text/javascript" src="php echo base_url();?>
js/plugin/ckeditor/ckeditor.js"></script>
  1. 然后在控制器中，我将头文件添加到 $data 对象以传递给视图： $data['header_files'] = array('header1','header2','header3', 'ckeditor'); // header file names were changed for the sake of my client
  2. 然后，当然将 $data 对象传递给视图： $this->load->view('common/admin-template',$data);
  3. 然后我只打电话给 CKEDITOR.replace('textareaNameHere');

瞧。有用

于 2014-07-05T17:27:46.343 回答
0

同样的问题是我正在承认，但只是你需要根文件夹中资产文件夹中的所有文件。我的控制器部分是

$this->load->library('ckeditor');
    $this->load->library('ckfinder');

    $this->ckeditor->basePath = base_url().'assets/admin/ckeditor/';
    $this->ckeditor->config['toolbar'] = array(
                                                array( 'Source', '-', 'Bold', 'Italic', 'Underline', '-','Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo','-','NumberedList','BulletedList' )
                                                );
    $this->ckeditor->config['language'] = 'en';
    $this->ckeditor->config['width'] = '730px';
    $this->ckeditor->config['height'] = '300px';            

//Add Ckfinder to Ckeditor
    $this->ckfinder->SetupCKEditor($this->ckeditor,base_url().'asset/admin/ckfinder/');

我的观点是

<div class="form-group">
    <label for="description">Description</label> <?php echo form_error('event_description'); ?>
    <?php echo $this->ckeditor->editor("event_description",((isset($event_description)) ? $event_description : ''));?>      
</div>

我将 ck 编辑器文件夹放在资产文件夹中，并将资产文件夹放在根文件中，如
C:\wamp\www\site\assets\admin\ckeditor

于 2014-11-22T18:44:43.923 回答
0

我认为使用 Ckeditor 最简单的方法是通过 CDN，在您的视图文件中使用它并

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/classic/ckeditor.js"></script>
</head>
<body>
<textarea name="editor" id="editor" rows="10" cols="80" placeholder="Insert text here" class="form-control"></textarea>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>

有关 ckeditor 的更多信息和样式以及不同样式的 ckeditor 的使用，您可以访问https://cdn.ckeditor.com/#ckeditor5

如果您正在寻找 Ckeditor 的文档编辑器，请点击以下链接 https://ckeditor.com/docs/ckeditor5/latest/builds/guides/quick-start.html#document-editor

使用示例，您将能够在视图文件中插入文档编辑器

于 2020-04-27T05:31:09.093 回答