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 =＆＃39; /uploader/upload.php' ;;

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

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

所以，在upload.php上传的文件是可以捕获的，在这里你可以拥有自己的php代码来将上传的文件存储到服务器中

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

简单文件上传CKEditor

1 个答案: