Summernote in Vue CDN
### Step 1: Add Summernote CDN Links
Include the necessary CSS and JavaScript files for Summernote in your `index.html` (located in `public` folder for Vue.js):
<!-- CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.css" rel="stylesheet">
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.js"></script>### Step 2: Create a Vue Component for Summernote
Create a reusable component for Summernote, such as `SummernoteEditor.vue`:
<template>
<div>
<textarea ref="editor"></textarea>
</div>
</template>
<script>
export default {
name: "SummernoteEditor",
props: {
value: {
type: String,
default: "",
},
},
mounted() {
// Initialize Summernote
$(this.$refs.editor).summernote({
height: 200, // Set the height
toolbar: [
// Customize toolbar options
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']],
],
callbacks: {
onChange: (contents) => {
this.$emit("input", contents); // Emit updated content
},
},
});
// Set initial value
$(this.$refs.editor).summernote("code", this.value);
},
beforeDestroy() {
// Destroy Summernote instance
$(this.$refs.editor).summernote("destroy");
},
};
</script>
<style scoped>
/* Add custom styles if needed */
</style>### Step 3: Use the Component
Use the Summernote editor component in your Vue application:
<template>
<div>
<h1>Summernote in Vue</h1>
<SummernoteEditor v-model="content" />
<p>Content: {{ content }}</p>
</div>
</template>
<script>
import SummernoteEditor from "./components/SummernoteEditor.vue";
export default {
components: { SummernoteEditor },
data() {
return {
content: "<p>Initial content here</p>",
};
},
};
</script>### Notes:
– The component uses `v-model` for two-way binding.
– Summernote requires jQuery, which is included via the CDN in the `index.html`.
– Remember to customize the toolbar or options according to your needs.
This setup integrates Summernote with Vue using a CDN, providing a functional WYSIWYG editor in your application.
—
### Step 1: Include Summernote CDN in the `app.blade.php`
Laravel Breeze uses Inertia, and the main HTML structure is typically in `resources/views/app.blade.php`. Add the Summernote CSS and JS files to the “ section:
<!-- resources/views/app.blade.php -->
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- Existing meta tags -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.css" rel="stylesheet">
</head>
<body>
@inertia
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.js"></script>
</body>
</html>—
### Step 2: Create a Summernote Vue Component
Create a reusable component for Summernote in `resources/js/Components`:
#### `SummernoteEditor.vue`
<template>
<div>
<textarea ref="editor"></textarea>
</div>
</template>
<script>
export default {
name: "SummernoteEditor",
props: {
value: {
type: String,
default: "",
},
},
mounted() {
// Initialize Summernote
$(this.$refs.editor).summernote({
height: 200, // Set the editor height
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']],
],
callbacks: {
onChange: (contents) => {
this.$emit("input", contents); // Emit content to the parent
},
},
});
// Set initial value
$(this.$refs.editor).summernote("code", this.value);
},
beforeDestroy() {
// Destroy Summernote instance
$(this.$refs.editor).summernote("destroy");
},
};
</script>
<style scoped>
/* Add custom styles if needed */
</style>—
### Step 3: Use the Component in a Page
Use the `SummernoteEditor` component in your Vue page components under `resources/js/Pages`.
#### Example in `EditPage.vue`
<template>
<div>
<h1>Edit Page</h1>
<form @submit.prevent="submit">
<SummernoteEditor v-model="content" />
<button type="submit" class="btn btn-primary mt-3">Save</button>
</form>
<p>Preview:</p>
<div v-html="content"></div>
</div>
</template>
<script>
import SummernoteEditor from "@/Components/SummernoteEditor";
export default {
components: { SummernoteEditor },
data() {
return {
content: "<p>Initial content</p>", // Bind this to your backend content
};
},
methods: {
submit() {
console.log(this.content);
// Make an API request to save the content (e.g., using Axios)
},
},
};
</script>—
### Step 4: Handle Backend Integration
In your Laravel controller, handle the incoming data. For example:
#### Controller
public function update(Request $request)
{
$validated = $request->validate([
'content' => 'required|string',
]);
// Save content to the database
$page = Page::find(1); // Example: Fetch the page to update
$page->content = $validated['content'];
$page->save();
return response()->json(['success' => true]);
}—
### Step 5: Add API Route for Submitting Content
Define a route in `routes/web.php`:
Route::post('/pages/update', [PageController::class, 'update'])->name('pages.update');—
### Result
You now have a Summernote editor integrated with your Laravel Vue Breeze application. Changes in the editor are reflected in the `content` data, which can be submitted to the backend via an API request.