Question

我尝试将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');

Answer 1

这是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做，您就很好了。

Answer 2

在遇到一些麻烦之后解决了这个问题：需要导入用于初始化的单个插件。

以我的情况工作。欢迎改进。

<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

Answer 3

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

这对我有用。

添加到resources / 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

与LaravelMix一起使用时TinyMCE主题文件丢失

3 个答案: