与 LaravelMix 一起使用时缺少 TinyMCE 主题文件答案

【问题标题】：TinyMCE theme files missing when used with LaravelMix与 LaravelMix 一起使用时缺少 TinyMCE 主题文件
【发布时间】：2019-04-23 16:35:39
【问题描述】：

我尝试将 TinyMCE 与纯 HTML 和 jquery 一起使用，如下所示，效果很好。

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/tinymce/jquery.tinymce.min.js" charset="utf-8"></script>
<script type="text/javascript">
    tinymce.init({
        selector: '#comment'
    });
</script>

但是当我尝试对最新的 Laravel 组合做同样的事情时，从 node_modules 引用 TinyMCE，它给了我像 GET http://localhost:3000/js/themes/modern/theme.js net::ERR_ABORTED 404 (Not Found) 这样的错误

请告诉我什么是包含/需要 TinyMCE 库的好地方以及如何引用它。

我尝试在 app.js 中像下面这样引用它

require('tinymce/tinymce.min.js');

和

require('tinymce');

【问题讨论】：

标签： jquery html laravel webpack tinymce

【解决方案1】：

我遵循了我在此页面上找到的解决方案，但在这两种情况下，都缺少一些东西。

这对我有用。

添加到资源/js/app.js：

require('tinymce');
require('tinymce/themes/silver');

require('tinymce/icons/default');

require('tinymce/plugins/advlist');
require('tinymce/plugins/autolink');
require('tinymce/plugins/link');
require('tinymce/plugins/image');
require('tinymce/plugins/lists');
require('tinymce/plugins/charmap');
require('tinymce/plugins/charmap');
require('tinymce/plugins/print');
require('tinymce/plugins/preview');
require('tinymce/plugins/spellchecker');
require('tinymce/plugins/media');
require('tinymce/plugins/table');

require('./tinymce-configuration');

创建文件resources/js/tinymce-configuration.js：

var editor_config = {
    selector: '.textarea_tinymce',

    // Remove Html tags from paste text
    paste_as_text: true, //!important

    // Allow link target blank
    extended_valid_elements: 'a[href|target]',

    plugins : 'advlist autolink link image lists charmap print preview spellchecker media table',

    theme: 'silver',
    height: 400,

    toolbar: 'bold | bullist  link ', 
    blockquote | link image media  | hr',

    menubar: false,
    path_absolute : "/",
    relative_urls: false,
}

将此行添加到 webpack.mix.js：

mix.copy('node_modules/tinymce/skins', 'public/js/skins');

运行：

npm run dev

【讨论】：

【解决方案2】：

这是截至 2020 年最干净的解决方案。

通过 NPM 安装 tinymce：

npm i tinymce

将这些要求添加到resources/js/app.js：

require('tinymce');
require('tinymce/themes/silver');

将此行添加到webpack.mix.js:

mix.copy('node_modules/tinymce/skins', 'public/js/skins');

然后执行npm run dev，一切顺利。

【讨论】：

成功了，但您还需要在app.js 下添加您正在使用的任何插件。例如：require('tinymce/plugins/autolink');require('tinymce/plugins/advlist');

【解决方案3】：

经过一番麻烦后想通了：需要导入初始化时使用的各个插件。

在我的情况下工作。欢迎改进。

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/tinymce/jquery.tinymce.min.js" charset="utf-8"></script>

导入 TinyMCE 和所需的主题/插件

import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';
import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/table';
import 'tinymce/plugins/textcolor';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/help';
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/contextmenu';

HTML

<textarea name="description" class="form-control" id="description" rows="3"></textarea>

初始化

tinymce.init({
    selector: '#description',
    skin: false,
    plugins: [
        'advlist lists link charmap anchor textcolor',
        'table contextmenu paste help'
    ],
    toolbar: 'insert | undo redo |  formatselect | bold italic backcolor  | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
});

运行 Laravel 开发服务器

npm run development -- --watch

【讨论】：