Javascript CodeIgniter 中的 CKEditor

Question

提问by Moein Hosseini

I wanna load CKEditor in CodeIgniter,I search a lot,but can't understand their way.

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

I placed ckeditor in application/pluginsfolder and now I wanna make editor ,so I do following in Controller Method.

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

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);

but it makes simple teaxaria only ,with

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

This is some sample text.

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

Answer 1

回答by Christian Giupponi

I use this steps to add ckeditor to my codeigniter apps:

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

1) Download these files:

1) 下载这些文件：

This for Ckeditor: http://pastebin.com/fkK9e0RR
This for Ckfinder: http://pastebin.com/SvyypmX4

这对于 Ckeditor：http://pastebin.com/fkK9e0RR
这对于 Ckfinder：http://pastebin.com/SvyypmX4

2) Copy the files you just downloaded into your Application/librariesfolder

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

3) Download the ckeditor helper here: http://pastebin.com/Cd3GqYbx

3）在这里下载ckeditor助手：http://pastebin.com/Cd3GqYbx

4) Copy the last file in application/helperfolder as ckeditor_helper.php

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

5) Download the CKeditor controller here: http://pastebin.com/UD0bB9ig

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

6) Copy the controller in your application/controllersfolder as ckeditor.php

6) 将application/controllers文件夹中的控制器复制为ckeditor.php

7) Download the main ckeditor project from the official site: http://ckeditor.com/download/

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

8) Copy the ckeditor folder you just download into your asset folder (if you want you can also download the ckfinder project and put it in the same folder)

8) 将刚才下载的ckeditor文件夹复制到你的asset文件夹中（如果你愿意也可以下载ckfinder项目放在同一个文件夹下）

9) Add these line of js to your view file (adjust the path):

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

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

10) In your controller add this php code and adjust the path:

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) In your view print the editor with:

11）在您的视图中打印编辑器：

echo $this->ckeditor->editor("textarea name","default textarea value");

Answer 2

回答by user2143384

You could otherwise do this:

你可以这样做：

copy the CKEditor files to a folder in your source's root eg ckeditor

Include the CKEditor files in your view file

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

finally your textarea in your html document

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

                                CKEDITOR.replace('edi');

                     </script>    </body>

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

在视图文件中包含 CKEditor 文件

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

最后是你的 html 文档中的 textarea

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

                                CKEDITOR.replace('edi');

                     </script>    </body>

This works great for me. Enjoy!

这对我很有用。享受！

Answer 3

回答by Tiger

I found a sweetly simple 2-code-line explanation here: http://www.iprogrammerindia.in/how-to-integrate-ckeditor-in-codeigniter/#comment-73

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

Just in case the link disappears I will paste the text here. This worked for me 8/1/14:

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

Include this line in your view where you want to use ckeditor and place your ckeditor folder in root folder. Here i placed in js/ckeditor/ in root folder

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

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

Next include the below line in the same view,

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

<?php echo form_textarea(array('name' =>'desc','id'=>'desc','class'=>"ckeditor")); ?>

Answer 4

回答by Vatsal Shah

Download CKEditor package from https://ckeditor.com/ckeditor-4/download/
Unzip folder in your Codeigniter project folder at your preferred location.
Include the <script>element loading CKEditor in your page.
Use the CKEDITOR.replace()method to replace the existing <textarea>element with CKEditor.

从https://ckeditor.com/ckeditor-4/download/下载 CKEditor 包
在您首选位置的 Codeigniter 项目文件夹中解压缩文件夹。
<script>在页面中包含加载 CKEditor的元素。
使用CKEDITOR.replace()方法将现有<textarea>元素替换为CKEditor。

See the following example:

请参阅以下示例：

<!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>

Answer 5

回答by Jagadish Meghval

I think the simplest way to use Ckeditor is through CDN, Use this in your view file and

我认为使用 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>

for more information and styling of ckeditor and use of different styles of ckeditor you can visit the https://cdn.ckeditor.com/#ckeditor5

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

If you are looking for Document editor of Ckeditor then follow the below linkhttps://ckeditor.com/docs/ckeditor5/latest/builds/guides/quick-start.html#document-editor

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

use the example and you will be able to insert the document editor in your view file

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

Answer 6

回答by SURYA PRATAP

same problem is i am fessing but just little thing u need all file in asset folder in the root folder. my controller part is

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

$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/');

my view part is

我的观点是

<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>

i putting ck editer folder in asset folder and asset folder in root file like
C:\wamp\www\site\assets\admin\ckeditor

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

Answer 7

回答by insaineyesay

Well, I know this question is old, but this is what I did, and seems to be easiest for me.

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

In my root, I have a directory called 'js' and within that I have a directory called 'plugins'. I copied the ckeditor files there.
Then in application/views/common/headersdirectory I have a header file titled 'ckeditor.php'. Within this file just lies the following code:

在我的根目录中，我有一个名为“js”的目录，其中有一个名为“plugins”的目录。我在那里复制了 ckeditor 文件。
然后在application/views/common/headers目录中我有一个标题为“ ckeditor.php”的头文件。在这个文件中只包含以下代码：

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

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

Then in the controller, I added the header file to the $data object to pass to the view: $data['header_files'] = array('header1','header2','header3', 'ckeditor'); // header file names were changed for the sake of my client
Then, you pass the $data object of to the view of course: $this->load->view('common/admin-template',$data);
then I just called CKEDITOR.replace('textareaNameHere');

然后在控制器中，我将头文件添加到 $data 对象中以传递给视图： $data['header_files'] = array('header1','header2','header3', 'ckeditor'); // header file names were changed for the sake of my client
然后，您当然将 $data 对象传递给视图： $this->load->view('common/admin-template',$data);
然后我只是打电话给 CKEDITOR.replace('textareaNameHere');

and voila. it works

瞧。有用

Javascript CodeIgniter 中的 CKEditor

提问by Moein Hosseini

回答by Christian Giupponi

回答by user2143384

回答by Tiger

回答by Vatsal Shah

回答by Jagadish Meghval

回答by SURYA PRATAP

回答by insaineyesay

相关推荐

最近更新

标签

Javascript CodeIgniter 中的 CKEditor

提问by Moein Hosseini

回答by Christian Giupponi

回答by user2143384

回答by Tiger

回答by Vatsal Shah

回答by Jagadish Meghval

回答by SURYA PRATAP

回答by insaineyesay

相关推荐

带有滚动的 Jquery/Javascript 不透明度动画

如何设置 webstorm 以自动向 javascript 函数、方法等添加分号

Socket.io 如何发送 JavaScript 对象

使用 Javascript 更新 JSON 对象

相关推荐

最近更新

标签