CodeIgniter 中的 CKEditor
Posted
技术标签:
【中文标题】CodeIgniter 中的 CKEditor【英文标题】：CKEditor in CodeIgniter 【发布时间】：2012-08-02 15:16:27 【问题描述】：我想在 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);
但它只制作简单的茶树，具有<p>This is some <strong>sample text</strong>.</p> 值。
问题出在哪里，我应该如何解决？
【问题讨论】：
【参考方案1】：我认为使用 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
使用示例，您将能够在视图文件中插入文档编辑器
【讨论】：
【参考方案2】：-
从https://ckeditor.com/ckeditor-4/download/下载CKEditor包
在您的首选位置解压缩 Codeigniter 项目文件夹中的文件夹。
在您的页面中包含加载 CKEditor 的
<script> 元素。
使用CKEDITOR.replace() 方法将现有的<textarea> 元素替换为CKEditor。
请看下面的例子：
<!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>
【讨论】：
谢谢，更简单的不可能【参考方案3】：嗯，我知道这个问题很老，但这就是我所做的，对我来说似乎是最简单的。
-
在我的根目录下，我有一个名为“js”的目录，其中有一个
名为“插件”的目录。我在那里复制了 ckeditor 文件。
然后在
application/views/common/headers目录下我有一个头文件
标题为“ckeditor.php”。在这个文件中只有以下代码：
<script type="text/javascript" src="php echo base_url();?> js/plugin/ckeditor/ckeditor.js"></script>
-
然后在控制器中，我将头文件添加到 $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');
瞧。它有效
【讨论】：
【参考方案4】：同样的问题是我正在承认，但只是你需要根文件夹中资产文件夹中的所有文件。 我的控制器部分是
$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
【讨论】：
这是一个答案，还是一个新问题？ 以上问题的答案【参考方案5】：我在这里找到了一个非常简单的两行代码解释：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")); ?>
【讨论】：
【参考方案6】：我使用以下步骤将 ckeditor 添加到我的 codeigniter 应用程序中：
1) 下载这些文件：
这对于 Ckeditor：http://pastebin.com/fkK9e0RR 这对于 Ckfinder：http://pastebin.com/SvyypmX42) 将您刚刚下载的文件复制到您的 Application/libraries 文件夹中
3) 在此处下载 ckeditor 助手：http://pastebin.com/Cd3GqYbx
4) 将application/helper文件夹中的最后一个文件复制为ckeditor_helper.php
5) 在此处下载 CKeditor 控制器：http://pastebin.com/UD0bB9ig
6) 将 application/controllers 文件夹中的控制器复制为 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");
【讨论】：
如何添加图片上传功能？在 $config['toolbar'] 中添加了图像，但它不起作用。请帮忙 @user1149244 是的，你必须创建它 @Mansoorkhan Cherupuzha：我发现这个链接有助于我在 CKeditor derekmd.com/2013/03/ckeditor-image-upload-in-codeigniter 中上传图片。你可能想试一试。迄今为止我发现的最好的教程之一。 使用列出的步骤完美运行！ 我已按照您的步骤进行操作，但是我面临的问题是，每当我单击“浏览服务器”按钮时，弹出屏幕显示为空白。你能帮我吗？【参考方案7】：否则你可以这样做：
-
将 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 cols="80" id="edi" name="editor1" rows="10">
<?php echo $page_content->message1; ?>
</textarea>
<script>
CKEDITOR.replace('edi');
</script> </body>
这对我很有用。享受吧！
【讨论】：
以上是关于CodeIgniter 中的 CKEditor的主要内容，如果未能解决你的问题，请参考以下文章
活动记录 CodeIgniter 2 中的这个查询有啥问题？