简单的文件上传CKEditor

Question

我想在我的页面上上传一个简单的 CKEditor 文件，但我不太确定该怎么做。我下载了 CKEditor 插件并将其添加到我的页面。现在我有一个上传屏幕，其中包含您需要填写的各种内容。我只需要它就可以浏览您的文档中的照片并使用它们。

我页面上的 CKEditor 代码：

<div class="box box-info">
  <div class="box-header">
    <h3 class="box-title">CK Editor <small>Advanced and full of features</small></h3>
    <!-- tools box -->
    <div class="pull-right box-tools">
       <button class="btn btn-info btn-sm" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
       <button class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
    </div><!-- /. tools -->
  </div><!-- /.box-header -->
  <div class="box-body pad">
    <form>
      <textarea id="editor1" name="editor1" rows="1" cols="80">
                        This is my textarea to be replaced with CKEditor.
      </textarea>
    </form>
  </div>
</div><!-- /.box --> 

<!-- CK Editor -->
<script type="text/javascript" src="/assets/plugins/ckeditor/ckeditor.js"></script>
<script>CKEDITOR.dtd.$removeEmpty['span'] = false; CKEDITOR.dtd.$removeEmpty['i'] = false;</script>
<script>CKEDITOR.env.isCompatible = true;</script>

<script type="text/javascript">
  CKEDITOR.replace( 'editor1',
  {
     customConfig: '/assets/plugins/ckeditor/config.js',
     filebrowserBrowseUrl : '/assets/plugins/ckeditor/plugins/browser/browse.php',
     enterMode : CKEDITOR.ENTER_BR
  });
</script>

我的配置文件长什么样：

CKEDITOR.editorConfig = function( config ) {
 config.filebrowserUploadUrl = '/uploader/upload.php';
    config.toolbar = [
        { name: 'insert', items: ['Smiley'] },
        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline' ] },
        { name: 'links', items: [ 'Image' ]  }          
    ];

    config.autoParagraph = false;
    config.allowedContent = true;
    config.fullPage = false;    
    config.extraAllowedContent = 'p(*)[*]{*};span(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';

    config.extraPlugins = 'youtube,ckawesome';
    config.fontawesomePath = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';

    config.contentsCss = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css','https://app.gratiswebshopbeginnen.nl/assets/bootstrap/css/bootstrap.min.css'];

    // Se the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Make dialogs simpler.
    //config.removeDialogTabs = 'image:advanced;link:advanced';
};

Answer 1

使用CKEditor上传用户图片

<textarea id="editor1" name="editor1" rows="1" cols="80">
            This is my textarea to be replaced with CKEditor.
</textarea>

<script src="../ckeditor.js"></script>

<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>

所以，从上面的代码我们了解到，

我们正在使用 ckeditor.js 文件
并启动 ckeditor

这些设置将显示 ckeditor。此外，对于图片上传，我们还需要一项设置

打开config.js文件(/ckeditor/config.js) 并放置以下代码

config.filebrowserUploadUrl = '/uploader/upload.php';

所以，config.js 应该是这样的

CKEDITOR.editorConfig = function( config ) {
     config.filebrowserUploadUrl = '/uploader/upload.php';
};

因此，在 upload.php 时，上传的文件将能够被捕获，在这里您可以使用自己的 php 代码将上传的文件存储到您的服务器中

因此，当这些设置生效时，上传屏幕将如下所示

简单的文件上传CKEditor

Simple file upload CKEditor

html

php

forms

ckeditor