通過javascript，PHP將文件加載到CKEditor textarea中並選擇下拉菜單

Question

感謝@AlejandroIván（使用Java腳本將文件加載到CKEditor textarea中），使CKEditor可以顯示上傳的文件。 工作很棒...

但是，會引起年輕用戶的問題。 他們並不總是上傳正確的文件。

我們在課堂上試圖通過PHP和select菜單將預制的布局加載到CKEditor中。 由於JSFiddle不處理PHP，因此無法給出有效的示例。

具有工作上傳功能的JSFiddle 在這里。

這是帶有選擇菜單和我們已經測試過的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">

不需要文件輸入（上載）功能和select選項，因此文件輸入可以根據需要消失。

總結： 用戶從下拉菜單中選擇后，需要將回顯中的模板片段加載到CKEditor中。

找到了這個信息，似乎朝着正確的方向前進，但仍然沒有骰子。

這可能嗎？還是我們一直在轉動車輪？

Answer 1

一個學生為我們想出了一個“骯臟的”解決方案。 它可能不是最適合實時生產的產品，但我們的產品用於封閉的本地服務器環境。

PHP文件 ：

<?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>

配置文件：

<?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>";
?>

同樣，我們在封閉的服務器環境中，我警告任何使用“ CKEDITOR.config.allowedContent = true;”的人。 在正式生產服務器上使用之前要充分了解。

希望這對其他人有用...

通過javascript，PHP將文件加載到CKEditor textarea中並選擇下拉菜單

問題描述

1 個解決方案

解決方案1
0 已采納 2016-12-09 12:56:56

通過javascript，PHP將文件加載到CKEditor textarea中並選擇下拉菜單

問題描述

1 個解決方案

解決方案1 0 已采納 2016-12-09 12:56:56

解決方案1
0 已采納 2016-12-09 12:56:56