使用Symfony、Webpack和Encore加载TinyMCE插件

TinyMCE的NPM翻新有几个问题。我知道这一点

我有一个使用简单的

标记的工作版本，但我很固执，我已经下定决心让他们的NPM包工作

设置

装置

纱线加锡

└─ tinymce@4.8.4

webpack.config.js

var Encore=需要（'@symfony/webpack Encore'）；
var CopyWebpackPlugin=require（'copy-webpack-plugin'）；
//...
再来一个
.setOutputPath（文件夹+'/public/build/）
.setPublicPath（“/build”）
//通常的东西。。。
//这就是tinymce在我的代码中的位置
.addEntry（'inputManager'，'。/assets/js/inputManager.js'）
//此插件将所有tinymce资源复制到build文件夹
.addPlugin（新的CopyWebpackPlugin([
{
from:'assets/js/tinymce/themes/'，
致：“tinymce/themes/”
},
{
from:'assets/js/tinymce/plugins/'，
致：“tinymce/plugins/”
},
{
from:'assets/js/tinymce/langs/'，
致：“tinymce/langs/”
}
]))

inputManager.js

跳过这个：不要太担心这门课。唯一需要注意的是tinymce是在第1行导入的。有效：）

import./tinymce/tinymce.min'
设fullTinyMCEInit=null；
类AppControls{
构造函数（）{
$（文档）.ready（函数（）{
appControls.initTinyMCE（）；//初始化所有tinymce元素
});
//我来判断你该往哪里看！
tinymce.baseURL=location.origin+'/build/tinymce'；
//jquery插件不起作用。这起作用。
$.fn.tinymce=函数（）{
appControls.initTinyMCE（$（this））；
}
}
/**
*以单例方式获取tinymce配置
*/
获取tinyMCEConfig（）{
如果（！fullTinyMCEInit）{
完全耳鸣={
theme_url:“/build/tinymce/themes/modern/theme.min.js”，
语言：_语言环境，
插件：[
“自动调整大小”，
“advlist autolink列出链接图像charmap打印预览锚文本颜色”，
“searchreplace visualblocks代码全屏显示”，
“insertdatetime媒体表上下文菜单粘贴代码帮助”
],
//其他配置参数（不相关）
}
}
返回全耳鸣；
}
/**
*使用类“.tinymce”初始化每个文本区域的tinymce
*@param targetContainer包含要初始化的元素（或自身）
*/    
initTinyMCE（targetContainer=null）{
const config=appControls.tinyMCEConfig；
让目标=[]；
//重置目标和选择器
config.target=null；
config.selector=null；
如果（targetContainer）{//Container是可选的
targetContainer=$（targetContainer）；
targets=targetContainer.hasClass（'tinymce'）？targetContainer:targetContainer.find（'textarea.tinymce'）；
}否则{//没有容器，请查看内容包装器
targets=$（“#内容包装器”）.find（'textarea.tinymce'）；
}
//迭代目标并初始化tinymce
美元。每个（目标、功能（索引、目标）{
config.target=target；
tinymce.init（配置）；
});
}
}

问题1

Tinymce加载，但对它需要的每个插件、主题和语言文件抛出404错误

解决方案1

我创建了一个简单的控制器，没有不必要的导入，只是为了尽快返回请求的文件

class AssetController扩展控制器
{
/**
*管理门户的主页
*匹配/build/tinymce
*@路线(
*“/build/tinymce/{{u type}/{{u name}/{u file}”，
*name=“获取\u tinymce\u资产”，
*要求={
*“|type”：“plugins | langs | skins”，
*“\u名称”：“\w+”，
*“_文件”：“+”
*     }
* )
*@return\Symfony\Component\HttpFoundation\Response
*/
公共函数GettinyMsets(
$\u类型，
$\u名称，
$\u文件
) {
//NPM包包含缩小的js文件，但仍然查找未统一的版本
$minifiedFile=
strpos（$_文件，'.min.）==false
？str_replace（'.css'、'.min.css'，str_replace（'.js'、'.min.js'、$\文件））
：$\u文件；
返回$this->file(
“build/tinymce/”。
$\u类型。“/”。
$\u名称。“/”。
$minifiedFile）；
}
}

这是可行的，tinymce编辑器加载

问题2

它需要8秒！！！对于要检索的每个文件！ 您可以理解为什么这是不可接受的，特别是因为加载不是异步发生的

---

如果您有任何见解，我们将不胜感激。如果你还在读这篇文章，当然：D

你需要通过模块加载过程导入你想要加载的每个插件。我们在此有相关文件：

---

是的，我读过并试过了。实际上，我的代码中已经注释掉了插件导入。我不记得到底出了什么问题。让我看看好的。。。伟大的六羟甲基三聚氰胺六甲醚。。。不要介意！我取消了对导入的注释并对路线进行了注释，它只是。。。作品我相信它在抱怨没有找到一些缩小的文件和语言文件。我会继续使用它一段时间，如果其中一个问题再次出现，我会通知您。谢谢