-
Notifications
You must be signed in to change notification settings - Fork 76
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Other SVG (eg: Font Awesome) #31
Comments
@kl3sk Quick question: where do you put the SVG icon? The icons from CKEditor 5 are put in specific folders in order to // vue.config.js as in first linked docs:
config.module
.rule( 'cke-svg' )
.test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
.use( 'raw-loader' )
.loader( 'raw-loader' ); The trick part here is that Vue uses other loader then CKEditor 5 for SVGs. This code tests for CKEditor 5 icons located under I'd try with something like this: config.module
.rule( 'cke-svg' )
.test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
.test( /my-plugin[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ ) // <- added
.use( 'raw-loader' )
.loader( 'raw-loader' ); |
@jodator thanks for your answer. I try to add like this config.module
.rule( 'cke-svg' )
.test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
.test(/fontawesome-[^/\\]+[/\\]svgs[/\\](solid|regular|brand)[/\\][^/\\]+\.svg$/)
.use( 'raw-loader' )
.loader( 'raw-loader' ) Edit:
|
It must be something with the paths, I've used vue icon from FA and used in one of manual tests (no Vue integration and loaded from default location): I don't recall exactly what part of path was checked but double check them for typos ;) Also adding another rule with one test might help (I don't recall how this API worked TBH): config.module
.rule( 'my-svg' )
// start with direct path (ie inside your project)
.test( /last\/part\/of\/path\/to\/icon.svg$/ )
.use( 'raw-loader' )
.loader( 'raw-loader' ) Edit: The error show that the loader didn't kick in so probably the path is wrong or the test should be written differently. |
Ok i'll try to check my path. But BTW I tried to create an other rule too. |
With this rule: config.module
.rule('my-svg')
.test(/fontawesome-free\/svgs\/solid\/search\.svg$/)
.use('raw-loader')
.loader('raw-loader') and this import: import imageIcon from '@fortawesome/fontawesome-free/svgs/solid/search.svg' I have still the error. May I've made a typo I didn't saw ? EDIT: TypeError: "svg is null" EDIT2:
|
Alrighty: you have two options (noted in the docs) a) clear the rules (if you don't have other SVGs) chainWebpack: config => {
const svgRule = config.module.rule( 'svg' );
svgRule.uses.clear();
svgRule.use( 'raw-loader' ).loader( 'raw-loader' );
} Option b) leave other svg intact chainWebpack: config => {
const svgRule = config.module.rule( 'svg' );
svgRule.exclude.add(__dirname + "/node_modules/@ckeditor");
svgRule.exclude.add(__dirname + "/node_modules/@fortawesome"); // ! this
config.module
.rule( 'cke-svg' )
// beautify this or use another rule
.test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg|svgs\/brands\/vuejs\.svg$/ )
.use( 'raw-loader' )
.loader( 'raw-loader' )
// add .rule( 'my-svg' ) below with one `test()` call per svg path.
} the app: <template>
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</template>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import vueIcon from '@fortawesome/fontawesome-free/svgs/brands/vuejs.svg'
// import vueIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg'
class MyPlugin extends Plugin {
init() {
this.editor.ui.componentFactory.add( 'vuebutton', locale => {
const buttonView = new ButtonView( locale );
buttonView.set( {
label: 'Vue icon',
tooltip: true,
withText: true,
icon: vueIcon
} );
this.listenTo( buttonView, 'execute', () => {
// eslint-disable-next-line
console.log('uga')
} );
return buttonView;
} );
}
}
export default {
name: 'app',
data() {
return {
editor: ClassicEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
plugins: [
EssentialsPlugin,
BoldPlugin,
ItalicPlugin,
LinkPlugin,
ParagraphPlugin,
MyPlugin
],
toolbar: {
items: [
'bold',
'italic',
'link',
'undo',
'redo',
'vuebutton'
]
}
}
};
}
};
</script> ps.: Don't forget to start & stop dev server since it needs to reload webpack config. and works with Vue like this: |
I read the docs, and I tried both solutions. The first work but my others SVG doesn't works any more, so I jump to the other solution and even with your sample it does the same. I ever try your solution without any working code. edit: BTW I reload my dev server each time :) |
Check the ps.: @kl3sk you can post your solution if you mange to make this working :) |
Yes i'll do if i find. An other clue, I use a custom build, maybe it is the problem ? |
Ok, after some search and tries I finally understand the problem. Long answer:As @jodator said, in a VueJs project, it used it own loader (for SVG in this case) and Ckeditor its own. After this, I follow the second solution. The solution was copying my font to an other location and add a rule to load it through Ckeditor's loader aka: Short answer:
svgRule.exclude.add(path.join(__dirname, 'my/custom/folder'))
config.module
.rule('cke-plugin-browser')
.test(/my[/\\]custom[/\\]folder[/\\][^/\\]+\.svg$/)
.use('raw-loader')
.loader('raw-loader') IdeaI don't know if it possible but, why not use Vue loader when Despite this last question, I close this issue because solved for me. |
AFAIR the vue uses |
It could maybe be added to the docs. |
Following this doc evrething works as expected.
Now I want to create a custom plugin fowling this doc
As long as I use
ckeditor
SVG to add to the toolbar it works, but when I want to use fa's one it doesn't.I tried to modify
vue.config.js
without success.The text was updated successfully, but these errors were encountered: