0
@ AlejandroIván (Load file into CKEditor textarea using Javascript) 덕분에 업로드 된 파일을 표시 할 수있는 CKEditor가 있습니다. 훌륭한 ...자바 스크립트, PHP 및 드롭 다운 메뉴를 통해 CKEditor 텍스트 영역에 파일로드
하지만 젊은 사용자에게 문제가 발생합니다. 항상 올바른 파일을 업로드하지는 않습니다.
우리가 교실에서하려고하는 것은 PHP & 선택 메뉴를 통해 CKEditor에 미리 레이아웃을로드하는 것입니다. JSFiddle은 PHP를 처리하지 않으므로 실제 예제를 제공 할 수 없습니다.
작업 업로드 기능이있는 JSFiddle은 here입니다. 여기
는 선택 메뉴와 PHP 우리가 테스트 한 시료이다 : 우리는 어떤 성공없이 여러 가지의 onChange 이벤트를 시도하고이 정확하지 알고있다<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pick a Layout</title>
<link rel="canonical" href="" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700&subset=latin,devanagari,latin-ext' rel='stylesheet' type='text/css'>
<link rel='stylesheet' id='fontawesome-css' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.5.11/standard/ckeditor.js"></script>
</head>
<body>
<div class="topdiv">
Pick Your Layout
</div>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<br />
<input name="file" type="file" id="files" class="form-control" value="">
<br />
<div>
<table>
<tr>
<td>
<strong>Pick Your Flavor</strong>
</td>
</tr>
<tr>
<td class="indtd">
<p>
<select name="file" id="files" onChange="window.location='pickckeditor.php?template='+this.value">
<option>Choose Layout</option>
<option value="features">Features</option>
<option value="3colx2">Three Col X2</option>
<option value="3colx1">Three Col X1</option>
</select>
</p>
<?php
$Template = $_REQUEST["template"];
if ($Template == "features"){
echo "<section id='features'>
<div class='title'>
<h2 class='flex fadeInUp animated'>The best features</h2>
<p class='description flex fadeInUp animated'>With features engineered from best practices used by leading property management companies worldwide.</p>
</div>
<!--end title-->
<div class='para flex fadeInRight animated animated'>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an...</p>
</div>
<br />
<!--end para-->
<div class='row text-center'>
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.5s'><i class='fa fa-cogs'></i>
<h3>Designed with Pride</h3>
<p>Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra eu libero sit amet quam egestas sempe</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.3s'><i class='fa fa-object-group'></i>
<h3>Support & coffee</h3>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat erat volutpat.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.1s'><i class='fa fa-keyboard-o'></i>
<h3>Clean Code</h3>
<p>Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
</div><!--end col-md-4-->
</div><!--end row-->
<div class='row text-center'>
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.1s'><i class='fa fa-cogs'></i>
<h3>Designed with Pride</h3>
<p>Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra eu libero sit amet quam egestas sempe</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.3s'><i class='fa fa-object-group'></i>
<h3>Support & coffee</h3>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat erat volutpat.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.5s'><i class='fa fa-keyboard-o'></i>
<h3>Clean Code</h3>
<p>Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
</div><!--end col-md-4-->
</div><!--end row-->
<div class='para flex fadeInLeft animated animated'>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an...</p>
</div>
</section><!--end section-->";
}
elseif ($Template == "3colx2"){
echo "<div class='row text-center'>
<div class='col-md-4 facenter caption flex fadeInUp animated animated' data-wow-delay='0.1s'><i class='fa fa-cogs feature' style='color: rgb(153, 0, 0);'></i>
<h3>Quality Designed</h3>
<p>The quick brown fox jumped over the lazy dogs back.. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.3s'><i class='fa fa-object-group' style='color: rgb(0, 0, 51);'></i>
<h3>Easy to Use</h3>
<p>The quick brown fox jumped over the lazy dogs back.. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.5s'><i class='fa fa-keyboard-o' style='color: rgb(153, 0, 0);'></i>
<h3>Clean Code</h3>
<p>The quick brown fox jumped over the lazy dogs back.. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4--></div>
<!--end 3-col row-->
<div class='row text-center'>
<div class='col-md-4 facenter caption flex fadeInUp animated animated' data-wow-delay='0.1s'><i class='fa fa-cogs' style='color: rgb(153, 0, 0);'></i>
<h3>Designed Clean</h3>
<p>The quick brown fox jumped over the lazy dogs back.. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.3s'><i class='fa fa-object-group' style='color: rgb(0, 0, 51);'></i>
<h3>Easy to Use</h3>
<p>The quick brown fox jumped over the lazy dogs back.. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.5s'><i class='fa fa-keyboard-o' style='color: rgb(153, 0, 0);'></i>
<h3>Clean Code</h3>
<p>The quick brown fox jumped over the lazy dogs back.. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4--></div>";
}
elseif ($Template == "3colx1"){
echo "<div class='row text-center'>
<div class='col-md-4 facenter caption flex fadeInUp animated animated' data-wow-delay='0.1s'><i class='fa fa-cogs feature' style='color: rgb(153, 0, 0);'></i>
<h3>Quality Designed</h3>
<p>The quick brown fox jumped over the lazy dogs back.. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.3s'><i class='fa fa-object-group' style='color: rgb(0, 0, 51);'></i>
<h3>Easy to Use</h3>
<p>The quick brown fox jumped over the lazy dogs back.. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4-->
<div class='col-md-4 caption flex fadeInUp animated animated' data-wow-delay='0.5s'><i class='fa fa-keyboard-o' style='color: rgb(153, 0, 0);'></i>
<h3>Clean Code</h3>
<p>The quick brown fox jumped over the lazy dogs back.. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4--></div>
<!--end 3-col row-->";
}
else{
echo ("Select a layout from dropdown");
}
?>
</td>
</tr>
</table>
</div>
<script>
CKEDITOR.replace('editor1');
$(document).ready(function() {
function readTextFile(file, callback, encoding) {
var reader = new FileReader();
reader.addEventListener('load', function (e) {
callback(this.result);
});
if (encoding) reader.readAsText(file, encoding);
else reader.readAsText(file);
}
function fileChosen(input, output) {
if (input.files && input.files[0]) {
readTextFile(
input.files[0],
function (str) {
output.setData(str);
output.updateElement();
}
);
}
}
$('#files').on('change', function() {
var result = $("#files").text();
fileChosen(this, CKEDITOR.instances.editor1);
});
});
</script>
</body>
</html>
하지만 아이디어 아웃 :
<select name="file" id="files" onChange="window.location='pickckeditor.php?template='+this.value">
파일 입력 (업로드) 기능과 선택 옵션을 함께 사용할 필요가 없으므로 필요한 경우 파일 입력이 사라질 수 있습니다.
요점을 되풀이하다 :사용자가 드롭 다운 메뉴에서 선택 후 CKEditor에로드 된 에코에서 템플릿 조각이 필요합니다.
this info을 찾았으며 올바른 방향으로 향하고 있지만 여전히 주사위가 없습니다.
이것이 가능한가요, 아니면 바퀴를 돌리고 있습니까?