感谢@AlejandroIván（Load file into CKEditor textarea using Javascript）让CKEditor显示上传的文件。工作得很好......
但是，引起年轻用户的问题。他们并不总是上传正确的文件。
我们在课堂上尝试做的是通过PHP＆amp; amp;将预制布局加载到CKEditor中。选择菜单。由于JSFiddle不处理PHP，所以不能给出工作实例。
具有工作上传功能的JSFiddle是here。
以下是我们一直在测试的选择菜单和PHP的示例：
<!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. 0123456789. 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. 0123456789. 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. 0123456789. 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. 0123456789. 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. 0123456789. 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. 0123456789. 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. 0123456789. 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. 0123456789. 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. 0123456789. 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>
我们已经尝试了许多不同的onChange事件而没有任何成功，并且知道这不正确，但出于想法：
<select name="file" id="files" onChange="window.location='pickckeditor.php?template='+this.value">
不需要文件输入（上传）功能并一起选择选项，因此如果需要，文件输入可以消失。
回顾： 用户从下拉菜单中选择后，需要从加载到CKEditor中的回声中获取模板片段。
发现this info并且看起来正确，但仍然没有骰子。
这可能还是我们一直在转动轮子？
答案 0 :(得分：0)
A student came up with a "down and dirty" solution for us. It may not be best for live production but ours is used in closed local server environment.
PHP File:
<?php
header("X-XSS-Protection: 0");
require_once 'config.php';
?><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pick a Layout</title>
<link rel="stylesheet" href="sample.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>
<script>
// The instanceReady event is fired, when an instance of CKEditor has finished
// its initialization.
CKEDITOR.on( 'instanceReady', function( ev ) {
// Show this sample buttons.
document.getElementById( 'eButtons' ).style.display = 'block';
});
function InsertHTML() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'htmlArea2' ).value;
// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
// Insert HTML code.
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml
editor.insertHtml( value );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
</script>
</head>
<body>
<div class="description">
<p>
Down and dirty way to insert content into CKEditor via dropdown select menu.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<p id="eMessage">
</p>
<div id="eButtons" style="display: none">
<select name="select" id="htmlArea2" onchange="InsertHTML();">
<option>Choose Layout</option>
<option value="<?php echo $features;?>">Features</option>
<option value="<?php echo $threecolx1;?>">Three Col X1</option>
<option value="<?php echo $threecolx2;?>">Three Col X2</option>
</select>
</div>
<br />
<textarea style="width:100%;" id="editor1" name="editor1" rows="10">Down and dirty</textarea>
<script>
// Replace the <textarea id="editor1"> with an CKEditor instance.
CKEDITOR.replace( 'editor1', {
contentsCss: [ 'https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', 'https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700&subset=latin,devanagari,latin-ext'],
});
CKEDITOR.config.allowedContent = true;
CKEDITOR.dtd.$removeEmpty['span'] = false;
CKEDITOR.dtd.$removeEmpty['i'] = false;
CKEDITOR.dtd.$removeEmpty['fa'] = false;
</script>
<div id="footer">
<hr>
</div>
</body>
</html>
Config File:
<?php
$features = "<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-->";
$threecolx1 = "<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. 0123456789. 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. 0123456789. 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. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4--></div>
<!--end 3-col row-->";
$threecolx2 = "<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. 0123456789. 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. 0123456789. 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. 0123456789. 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. 0123456789. 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. 0123456789. 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. 0123456789. The lazy dog jumped over the quick brown foxs back.</p>
</div>
<!--end col-md-4--></div>";
?>
Again, we are in closed server environment and I caution anyone using "CKEDITOR.config.allowedContent = true;" to fully understand before using on live production server.
Hope this will be of use to others...