Laravel 项目如何引用第三方富文本编辑器 - 已解决

编辑器优化

Laravel 项目默认情况下，我们撰写文字只是一个简单的文本框，接下来我们将装上 Simditor 编辑器来提高用户体验。
file

在这里插入图片描述

1.下载 Simditor

开始之前，先点击此处下载 Simditor ，下载完成后解压。

2.集成到项目中

接下来在 Laravel 项目中新建以下两个文件夹：

resources/editor/css
resources/editor/js

将下载的 simditor.css 放置于 resources/editor/css 文件夹，将 hotkeys.js, module.js, simditor.js, uploader.js 四个文件放置于 resources/editor/js 文件夹中，如下：

file

文件放置成功后，我们需要修改 Mix 的配置信息，我们要将编辑器的 CSS 和 JS 文件复制到 public 文件夹下，这样我们才能通过浏览器读取这些文件。我们可以使用 Mix 的 copyDirectory 方法来实现：

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .version()
   .copyDirectory('resources/editor/js', 'public/js')
   .copyDirectory('resources/editor/css', 'public/css');

因为修改了配置信息，我们需要重启 npm run watch-poll，在命令行窗口内，使用快捷键 Ctrl + C 即可退出，然后再次运行 npm run watch-poll 即可：

file

编译完成后，打开文件夹，应可以看到成功复制的文件：

file

3.加载和渲染

Simditor 的样式和脚本文件只需要在帖子创建页面中使用，出于性能考虑，我们将只在话题创建页码中加载这些文件。

首先我们需要在主要布局文件中种下锚点 styles 和 scripts，注意下面的两个 @yield 的使用：

resources/views/layouts/app.blade.php

.
.
.
  <!-- Styles -->
  <link href="{{ mix('css/app.css') }}" rel="stylesheet">

  @yield('styles')

</head>

<body>
.
.
.

  <!-- Scripts -->
  <script src="{{ mix('js/app.js') }}"></script>

  @yield('scripts')

</body>
</html>

接下来是页面调用：

resources/views/topics/create_and_edit.blade.php

.
.
.

@section('styles')
  <link rel="stylesheet" type="text/css" href="{{ asset('css/simditor.css') }}">
@stop

@section('scripts')
  <script type="text/javascript" src="{{ asset('js/module.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/hotkeys.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/uploader.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/simditor.js') }}"></script>

  <script>
    $(document).ready(function() {
      var editor = new Simditor({
        textarea: $('#editor'),
      });
    });
  </script>
@stop

刷新页面即可看到我们的编辑器：

file