Vue html text editor

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Simple Vue Wysiwyg Editor with tag support

paulocastellano/vue-html-editor

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Vue Wysiwyg Editor is simple Html Editor with support for tags.

npm install vue-wysiwyg-editor

yarn add vue-wysiwyg-editor

import VueWysiwygEditor from 'vue-wysiwyg-editor'; components:  HtmlEditor > vue-wysiwyg-editor :tags="" :text="name_of_your_vmodel" :text.sync="name_of_your_vmodel" >/vue-wysiwyg-editor>

If you need callback for save text in editor use debounce.

vue-wysiwyg-editor :tags="" :text="name_of_your_vmodel" :text.sync="name_of_your_vmodel" v-on:debounce-input="debounceInputTextArea" >/vue-wysiwyg-editor> methods:  /* * Quando para de digitar um textarea */ debounceInputTextArea: _.debounce(function (e)  // call your function where >, 500), >

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

A text editor using Vue.js and Quill

License

davidroyer/vue2-editor

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

An easy-to-use but yet powerful and customizable rich text editor powered by Quill.js and Vue.js

// Basic Use - Covers most scenarios import  VueEditor > from "vue2-editor"; // Advanced Use - Hook into Quill's API for Custom Functionality import  VueEditor, Quill > from "vue2-editor";

Add vue2-editor/nuxt to modules section of nuxt.config.js

To avoid seeing warnings from Vue about a mismatch in content, you’ll need to wrap the VueEditor component with the client-only component Nuxt provides as shown here:

client-only> VueEditor /> client-only>

Name	Type	Default	Description
customModules	Array	—	Declare Quill modules to register
disabled	Boolean	false	Set to true to disable editor
editorOptions	Object	—	Offers object for merging into default config (add formats, custom Quill modules, ect)
editorToolbar	Array	** Too long for table. See toolbar example below	Use a custom toolbar
id	String	quill-container	Set the id (necessary if multiple editors in the same view)
placeholder	String	—	Placeholder text for the editor
useCustomImageHandler	Boolean	false	Handle image uploading instead of using default conversion to Base64
v-model	String	—	Set v-model to the the content or data property you wish to bind it to

Name	Parameters	Description
blur	quill	Emitted on blur event
focus	quill	Emitted on focus event
image-added	file, Editor, cursorLocation	Emitted when useCustomImageHandler is true and photo is being added to the editor
image-removed	file, Editor, cursorLocation	Emitted when useCustomImageHandler is true and photo has been deleted
selection-change	range, oldRange, source	Emitted on Quill’s selection-change event
text-change	delta, oldDelta, source	Emitted on Quill’s text-change event

template> div id="app"> vue-editor v-model="content">vue-editor> div> template> script> import < VueEditor > from "vue2-editor"; export default  components:  VueEditor >, data()  return  content: "
Some initial content
" >; > >; script>

Example — Custom Image Handler

If you choose to use the custom image handler, an event is emitted when a a photo is selected. You can see below that 3 parameters are passed.

1. It passes the file to be handled however you need
2. The Editor instance
3. The cursor position at the time of upload so the image can be inserted at the correct position on success

NOTE In addition to this example, I have created a example repo demonstrating this new feature with an actual server.

template> div id="app"> vue-editor id="editor" useCustomImageHandler @image-added="handleImageAdded" v-model="htmlForEditor" > vue-editor> div> template> script> import < VueEditor > from "vue2-editor"; import axios from "axios"; export default  components:  VueEditor >, data()  return  htmlForEditor: "" >; >, methods:  handleImageAdded: function(file, Editor, cursorLocation, resetUploader)  // An example of using FormData // NOTE: Your key could be different such as: // formData.append('file', file) var formData = new FormData(); formData.append("image", file); axios(  url: "https://fakeapi.yoursite.com/images", method: "POST", data: formData >) .then(result =>  const url = result.data.url; // Get url from response Editor.insertEmbed(cursorLocation, "image", url); resetUploader(); >) .catch(err =>  console.log(err); >); > > >; script>

Example — Set Contents After Page Load

template> div id="app"> button @click="setEditorContent">Set Editor Contentsbutton> vue-editor v-model="htmlForEditor">vue-editor> div> template> script> import < VueEditor > from "vue2-editor"; export default  components:  VueEditor >, data()  return  htmlForEditor: null >; >, methods:  setEditorContent: function()  this.htmlForEditor = "
Html For Editor
"; > > >; script>

Example — Using Multiple Editors

template> div id="app"> vue-editor id="editor1" v-model="editor1Content">vue-editor> vue-editor id="editor2" v-model="editor2Content">vue-editor> div> template> script> import < VueEditor > from "vue2-editor"; export default  components:  VueEditor >, data()  return  editor1Content: "
Editor 1 Starting Content
", editor2Content: "
Editor 2 Starting Content
" >; > >; script> style> #editor1, #editor2  height: 350px; > style>

template> div id="app"> vue-editor v-model="content" :editorToolbar="customToolbar">vue-editor> div> template> script> import < VueEditor > from "vue2-editor"; export default  components:  VueEditor >, data()  return  content: "
Html For Editor
", customToolbar: [ ["bold", "italic", "underline"], [< list: "ordered" >, < list: "bullet" >], ["image", "code-block"] ] >; > >; script>

Example — Saving The Content

template> div id="app"> button @click="saveContent">button> vue-editor v-model="content">vue-editor> div> template> script> import < VueEditor > from "vue2-editor"; export default  components:  VueEditor >, data()  return  content: "
Initial Content
" >; >, methods:  handleSavingContent: function()  // You have the content to save console.log(this.content); > > >; script>

Example — Use a Live Preview

template> div id="app"> vue-editor v-model="content">vue-editor> div v-html="content">div> div> template> script> import < VueEditor > from 'vue2-editor' components:  VueEditor >, export default  data()  return  content: '
Initial Content
' > > > script>

How To Use Custom Quill Modules

There are two ways of using custom modules with Vue2Editor. This is partly because there have been cases in which errors are thrown when importing and attempting to declare custom modules, and partly because I believe it actually separates the concerns nicely.

Version 1 — Import and Register Yourself

Vue2Editor now exports Quill to assist in this process.

1. When importing VueEditor, also import Quill.
2. Import your custom modules
3. Register the custom modules with Quill
4. Add the necessary configuration to the editorOptions object

template> div id="app"> vue-editor :editorOptions="editorSettings" v-model="content"> div> template> script> import < VueEditor, Quill > from 'vue2-editor' import < ImageDrop > from 'quill-image-drop-module' import ImageResize from 'quill-image-resize-module' Quill.register('modules/imageDrop', ImageDrop) Quill.register('modules/imageResize', ImageResize) export default  components:  VueEditor >, data()  return  content: '
Initial Content
', editorSettings:  modules:  imageDrop: true, imageResize: <> > > > > > script>

Version 2 — You Import | Vue2Editor Registers

(Recommended way)

1. Import your custom modules
2. Use the customModules prop to declare an array of module(s).
3. Add the necessary configuration for those modules in the editorOptions object under modules as seen below

template> div id="app"> vue-editor :customModules="customModulesForEditor" :editorOptions="editorSettings" v-model="content" > vue-editor> div> template> script> import < VueEditor > from "vue2-editor"; import < ImageDrop > from "quill-image-drop-module"; import ImageResize from "quill-image-resize-module"; export default  components:  VueEditor >, data()  return  content: "
Initial Content
", customModulesForEditor: [ < alias: "imageDrop", module: ImageDrop >, < alias: "imageResize", module: ImageResize > ], editorSettings:  modules:  imageDrop: true, imageResize: <> > > >; > >; script>

Vue2Editor now uses Poi for development

• yarn dev : Run example in development mode
• yarn docs : Development for Docs
• yarn build : Build component in both format
• yarn lint : Run eslint

Источник

Vue Rich Text Editor

Vue Rich Text Editor is the official CKEditor5 Vue component. The component exposes properties for quick integration of the WYSIWYG editor into Vue-based applications.

Versatile

An adaptable ecosystem capable of handling end-to-end document editing, interoperability with third-party tools, document management, and collaboration.

Extensible

Modular architecture where everything is a plugin. You can tune up, add, or remove plugins as you wish. Use custom processors to handle HTML, Markdown, or JSON output.

Progressive

Takes advantage of a superb team of 50+ industry experts and 20+ years of experience in WYSIWYG editing. We are releasing new features every month.

See Engine in action

Try our custom inspector below to see how CKEditor 5 works under the hood. Verify the output, see a document model, and run commands from the inspector without leaving the browser.

Simple setup

Here is a quick example of how to use the Vue Rich Text Editor component for CKEditor5 by using create-vue!

Create a project

Create a project using a basic create-vue template and change the working directory to a newly created project.

npm init vue@latest ckeditor5-vue-example && cd ckeditor5-vue-example

Install packages

Install dependencies to Rich Text Editor Vue Component and a chosen Editor Type according to editing experience of your preference. In this case, we use the classic one.

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

Add component

Replace contents of src/App.vue with code responsible for importing and the initialization of the editor.

Done!

Источник