使用 symfony webpack-encore 添加 suneditor css 文件

Question

I'm trying to ad suneditor to a symfony project using webpak-encore , I have created a js file

htmlEditor.js

with this code

import SUNEDITOR from 'suneditor'
import 'suneditor/dist/css/suneditor.min.css'
import plugins from 'suneditor/src/plugins'

const editor = SUNEDITOR.create((document.getElementById('appbundle_popup_description') || 'appbundle_popup_description'),{
    // All of the plugins are loaded in the "window.SUNEDITOR" object in dist/suneditor.min.js file
    // Insert options
    // Language global object (default: en)
    //lang: SUNEDITOR_LANG['en'],
    height: 400,
    plugins: plugins,
    buttonList: [
        ['undo', 'redo'],
        ['font', 'fontSize', 'formatBlock'],
        ['paragraphStyle', 'blockquote'],
        ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
        ['fontColor', 'hiliteColor', 'textStyle'],
        ['removeFormat'],
        '/', // Line break
        ['outdent', 'indent'],
        ['align', 'horizontalRule', 'list', 'lineHeight'],
        ['table', 'link', 'image', 'video', 'audio' /** ,'math' */], // You must add the 'katex' library at options to use the 'math' plugin.
        /** ['imageGallery'] */ // You must add the "imageGalleryUrl".
        ['fullScreen', 'showBlocks', 'codeView'],
        ['preview', 'print'],
        ['save', 'template']
    ]
});

then I've included an entry in webpack.config.js

.addEntry('htmlEditor', './assets/js/htmlEditor.js')

and I've included the files at the view file

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('htmlEditor') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('htmlEditor') }}
{% endblock %}

and then the js file ins included but not the css file, how can I include the css file?

Answer 1

I have the same problem. I have a solution for waiting a better solution. Invcude the CDN in your html after the block javascript in your html head <link href="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/css/suneditor.min.css" rel="stylesheet">

Better solution copy the files suneditor/src/assets/css/suneditor-contents.css for the editing part and suneditor/src/assets/css/suneditor.css for your view After import in your app.js import '../assets/suneditor-contents.css' and for your back import '../assets/suneditor.css'