Я использую 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 должен указывать на ваш собственный пользовательский адрес файлового браузера, который вы можете иметь.
Я уже сделал это в одном из своих проектов и опубликовал учебник на эту тему в своем блоге
http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/
В руководстве даются пошаговые инструкции о том, как интегрировать встроенный FileBrowser из FCKEditor в CKEditor, если вы не хотите создавать свой собственный. Это довольно просто.
Может быть, уже слишком поздно. Ваш код правильный, поэтому, пожалуйста, проверьте ваш URL в filebrowserUploadUrl
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 - aschx,...)).
Если вы не хотите покупать 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");
}
?>
& Лт; / html >
Моя последняя проблема заключалась в том, как интегрировать 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;
}
// Выполняем дополнительные проверки для файлов изображений.
SecureImageUploads = true;
(source)
С CKeditor версии 4 редактор ожидает JSON взамен со стороны сервера. Для более старой версии может потребоваться ответ типа text / html с фрагментом javascript. См. Эту ссылку для объяснения этого Объяснение форматов возврата. На стороне сервера, и если вы используете C #, вы можете создать модель данных, как это:
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';
Эта простая демонстрация может помочь вам получить то, что вы хотите. Вот код 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>";
}
}
?>
Примечание. Не забудьте создать папку «загрузить» в одной папке и сохранить все три файла в одном каталоге. Позже вы можете изменить их каталоги, как только поймете, как это работает. Также не забудьте нажать отправить его на сервер, как показано на рисунке ниже.
Для тех же есть проблема в Grails ckeditor plugin Give
filebrowserUploadUrl: '/ YourAppName / ck / ofm'
чтобы вызвать функцию, которая обрабатывает изображение uploade.Если вы хотите использовать свою собственную настраиваемую функцию, вы можете указать этот путь к файлу.
Недавно мне также понадобился ответ на этот вопрос, и мне потребовалось несколько часов, чтобы понять его, поэтому я решил воскресить этот вопрос с более актуальной информацией и полным ответом.
В конце концов я наткнулся на этот урок, который мне довольно хорошо объяснил. Ради стека, я повторю учебник здесь на случай, если он будет удален. Я также включу некоторые изменения, которые я внес в учебник, которые делают это более гибким решением.
Давайте начнем с любого из выпусков ckeditor (базовый, стандартный, полный, пользовательский), единственное требование - у вас есть аддон image и [filebrowser](http ://ckeditor.com/addon/filebrowser)
(На момент написания этого все пакеты включают эти 2 дополнения, за исключением основного, но его можно добавить к основному)
После загрузки необходимых файлов ckeditor убедитесь, что ваша установка работает.
Убедитесь, что вы связали свой скрипт файла ckeditor.js < 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's 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's 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>
Этот URL будет указывать на ваше собственное действие по загрузке файлов на стороне сервера. Документация не содержит подробностей, но, к счастью, Дон Джонс восполнил некоторые пробелы здесь:
См. также:
http://zerokspot.com/weblog/2009/09/09/custom-filebrowser-callbacks-ckeditor/
Чтобы загрузить изображение, просто перетащите его с рабочего стола или из любого места, где вы можете достичь этого, скопировав изображение и вставив его в текстовую область с помощью ctrl + v