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?
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'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.