How to properly set up Ckeditor5 for project VueJS? - vuejs3
I have several problems right now. I installed the assembly through the online constructor, collected all the modules together if possible. Connected to my project on Vue3. The editor has appeared, but splitting the text into paragraphs by clicking on the corresponding button does not work. The button works, but the text is not marked up into paragraphs (1,2,3, and so on).
The next issue is with images. I can't insert an image, I get this error in the console ('filerepository-no-upload-adapter'). I'll attach the assembly code:
Component Code Vue:
import Editor from '../../../../../../../ckeditor5/build/ckeditor';
export default {
data() {
return {
selectedProducts: null,
createDialog: false,
editDialog: false,
deleteDialog: false,
editor: Editor,
editorConfig: {},
}
},
Assembly code along the way 'ckeditor5/build/ckeditor.js'
/**
* #license Copyright (c) 2014-2022, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
import Alignment from '#ckeditor/ckeditor5-alignment/src/alignment.js';
import Autoformat from '#ckeditor/ckeditor5-autoformat/src/autoformat.js';
import AutoImage from '#ckeditor/ckeditor5-image/src/autoimage.js';
import AutoLink from '#ckeditor/ckeditor5-link/src/autolink.js';
import Autosave from '#ckeditor/ckeditor5-autosave/src/autosave.js';
import BlockQuote from '#ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold.js';
import CKFinderUploadAdapter from '#ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
import CloudServices from '#ckeditor/ckeditor5-cloud-services/src/cloudservices.js';
import Code from '#ckeditor/ckeditor5-basic-styles/src/code.js';
import CodeBlock from '#ckeditor/ckeditor5-code-block/src/codeblock.js';
import DataFilter from '#ckeditor/ckeditor5-html-support/src/datafilter.js';
import DataSchema from '#ckeditor/ckeditor5-html-support/src/dataschema.js';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials.js';
import FindAndReplace from '#ckeditor/ckeditor5-find-and-replace/src/findandreplace.js';
import FontBackgroundColor from '#ckeditor/ckeditor5-font/src/fontbackgroundcolor.js';
import FontColor from '#ckeditor/ckeditor5-font/src/fontcolor.js';
import FontFamily from '#ckeditor/ckeditor5-font/src/fontfamily.js';
import FontSize from '#ckeditor/ckeditor5-font/src/fontsize.js';
import GeneralHtmlSupport from '#ckeditor/ckeditor5-html-support/src/generalhtmlsupport.js';
import Heading from '#ckeditor/ckeditor5-heading/src/heading.js';
import Highlight from '#ckeditor/ckeditor5-highlight/src/highlight.js';
import HorizontalLine from '#ckeditor/ckeditor5-horizontal-line/src/horizontalline.js';
import HtmlComment from '#ckeditor/ckeditor5-html-support/src/htmlcomment.js';
import HtmlEmbed from '#ckeditor/ckeditor5-html-embed/src/htmlembed.js';
import Image from '#ckeditor/ckeditor5-image/src/image.js';
import ImageCaption from '#ckeditor/ckeditor5-image/src/imagecaption.js';
import ImageInsert from '#ckeditor/ckeditor5-image/src/imageinsert.js';
import ImageResize from '#ckeditor/ckeditor5-image/src/imageresize.js';
import ImageStyle from '#ckeditor/ckeditor5-image/src/imagestyle.js';
import ImageToolbar from '#ckeditor/ckeditor5-image/src/imagetoolbar.js';
import ImageUpload from '#ckeditor/ckeditor5-image/src/imageupload.js';
import Indent from '#ckeditor/ckeditor5-indent/src/indent.js';
import IndentBlock from '#ckeditor/ckeditor5-indent/src/indentblock.js';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '#ckeditor/ckeditor5-link/src/link.js';
import LinkImage from '#ckeditor/ckeditor5-link/src/linkimage.js';
import List from '#ckeditor/ckeditor5-list/src/list.js';
import ListProperties from '#ckeditor/ckeditor5-list/src/listproperties.js';
import Markdown from '#ckeditor/ckeditor5-markdown-gfm/src/markdown.js';
import MediaEmbed from '#ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import MediaEmbedToolbar from '#ckeditor/ckeditor5-media-embed/src/mediaembedtoolbar.js';
import Mention from '#ckeditor/ckeditor5-mention/src/mention.js';
import PageBreak from '#ckeditor/ckeditor5-page-break/src/pagebreak.js';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph.js';
import PasteFromOffice from '#ckeditor/ckeditor5-paste-from-office/src/pastefromoffice.js';
import RemoveFormat from '#ckeditor/ckeditor5-remove-format/src/removeformat.js';
import SourceEditing from '#ckeditor/ckeditor5-source-editing/src/sourceediting.js';
import SpecialCharacters from '#ckeditor/ckeditor5-special-
characters/src/specialcharacters.js';
import SpecialCharactersCurrency from '#ckeditor/ckeditor5-special-
characters/src/specialcharacterscurrency.js';
import SpecialCharactersEssentials from '#ckeditor/ckeditor5-special-
characters/src/specialcharactersessentials.js';
import SpecialCharactersLatin from '#ckeditor/ckeditor5-special-
characters/src/specialcharacterslatin.js';
import SpecialCharactersMathematical from '#ckeditor/ckeditor5-special-
characters/src/specialcharactersmathematical.js';
import SpecialCharactersText from '#ckeditor/ckeditor5-special-
characters/src/specialcharacterstext.js';
import StandardEditingMode from '#ckeditor/ckeditor5-restricted-
editing/src/standardeditingmode.js';
import Strikethrough from '#ckeditor/ckeditor5-basic-styles/src/strikethrough.js';
import Style from '#ckeditor/ckeditor5-style/src/style.js';
import Subscript from '#ckeditor/ckeditor5-basic-styles/src/subscript.js';
import Superscript from '#ckeditor/ckeditor5-basic-styles/src/superscript.js';
import Table from '#ckeditor/ckeditor5-table/src/table.js';
import TableCaption from '#ckeditor/ckeditor5-table/src/tablecaption.js';
import TableCellProperties from '#ckeditor/ckeditor5-table/src/tablecellproperties';
import TableColumnResize from '#ckeditor/ckeditor5-table/src/tablecolumnresize.js';
import TableProperties from '#ckeditor/ckeditor5-table/src/tableproperties';
import TableToolbar from '#ckeditor/ckeditor5-table/src/tabletoolbar.js';
import TextPartLanguage from '#ckeditor/ckeditor5-language/src/textpartlanguage.js';
import TextTransformation from '#ckeditor/ckeditor5-typing/src/texttransformation.js';
import Title from '#ckeditor/ckeditor5-heading/src/title.js';
import TodoList from '#ckeditor/ckeditor5-list/src/todolist';
import Underline from '#ckeditor/ckeditor5-basic-styles/src/underline.js';
import WordCount from '#ckeditor/ckeditor5-word-count/src/wordcount.js';
class Editor extends ClassicEditor {}
// Plugins to include in the build.
Editor.builtinPlugins = [
Alignment,
Autoformat,
AutoImage,
AutoLink,
Autosave,
BlockQuote,
Bold,
CKFinderUploadAdapter,
CloudServices,
Code,
CodeBlock,
DataFilter,
DataSchema,
Essentials,
FindAndReplace,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
GeneralHtmlSupport,
Heading,
Highlight,
HorizontalLine,
HtmlComment,
HtmlEmbed,
Image,
ImageCaption,
ImageInsert,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
IndentBlock,
Italic,
Link,
LinkImage,
List,
ListProperties,
Markdown,
MediaEmbed,
MediaEmbedToolbar,
Mention,
PageBreak,
Paragraph,
PasteFromOffice,
RemoveFormat,
SourceEditing,
SpecialCharacters,
SpecialCharactersCurrency,
SpecialCharactersEssentials,
SpecialCharactersLatin,
SpecialCharactersMathematical,
SpecialCharactersText,
StandardEditingMode,
Strikethrough,
Style,
Subscript,
Superscript,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
TextPartLanguage,
TextTransformation,
Title,
TodoList,
Underline,
WordCount
];
// Editor configuration.
Editor.defaultConfig = {
toolbar: {
items: [
'heading',
'|',
'style',
'|',
'textPartLanguage',
'|',
'bold',
'italic',
'link',
'|',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'imageUpload',
'imageInsert',
'mediaEmbed',
'|',
'codeBlock',
'htmlEmbed',
'|',
'insertTable',
'blockQuote',
'undo',
'redo',
'alignment',
'code',
'findAndReplace',
'fontBackgroundColor',
'fontColor',
'fontSize',
'fontFamily',
'highlight',
'horizontalLine',
'pageBreak',
'removeFormat',
'sourceEditing',
'specialCharacters',
'strikethrough',
'restrictedEditingException',
'subscript',
'todoList',
'underline'
]
},
language: 'ru',
image: {
toolbar: [
'imageTextAlternative',
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
'linkImage'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
}
};
export default Editor;
This is my first question on this platform. I very much hope that you will help me solve problems with this editor. I won't be able to submit the application without it. I can add anything you need extra
Related
Separate Css files in typescript react project do not apply
My problem is the following, I created a new react project with typescript. And added a custom component that has a separate css file for it's styling. The folder structure is like this:
In the Header.css I defined a class:
.mainHeading {
color: green;
}
And referenced it in the Header.tsx like this:
import React from "react";
import styles from './Header.css';
function Header() {
return(
<h1 className={styles.mainHeading}>Streamfiuse</h1>
);
}
export default Header;
To do this I added the following to the react-app-env.d.ts
declare module '*.css';
I'm using the Header component in the App.tsx like the following
import React from 'react';
import Discover from './components/discover/Discover';
import Header from "./components/header/Header";
import './App.css';
function App() {
return (
<div className="App">
<Header />
<Discover />
</div>
);
}
export default App;
The problem is now that I would expect the heading "Streamfiuse" to appear in green, but apparently it doesn't. I'm new to react so any help is appreciated.
Edit 1
I also tried this:
import React from "react";
import './Header.css';
function Header() {
return(
<h1 className="mainHeading">Streamfiuse</h1>
);
}
export default Header;
But does't work either.
Try importing like this: import './Header.css' And applying the mainHeading class as a string
Maybe you could try this
Change import styles from './Header.css'; into import './Header.css';
Change className={styles.mainHeading} into className="mainHeading"
import React from "react";
import './Header.css';
function Header() {
return(
<h1 className="mainHeading">Streamfiuse</h1>
);
}
export default Header;
Import .stories file into another .stories file with Storybook?
Can you import one .stories file into another .stories with Storybook?
Eg I have
/component1/component1.tsx
/component1/component1.stories.tsx
/component2/component2.tsx
/component2/component2.stories.tsx
I would like to also have a story for all of my components:
In /all-components/all-components.stories.tsx
import * as React from 'react';
import Component1Story from '../component1/component1.stories.tsx';
import Component2Story from '../component2/component2.stories.tsx';
export const Test = () => {
return (
<div>
<Component1Story />
<Component2Story />
</div>
);
};
export default {
title: 'Components',
};
I get this error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of storyFn.
this should be doable as your stories are just React components. Your problem is happening because you're trying to import the default from your module, which is actually just an object:
export default {
title: 'Components',
};
All stories are named exports, and you should import them with destructuring:
import { Component1Story } from '../component1/component1.stories';
import { Component2Story } from '../component2/component2.stories';
I created an example for you which shows a working scenario here.
p.s. It's interesting to know that starting with Storybook 6 there's a new mechanism to simplify the creation and reuse of stories so stay tuned! It's called Args.
Create-React-App production overwrites css
Running npm run build outputs a diffrent css compiled website than when running npm start what's the difference and why does it happen? The posts i found were about changing webpack.config but i know that create-react-app work a bit differently. May you shine some light?
My app.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import {store, persistor} from './Reducers/configStore'
import {PersistGate} from 'redux-persist/integration/react'
import './index.css';
import './App.css';
import "normalize.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import "#blueprintjs/core/lib/css/blueprint.css";
import "#blueprintjs/icons/lib/css/blueprint-icons.css";
import 'react-notifications-component/dist/theme.css';
require('dotenv').config();
const Piazeta = () => {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
)
}
ReactDOM.render(<Piazeta />, document.getElementById('root'));
The problem was that in the development build the bootstrap css was overwriting the css written by me and in the production build it was the other way around. I had a couple of things named the same which made the problems appear. Double check your css every time i guess, the order of them differs in prod and build
How to import query reducer, removekey and other modules from admin-on-rest to custom list?
I am creating a custom List component by referring to admin-on-rest List component. I imported all modules from admin-on-rest. But few modules are not getting imported and giving an error like queryreducer,removeKey ...
What is the correct way of importing modules from admin-on-rest?
i tried importing all modules at one place.
Also tried importing default and others separate
admin-on-rest version : "1.2.3"
I tried this way :
import {
queryReducer,
SET_SORT,
SET_PAGE,
SET_FILTER,
SORT_DESC,
ViewTitle,
Title,
DefaultPagination,
DefaultActions,
crudGetList as crudGetListAction,
changeListParams as changeListParamsAction,
removeKey,
defaultTheme
} from "admin-on-rest";
and also this way :
import { SET_SORT, SET_PAGE, SET_FILTER, SORT_DESC } from "admin-on-rest";
import { queryReducer } from "admin-on-rest";
import { ViewTitle } from "admin-on-rest";
import Title from "admin-on-rest";
import DefaultPagination from "admin-on-rest";
import DefaultActions from "admin-on-rest";
import { crudGetList as crudGetListAction } from "admin-on-rest";
import { changeListParams as changeListParamsAction } from "admin-on-rest";
import translate from "admin-on-rest";
import { removeKey } from "admin-on-rest";
import defaultTheme from "admin-on-rest";
The output error :
Uncaught TypeError: webpack_require.i(...) is not a function
I made it working by importing like this. Just specify the exact path.
import {
SET_SORT,
SET_PAGE,
SET_FILTER,
SORT_DESC
} from "admin-on-rest/lib/reducer/resource/list/queryReducer";
import queryReducer from "admin-on-rest/lib/reducer/resource/list/queryReducer";
import removeKey from "admin-on-rest/lib/util/removeKey";
react-mounter Material-ui meteor using themes
I am just starting with meteor/flow-router/react-mounter and am running into an issue setting the theme for a component in Material-ui.
In Material-UI v 0.15.0 they no longer set the default them to lightBaseTheme so it has to be set at creation.
Here is a sample component.
import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import Navigationclose from 'material-ui/svg-icons/navigation/close';
import IconMenu from 'material-ui/IconMenu';
import NavigationMoreVert from 'material-ui/svg-icons/navigation/more-vert';
import MenuItem from 'material-ui/MenuItem';
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
class Navbar extends React.Component {
childContextTypes: {
muiTheme: React.PropTypes.object.isRequired
}
getChildContext() {
return {muiTheme: getMuiTheme(baseTheme)};
}
render() {
return (<AppBar
title="Title"
iconElementLeft={<IconButton><Navigationclose /></IconButton>}
iconElementRight={
<IconMenu
iconButtonElement={
<IconButton><NavigationMoreVert /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Refresh"/>
<MenuItem primaryText="Help"/>
<MenuItem primaryText="Sign out"/>
</IconMenu>
}
/>);
}
}
export default Navbar;
Can anyone help me set the theme for a component using Material-UI, or have a working example
Thanks in advance.
Look at this simple working example