Я использую CKEDITOR и хочу, чтобы пользователи могли загружать и вставлять изображения в текстовый редактор...
Следующий JS загружает CKEDITOR:
CKEDITOR.replace( 'meeting_notes',
{
startupFocus : true,
toolbar :
[
['ajaxsave'],
['Bold', 'Italic', 'Underline', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
['Cut','Copy','Paste','PasteText'],
['Undo','Redo','-','RemoveFormat'],
['TextColor','BGColor'],
['Maximize', 'Image']
],
filebrowserUploadUrl : '/notes/add/ajax/upload-inline-image/index.cfm'
}
);
Где я застрял в файле filebrowserUploadUrl... Что это за URL, который должен вернуться в CKEDITOR, чтобы заставить этот процесс работать?
Спасибо
URL-адрес должен указывать на собственный URL-адрес вашего файла, который может быть у вас.
Я уже сделал это в одном из моих проектов, и я разместил учебник по этой теме в своем блоге
http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/
В учебном пособии даются пошаговые инструкции о том, как интегрировать встроенный FileBrowser из FCKEditor в CKEditor, если вы не хотите создавать свои собственные. Его довольно просто.
Может быть, слишком поздно. Ваш код верный, поэтому, пожалуйста, еще раз проверьте свой url в файлеbrowserUploadUrl
CKEDITOR.replace( 'editor1', {
filebrowserUploadUrl: "upload/upload.php"
} );
И файл Upload.php
if (file_exists("images/" . $_FILES["upload"]["name"]))
{
echo $_FILES["upload"]["name"] . " already exists. ";
}
else
{
move_uploaded_file($_FILES["upload"]["tmp_name"],
"images/" . $_FILES["upload"]["name"]);
echo "Stored in: " . "images/" . $_FILES["upload"]["name"];
}
В новом CKeditor нет файлового менеджера (CKFinder выплачивается). Вы можете интегрировать бесплатный файловый менеджер, который хорошо выглядит и легко реализуется в CKeditor.
http://labs.corefive.com/2009/10/30/an-open-file-manager-for-ckeditor-3-0/
Вы загрузите его, скопируйте в свой проект. Все инструкции есть, но вы в основном просто поместите путь к добавленной странице filemanager index.html в свой код.
CKEDITOR.replace( 'meeting_notes',
{
startupFocus : true,
toolbar :
[
['ajaxsave'],
['Bold', 'Italic', 'Underline', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
['Cut','Copy','Paste','PasteText'],
['Undo','Redo','-','RemoveFormat'],
['TextColor','BGColor'],
['Maximize', 'Image']
],
filebrowserUploadUrl : '/filemanager/index.html' // you must write path to filemanager where you have copied it.
});
Поддерживаются большинство языков (php, asp, MVC и aspx - ashx,...)).
Если вы не хотите покупать CKFinder, например, я не хотел покупать CKFinder, тогда я написал очень надежный загрузчик для CKEditor 4. Он состоит из второй формы, помещенной непосредственно над вашей текстовой формой, и использует хакер iframe, который, несмотря на его название, является бесшовным и ненавязчивым.
После того, как изображение будет успешно загружено, оно появится в вашем окне CKEditor вместе с любым содержимым.
editor.php (страница формы):
<?php
set_time_limit ( 3600 )
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Content Editor</title>
<link href="jquery-ui-1.10.2/themes/vader/ui.dialog.css" rel="stylesheet" media="screen" id="dialog_ui" />
<link href="jquery-ui-1.10.2/themes/vader/jquery-ui.css" rel="stylesheet" media="screen" id="dialog_ui" />
<script src="jquery-ui-1.10.2/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.2/jquery.form.js"></script>
<script src="jquery-ui-1.10.2/ui/jquery-ui.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<script src="ckeditor/config.js"></script>
<script src="ckeditor/adapters/jquery.js"></script>
<script src="ckeditor/plugin2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#editor').ckeditor({ height: 400, width:600});
});
function placePic(){
function ImageExist(url){
var img = new Image();
img.src = url;
return img.height != 0;
}
var filename = document.forms['uploader']['uploadedfile'].value;
document.forms['uploader']['filename'].value = filename;
var url = 'http://www.mydomain.com/external/images/cms/'+filename;
document.getElementById('uploader').submit();
var string = CKEDITOR.instances.editor.getData();
var t = setInterval(function(){
var exists = ImageExist(url);
if(exists === true){
if(document.getElementById('loader')){
document.getElementById('loader').parentNode.removeChild(document.getElementById('loader'));
}
CKEDITOR.instances.editor.setData(string + "<img src=\""+url+"\" />");
clearInterval(t);
}
else{
if(! document.getElementById("loader")){
var loader = document.createElement("div");
loader.setAttribute("id","loader");
loader.setAttribute("style","position:absolute;margin:-300px auto 0px 240px;width:113px;height:63px;text-align:center;z-index:10;");
document.getElementById('formBox').appendChild(loader);
var loaderGif = document.createElement("img");
loaderGif.setAttribute("id","loaderGif");
loaderGif.setAttribute("style","width:113px;height:63px;text-align:center;");
loaderGif.src = "external/images/cms/2dumbfish.gif";
document.getElementById('loader').appendChild(loaderGif);
}
}
},100);
}
function loadContent(){
if(document.forms['editorform']['site'].value !== "" && document.forms['editorform']['page'].value !== ""){
var site = document.forms['editorform']['site'].value;
var page = document.forms['editorform']['page'].value;
var url = site+"/"+page+".html";
$.ajax({
type: "GET",
url: url,
dataType: 'html',
success: function (html) {
CKEDITOR.instances.editor.setData(html);
}
});
}
}
</script>
<style>
button{
width: 93px;
height: 28px;
border:none;
padding: 0 4px 8px 0;
font-weight:bold
}
#formBox{
width:50%;
margin:10px auto 0px auto;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
#field{
position:absolute;
top:10px;
margin-left:300px;
margin-bottom:20px;
}
#target{
position:absolute;
top:100px;
left:100px;
width:400px;
height:100px;
display:none;
}
.textField{
padding-left: 1px;
border-style: solid;
border-color: black;
border-width: 1px;
font-family: helvetica, arial, sans serif;
padding-left: 1px;
}
#report{
float:left;
margin-left:20px;
margin-top:10px;
font-family: helvetica, arial, sans serif;
font-size:12px;
color:#900;
}
</style>
</head>
<body>
<?php
if(isset($_GET['r'])){ ?><div id="report">
<?php echo $_GET['r']; ?> is changed.
</div><?php
}
?>
<div id="formBox">
<form id="uploader" name="uploader" action="editaction.php" method="post" target="target" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="50000000" />
<input type="hidden" name="filename" value="" />
Insert image: <input name="uploadedfile" type="file" class="textField" onchange="placePic();return false;" />
</form>
<form name="editorform" id="editorform" method="post" action="editaction.php" >
<div id="field" >Site: <select name="site" class="textField" onchange="loadContent();return false;">
<option value=""></option>
<option value="scubatortuga">scubatortuga</option>
<option value="drytortugascharters">drytortugascharters</option>
<option value="keyscombo">keyscombo</option>
<option value="keywesttreasurehunters">keywesttreasurehunters</option>
<option value="spearfishkeywest">spearfishkeywest</option>
</select>
Page: <select name="page" class="textField" onchange="loadContent();return false;">
<option value=""></option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
</select>
</div><br />
<textarea name="editor" id="editor"></textarea><br />
<input type="submit" name="submit" value="Submit" />
</form>
</div>
<iframe name="target" id="target"></iframe>
</body>
</html>
И вот страница действия editaction.php, которая фактически загружает файл:
<?php
//editaction.php
foreach($_POST as $k => $v){
${"$k"} = $v;
}
//fileuploader.php
if($_FILES){
$target_path = "external/images/cms/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
if(! file_exists("$target_path$filename")){
move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path);
}
}
else{
$string = stripslashes($editor);
$filename = "$site/$page.html";
$handle = fopen($filename,"w");
fwrite($handle,$string,strlen($string));
fclose($handle);
header("location: editor.php?r=$filename");
}
?>
Моя последняя проблема заключалась в том, как интегрировать CKFinder для загрузки изображений в CKEditor. Здесь решение.
Загрузите CKEditor и извлеките в корне вашей веб-папки.
Загрузите CKFinder и извлеките папку ckeditor.
Затем добавьте ссылки на CKEditor, CKFinder и поместите
<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server"></CKEditor:CKEditorControl>
на страницу aspx.
В коде за страницей Событие OnLoad добавьте этот фрагмент кода
protected override void OnLoad(EventArgs e)
{
CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrowser();
_FileBrowser.BasePath = "ckeditor/ckfinder/";
_FileBrowser.SetupCKEditor(CKEditorControl1);
}
Изменить файл Confic.ascx.
public override bool CheckAuthentication()
{
return true;
}
// Perform additional checks for image files.
SecureImageUploads = true;
(источник)
С CKeditor версии 4 что-то, редактор ожидает JSON в ответ со стороны сервера. Более старой версии может понадобиться текст/html-тип ответа, содержащий фрагмент javascript. См. Эту ссылку для объяснения этого Объяснения форматов возврата. На стороне сервера, и если вы используете С#, вы можете сделать такую модель данных следующим образом:
namespace editors.Models
{
public class PostModel
{
public string CKEditor { get; set; } // for older editors
public string CKEditorFuncNum { get; set; } // for older editors
public string langCode { get; set; } // for older editors
public int uploaded { get; set; }
public string filename { get; set; }
}
}
И верните результат из своей программы загрузки с помощью этого:
PostModel fez = new PostModel { CKEditor = "TheEditor1", CKEditorFuncNum = "1", langCode = "en", uploaded = 1, filename = "/images/in/" + filenameVariable };
return Ok(fez);
Хотя.net, скорее всего, делает json этого автоматически, убедитесь, что вы возвращаете приложение типа контента /json.
В качестве примечания для тех, кто хочет проверить, действительно ли загруженный файл является файлом изображения; если вы используете ядро Asp.net, библиотеку system.drawing необходимо установить нестандартным способом. Вот как это сделать
Также обратите внимание, что вы можете изменить тип проводки в файле config.js на config.filebrowserUploadMethod = 'form'; , в отличие от config.filebrowserUploadMethod = 'xhr';
Для тех же проблем в плагине Grails ckeditor Give
filebrowserUploadUrl: '/YourAppName/ck/ofm'
чтобы вызвать функцию, которая обрабатывает изображение uploade. Если вы хотите использовать свою собственную настраиваемую функцию, вы можете указать этот путь к файлу.
Эта простая демонстрация может помочь вам получить то, что вы хотите. Вот код html/php, откуда вы хотите загрузить изображение:
<html>
<head>
<script src="http://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>
</head>
<body>
<form action="index.php" method="POST" style="width:500xp;">
<textarea rows="5" name="content" id="content"></textarea>
<br>
<input type="submit" name="submit" value="Post">
</form>
<script>
CKEDITOR.replace( 'content', {
height: 300,
filebrowserUploadUrl: "upload.php"
});
</script>
</body>
</html>
и вот код для файла upload.php.
<?php
if(isset($_FILES['upload']['name']))
{
$file = $_FILES['upload']['tmp_name'];
$file_name = $_FILES['upload']['name'];
$file_name_array = explode(".", $file_name);
$extension = end($file_name_array);
//we want to save the image with timestamp and randomnumber
$new_image_name = time() . rand(). '.' . $extension;
chmod('upload', 0777);
$allowed_extension = array("jpg", "gif", "png");
if(in_array($extension, $allowed_extension))
{
move_uploaded_file($file, 'upload/' . $new_image_name);
$function_number = $_GET['CKEditorFuncNum'];
$url = 'upload/' . $new_image_name;
$message = '';
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($function_number, '$url', '$message');</script>";
}
}
?>
Примечание. Не забудьте создать папку "upload" в одной папке и сохранить все три файла в одном каталоге. Позже вы можете изменить их каталоги, как только вы поймете, как это работает. Также не забудьте нажать кнопку отправить на сервер, как показано на рисунке ниже.
Этот URL-адрес укажет на ваше собственное действие загрузки файлов на стороне сервера. Документация не вдавалась в детали, но, к счастью, Дон Джонс заполняет некоторые пробелы здесь:
Как вы можете интегрировать пользовательский файловый браузер/загрузчик с помощью CKEditor?
См. также:
http://zerokspot.com/weblog/2009/09/09/custom-filebrowser-callbacks-ckeditor/
Мне недавно тоже нужен был ответ, и мне потребовалось несколько часов, чтобы понять это, поэтому я решил воскресить этот вопрос с более подробной информацией и полным ответом.
В конце концов я наткнулся на этот учебник, который объяснил мне это довольно хорошо. Для stackoverflow, я буду повторять учебник здесь, в случае его удаления. Я также включу некоторые изменения, которые я внес в учебник, которые делают это более гибким решением.
Начнем с любого из выпусков ckeditor, (Basic, standard, full, custom). Единственное требование состоит в том, что у вас есть addon image и filebrowser
(С учетом этого все пакеты включают эти 2 дополнения, кроме основного, но могут быть добавлены к основному)
После загрузки необходимых файлов ckeditor убедитесь, что ваша установка работает.
Убедитесь, что вы связали файл ckeditor.js script <script src="ckeditor/ckeditor.js"></script>, а затем инициализируйте его так:
$(document).ready(function() {
CKEDITOR.replace( 'editor1' );
});
<textarea name="editor1"></textarea>
Теперь мы должны сказать CKEditor, что мы хотим включить загрузку. Вы можете сделать это, перейдя в вашу папку ckeditor и отредактировав `config.js '. Нам нужно добавить эту строку:
config.filebrowserUploadUrl = '/uploader/upload.php'; где-то внутри основной функции E.G
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.filebrowserUploadUrl = '/uploader/upload.php';
};
ПРИМЕЧАНИЕ. Этот URL-адрес относится к вашему корню проекта. Независимо от того, где вы загружаете этот файл, он начнется с вашего индекса сайта. Значение, если ваш URL-адрес example.com, этот URL-адрес ведет к
http://example.com/uploader/upload.php
После этого выполняется настройка CKEditor! Это было легко?
На самом деле, если вы снова проведете загрузку своего изображения, вы получите вариант загрузки, хотя он пока не будет работать.
Теперь вы заметите на шаге перед этим, что он заканчивается файлом upload.php. Это то, что меня тошнило, я подумал, что будет какой-то дефолт, который может пойти на это, но насколько я знаю, этого нет. К счастью, я нашел тот, который работает, и я внес некоторые изменения в него, чтобы сделать больше настроек.
Итак, отпустите путь, который вы предоставили на последнем шаге, для обеспечения непрерывности в этом учебнике я буду использовать /uploader/upload.php.
В этом месте сделайте файл с именем (вы уже догадались) upload.php.
Этот файл будет обрабатывать наши загрузки файлов.
Я положу свой пользовательский класс загрузки, но на основе этого github, который я нашел и разветкил.
upload.php:
<?php
// Upload script for CKEditor.
// Use at your own risk, no warranty provided. Be careful about who is able to access this file
// The upload folder shouldn't be able to upload any kind of script, just in case.
// If you're not sure, hire a professional that takes care of adjusting the server configuration as well as this script for you.
// (I am not such professional)
// Configuration Options: Change these to alter the way files being written works
$overwriteFiles = false;
//THESE SETTINGS ONLY MATTER IF $overwriteFiles is FALSE
//Seperator between the name of the file and the generated ending.
$keepFilesSeperator = "-";
//Use "number" or "random". "number" adds a number, "random" adds a randomly generated string.
$keepFilesAddonType = "random";
//Only usable when $keepFilesAddonType is "number", this specifies where the number starts iterating from.
$keepFilesNumberStart = 1;
//Only usable when $keepFilesAddonType is "random", this specifies the length of the string.
$keepFilesRandomLength = 4;
//END FILE OVERWRITE FALSE SETTINGS
// Step 1: change the true for whatever condition you use in your environment to verify that the user
// is logged in and is allowed to use the script
if (true) {
echo("You're not allowed to upload files");
die(0);
}
// Step 2: Put here the full absolute path of the folder where you want to save the files:
// You must set the proper permissions on that folder (I think that it 644, but don't trust me on this one)
// ALWAYS put the final slash (/)
$basePath = "/home/user/public_html/example/pages/projects/uploader/files/";
// Step 3: Put here the Url that should be used for the upload folder (it the URL to access the folder that you have set in $basePath
// you can use a relative url "/images/", or a path including the host "http://example.com/images/"
// ALWAYS put the final slash (/)
$baseUrl = "http://example.com/pages/projects/uploader/files/";
// Done. Now test it!
// No need to modify anything below this line
//----------------------------------------------------
// ------------------------
// Input parameters: optional means that you can ignore it, and required means that you
// must use it to provide the data back to CKEditor.
// ------------------------
// Optional: instance name (might be used to adjust the server folders for example)
$CKEditor = $_GET['CKEditor'] ;
// Required: Function number as indicated by CKEditor.
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: To provide localized messages
$langCode = $_GET['langCode'] ;
// ------------------------
// Data processing
// ------------------------
// The returned url of the uploaded file
$url = '' ;
// Optional message to show to the user (file renamed, invalid file, not authenticated...)
$message = '';
// in CKEditor the file is sent as 'upload'
if (isset($_FILES['upload'])) {
// Be careful about all the data that it sent!!!
// Check that the user is authenticated, that the file isn't too big,
// that it matches the kind of allowed resources...
$name = $_FILES['upload']['name'];
//If overwriteFiles is true, files will be overwritten automatically.
if(!$overwriteFiles)
{
$ext = ".".pathinfo($name, PATHINFO_EXTENSION);
// Check if file exists, if it does loop through numbers until it doesn't.
// reassign name at the end, if it does exist.
if(file_exists($basePath.$name))
{
if($keepFilesAddonType == "number") {
$operator = $keepFilesNumberStart;
} else if($keepFilesAddonType == "random") {
$operator = bin2hex(openssl_random_pseudo_bytes($keepFilesRandomLength/2));
}
//loop until file does not exist, every loop changes the operator to a different value.
while(file_exists($basePath.$name.$keepFilesSeperator.$operator))
{
if($keepFilesAddonType == "number") {
$operator++;
} else if($keepFilesAddonType == "random") {
$operator = bin2hex(openssl_random_pseudo_bytes($keepFilesRandomLength/2));
}
}
$name = rtrim($name, $ext).$keepFilesSeperator.$operator.$ext;
}
}
move_uploaded_file($_FILES["upload"]["tmp_name"], $basePath . $name);
// Build the url that should be used for this file
$url = $baseUrl . $name ;
// Usually you don't need any message when everything is OK.
// $message = 'new file uploaded';
}
else
{
$message = 'No file has been sent';
}
// ------------------------
// Write output
// ------------------------
// We are in an iframe, so we must talk to the object in window.parent
echo "<script type='text/javascript'> window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message')</script>";
?>
Изменения, внесенные мной в этот класс, позволяют включать/отключать перезаписи файлов и предоставляют некоторые параметры, когда вы не хотите перезаписывать файлы. Первоначальный класс всегда перезаписывает без параметров.
По умолчанию этот класс настроен на сохранение всех файлов без перезаписи. Вы можете играть с этими настройками, чтобы лучше соответствовать вашим потребностям.
Если вы заметите, есть раздел кода, который является просто инструкцией if(true), которая всегда истинна, очевидно,
if (true) {
echo("You're not allowed to upload files");
die(0);
}
Это для безопасности. Здесь вы должны проверить, зарегистрирована ли загрузка пользователя/разрешена загрузка. Если вас это не беспокоит, вы можете просто удалить эти строки кода или установить его на if(false) (НЕ РЕКОМЕНДУЕТСЯ)
Вам также нужно будет отредактировать переменные $basePath и $baseUrl, чтобы они соответствовали вашим потребностям сервера, иначе это не сработает. Все ниже этого можно оставить в покое, если вы не хотите играть вокруг.
Этот класс не предлагает защиту файлов, вы можете с ним работать, чтобы сделать его более безопасным, чтобы люди не могли загружать скрипты или вирусы на ваш сервер.
Я надеюсь, что этот небольшой учебник помог кому-то, поскольку я слишком долго работал над тем, чтобы заставить это работать для себя, и я надеюсь, что смогу сэкономить еще какое-то время.
В этом учебнике также есть некоторые аккуратные шаги по устранению неполадок, которые были связаны выше, которые могут помочь вам найти, что происходит неправильно, если что-то есть.
Вы можете использовать этот код
<script>
// Replace the <textarea id="editor"> with a CKEditor
// instance, using default configuration.
CKEDITOR.config.filebrowserImageBrowseUrl = '/admin/laravel-filemanager?type=Files';
CKEDITOR.config.filebrowserImageUploadUrl = '/admin/laravel-filemanager/upload?type=Images&_token=';
CKEDITOR.config.filebrowserBrowseUrl = '/admin/laravel-filemanager?type=Files';
CKEDITOR.config.filebrowserUploadUrl = '/admin/laravel-filemanager/upload?type=Files&_token=';
CKEDITOR.replaceAll( 'editor');
</script>
Я уже сделал это в одном из своих проектов, и я разместил учебник по этой теме в своем блоге. Вы можете увидеть его. Как добавить ckeditor с загрузкой изображения
Чтобы загрузить изображение, просто перетащите его с рабочего стола или из любого места, где вы можете достичь этого, скопировав изображение и вставив его в текстовую область, используя ctrl + v