Skip to content

Instantly share code, notes, and snippets.

@mostafa6765
Last active February 21, 2024 03:14
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mostafa6765/90a2697712b0d70318c7c36fa97c7a9b to your computer and use it in GitHub Desktop.
Save mostafa6765/90a2697712b0d70318c7c36fa97c7a9b to your computer and use it in GitHub Desktop.
setup editorjs in vue. demo: https://eosbi.codesandbox.io/
<template>
<div >
<div >
<h1 style="text-align:center">This is vue editor.js <a href="https://twitter.com/@code4mk" target="_blank">@code4mk</a></h1>
</div>
<div class="editorx_body">
<!--editorjs id-->
<div class id="codex-editor"/>
</div>
<button style="margin-left: 30%;" type="button" name="button" @click="save()">save</button>
<div class="editorx_body">
<pre>{{value}}</pre>
</div>
</div>
</template>
<script>
import EditorJS from "@editorjs/editorjs";
import Header from "@editorjs/header";
import Paragraph from "@editorjs/paragraph";
import List from "@editorjs/list";
export default {
data() {
return {
value: null
};
},
methods: {
save: function() {
editor.save().then(savedData => {
console.log(savedData);
this.value = savedData;
});
},
myEditor: function() {
window.editor = new EditorJS({
holder: "codex-editor",
autofocus: true,
/**
* This Tool will be used as default
*/
initialBlock: "paragraph",
tools: {
header: {
class: Header,
shortcut: "CMD+SHIFT+H"
},
list: {
class: List
},
paragraph: {
class: Paragraph,
config: {
placeholder: "."
}
}
},
onReady: function() {
console.log("ready");
},
onChange: function() {
console.log("change");
}
});
}
},
mounted: function() {
this.myEditor();
}
};
</script>
<style lang="css" scoped >
.editorx_body {
/* width: 62%;
margin-left: 15%; */
width: 60%;
margin-left: 20%;
border: 2px solid #f1f3f5;
box-sizing: border-box;
}
.ce-block--focused {
background: linear-gradient(
90deg,
rgba(2, 0, 36, 1) 0%,
rgba(9, 9, 121, 0.5438550420168067) 35%,
rgba(0, 212, 255, 1) 100%
);
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment