Rodney Vg

Rodney Vg

1613080680

A Visual Flow Editor Based on Vue and antv/g6

Introduction

vue-visual-flowIt is based on antv/g6the configuration of the visualization routine implemented Vuecomponents

Project uses rolluppackaged, are provided cjs esmin two modular form to introduce ways, size is only about 100K

Design ideas

In order to remove the business logic as much as possible, the component shares the G6 instance, as well as the current operating node and edge instance, for users to complete their own business logic externally

About G6 api: G6

Part of the problem and progress tracking

  • Currently antv/g6there will be an updated version of the problem after the disappearance of custom graphics, it does not support the new antv/g6tracking Issue: G6-Issue

issue has been fixed, use antv/g6@3.7.3and above

  • Currently does not support simultaneous node configuration settings tipsand anchor configuration labelNamecauses a problem can not be switched prompt information g6-issue

issue has been fixed, use antv/g6@3.8.1and above

demo

Personal use demo

use

installation

$ npm install @antv/g6 --save
$ npm install vue-visual-flow --save

Configuration

main.js

import VisualFlow from 'vue-visual-flow';
Vue.use(VisualFlow);

index.vue

<template>
  <div id="app">
    <visual-flow
      :tree-list="treeList"
      :tool-list="toolList"
      :contextmenu-list="contextmenuList"

      :graph.sync="graph"
      :current-node.sync="currentNode"
      :current-edge.sync="currentEdge"

      @contextmenuEvent="contextmenuEvent"
    />
  </div>
</template>

< script > 
export  default  { 
  name : 'App' , 
  data ( )  { 
    return  { 
      // Tree node list on the left, compatible with 2-n depth 
      treeList : [ 
        // First level category 
        { 
          label : 'First level category 1' , 
          showFlag : false , 
          children : [ 
            // Secondary category 
            { 
              label : 'Secondary category 1-1' , 
              showFlag : false , 
              children : [ 
                // Three-level category (node) 
                { 
                  // Basic attribute 
                  label: 'Node 1' ,  // Node display name 
                  tips : 'Add some node description information here~' ,  // (Optional) Node floating tip 
                  inPoints : [  // Enter anchor point array 
                    { 
                      dataType : 'type1' ,  / / Custom anchor point type, only in and out anchor points of the same type can be connected 
                      labelName : 'Incoming anchor point type is type1' ,  // (optional) Anchor point prompt information 
                    } , 
                    { 
                      dataType : 'type2' , 
                      labelName : 'Incoming anchor point type is type2' , 
                    } , 
                  ] , 
                  outPoints : [  // Out anchor point array 
                    { 
                      dataType : 'type1', 
                      labelName : 'Anchor point type is type1' , 
                    } , 
                  ] ,

                  // Custom attribute 
                  itemId : 'xxx' ,  // Node id 
                } , 
              ] , 
            } , 
          ] , 
        } , 
      ] , 
      // Optional canvas control 
      toolList : [ 'zoomIn' ,  'zoomOut' ,  'adjustCanvas' ,  ' realRatio' ,  'autoFormat' ,  'fullScreen' ] ,  
      // right-click menu configuration 
      contextmenuList : { 
        // node right-click menu 
        node : [ 
          { 
            label : 'delete node' , 
            eventName :'removeNode' ,  // custom event contextmenuEvent will capture this field 
          } , 
        ] , 
        // side right-click menu 
        edge : [ 
          { 
            label : 'remove edge' , 
            eventName : 'removeEdge' , 
          } , 
        ] , 
        // right-click menu 
        canvas : [ 
          { 
            label : 'Don't know what to do' , 
            eventName : 'unknow' , 
          } , 
        ] , 
      } ,

      // Share g6 instance 
      graph with components : { } ,  // g6 instance 
      currentNode : { } ,  // Node instance 
      currentEdge : { } ,  // Edge instance when left and right keys 
    } ; 
  } , 
  methods : { 
    contextmenuEvent ( eventName )  { 
      // eventName matches the field with the same name in contextmenuList 
      if  ( eventName  ===  'removeNode' )  { 
        this . graph . removeItem ( this . currentNode);
      }

      if (eventName === 'removeEdge') {
        this.graph.removeItem(this.currentEdge);
      }

      if  ( eventName  ===  'unknow' )  { 
        alert ( 'Really didn't do anything' ) ; 
      } 
    } , 
  } , 
} ; 
</ script >

Download Details:

Author: qunzi0214

Demo: https://github.com/qunzi0214/vue-visual-flow-demo

Source Code: https://github.com/qunzi0214/vue-visual-flow

#vue #vuejs #javascript

What is GEEK

Buddha Community

A Visual Flow Editor Based on Vue and antv/g6
Archie Mistry

Archie Mistry

1578423497

Collection of 15 Vue Editor Component for Your Vue App

Vue editor component can become an unparalleled ally when it comes to code completion and visual assistance for debugging and building a Vue app.

1. Vue2Editor

HTML Editor using Vue.js and Quilljs.

Vue2Editor

Demo

Download


2. Vuep (vue playground)

A component for rendering Vue components with live editor and preview.

Vuep (vue playground

Demo

Download


3. Vue-Trumbowyg

Vue.js v2.x component for Trumbowyg WYSIWYG editor

Features

  • Reactive v-model value
  • You can change editor value programmatically
  • Play nice with vee-validate validation library

Vue-Trumbowyg

Demo

Download


4. vue2-medium-editor

A medium-editor component for Vue2. For Vue1 checkout branch 1.0.

vue2-medium-editor

Demo

Download


5. typeflow-editor

build with the vue and mxGraph.

typeflow-editor

Demo

Download


6. tiptap-vuetify

WYSIWYG editor for Vuetify. Component simplifies integration tiptap with vuetify.

Features

  • used vuetify components
  • support for different types of icons (fa, md, mdi)
  • internationalization (en, fr, pl, es, ru, uk, ptbr), with automatic detection of the current language through the Vuetify
  • easy to start using
  • props and events are available
  • TypeScript support
  • the project is ready to actively develop if there is support (stars)!
  • the ability to create and use your own extensions
  • choose where the extension buttons should be displayed: in the toolbar or in the bubble menu
  • Vuetify 2.x and 1.x support

tiptap-vuetify

Demo

Download


7. Kirby Editor β

Kirby Editor is a new type of WYSIWYG editor for Kirby. It’s a mixture between a regular WYSIWYG and a block editor to bring together the best parts of both worlds in a user-friendly interface.

Kirby Editor β

Download


8. Vue Trix Rich Text Editor

A Vue wrapper around the Trix rich-text editor, with support for images and auto-save.

Vue Trix Rich Text Editor

Download


9. vue-mathlive

The MathLive Vue wrapper provides a Vue component that implements a <mathfield> HTML tag.

The component can be used to edit formulas using the MathLive library. The editor provides a rich, accessible, editing UI, including virtual keyboards for mobile, and can provide the output as LaTeX, MathML or spoken text.

vue-mathlive

Download


10. yimo-vue-editor

Vue-editor component modified and encapsulated based on wangeditor2.5.11 source code.

yimo-vue-editor

Demo

Download


11. vue-katex

KaTeX enables fast math typesetting for the web. This plugin introduces a simple directive to use KaTeX in your Vue app. Enjoy!

vue-katex

Demo

Download


12. toast-ui.vue-editor

This is Vue component wrapping TOAST UI Editor.

toast-ui.vue-editor

Demo

Download


13. ckeditor5-vue

CKEditor 5 rich text editor component for Vue.js.

ckeditor5-vue

Demo

Download


14. tiptap

A renderless and extendable rich-text editor for Vue.js

tiptap

Demo

Download


15. json-editor

Edit JSON in UI form with JSON Schema and Vue.js json-editor component.

json-editor

Demo

Download


Thank for read!

#vue-editor #editor-component #vue-js #editor-vue

Luna  Mosciski

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Rodney Vg

Rodney Vg

1613080680

A Visual Flow Editor Based on Vue and antv/g6

Introduction

vue-visual-flowIt is based on antv/g6the configuration of the visualization routine implemented Vuecomponents

Project uses rolluppackaged, are provided cjs esmin two modular form to introduce ways, size is only about 100K

Design ideas

In order to remove the business logic as much as possible, the component shares the G6 instance, as well as the current operating node and edge instance, for users to complete their own business logic externally

About G6 api: G6

Part of the problem and progress tracking

  • Currently antv/g6there will be an updated version of the problem after the disappearance of custom graphics, it does not support the new antv/g6tracking Issue: G6-Issue

issue has been fixed, use antv/g6@3.7.3and above

  • Currently does not support simultaneous node configuration settings tipsand anchor configuration labelNamecauses a problem can not be switched prompt information g6-issue

issue has been fixed, use antv/g6@3.8.1and above

demo

Personal use demo

use

installation

$ npm install @antv/g6 --save
$ npm install vue-visual-flow --save

Configuration

main.js

import VisualFlow from 'vue-visual-flow';
Vue.use(VisualFlow);

index.vue

<template>
  <div id="app">
    <visual-flow
      :tree-list="treeList"
      :tool-list="toolList"
      :contextmenu-list="contextmenuList"

      :graph.sync="graph"
      :current-node.sync="currentNode"
      :current-edge.sync="currentEdge"

      @contextmenuEvent="contextmenuEvent"
    />
  </div>
</template>

< script > 
export  default  { 
  name : 'App' , 
  data ( )  { 
    return  { 
      // Tree node list on the left, compatible with 2-n depth 
      treeList : [ 
        // First level category 
        { 
          label : 'First level category 1' , 
          showFlag : false , 
          children : [ 
            // Secondary category 
            { 
              label : 'Secondary category 1-1' , 
              showFlag : false , 
              children : [ 
                // Three-level category (node) 
                { 
                  // Basic attribute 
                  label: 'Node 1' ,  // Node display name 
                  tips : 'Add some node description information here~' ,  // (Optional) Node floating tip 
                  inPoints : [  // Enter anchor point array 
                    { 
                      dataType : 'type1' ,  / / Custom anchor point type, only in and out anchor points of the same type can be connected 
                      labelName : 'Incoming anchor point type is type1' ,  // (optional) Anchor point prompt information 
                    } , 
                    { 
                      dataType : 'type2' , 
                      labelName : 'Incoming anchor point type is type2' , 
                    } , 
                  ] , 
                  outPoints : [  // Out anchor point array 
                    { 
                      dataType : 'type1', 
                      labelName : 'Anchor point type is type1' , 
                    } , 
                  ] ,

                  // Custom attribute 
                  itemId : 'xxx' ,  // Node id 
                } , 
              ] , 
            } , 
          ] , 
        } , 
      ] , 
      // Optional canvas control 
      toolList : [ 'zoomIn' ,  'zoomOut' ,  'adjustCanvas' ,  ' realRatio' ,  'autoFormat' ,  'fullScreen' ] ,  
      // right-click menu configuration 
      contextmenuList : { 
        // node right-click menu 
        node : [ 
          { 
            label : 'delete node' , 
            eventName :'removeNode' ,  // custom event contextmenuEvent will capture this field 
          } , 
        ] , 
        // side right-click menu 
        edge : [ 
          { 
            label : 'remove edge' , 
            eventName : 'removeEdge' , 
          } , 
        ] , 
        // right-click menu 
        canvas : [ 
          { 
            label : 'Don't know what to do' , 
            eventName : 'unknow' , 
          } , 
        ] , 
      } ,

      // Share g6 instance 
      graph with components : { } ,  // g6 instance 
      currentNode : { } ,  // Node instance 
      currentEdge : { } ,  // Edge instance when left and right keys 
    } ; 
  } , 
  methods : { 
    contextmenuEvent ( eventName )  { 
      // eventName matches the field with the same name in contextmenuList 
      if  ( eventName  ===  'removeNode' )  { 
        this . graph . removeItem ( this . currentNode);
      }

      if (eventName === 'removeEdge') {
        this.graph.removeItem(this.currentEdge);
      }

      if  ( eventName  ===  'unknow' )  { 
        alert ( 'Really didn't do anything' ) ; 
      } 
    } , 
  } , 
} ; 
</ script >

Download Details:

Author: qunzi0214

Demo: https://github.com/qunzi0214/vue-visual-flow-demo

Source Code: https://github.com/qunzi0214/vue-visual-flow

#vue #vuejs #javascript

Liya Gebre

Liya Gebre

1607930400

A Visual Flow Editor Based on Vue And Antv/g6

Introduction

vue-visual-flowIt is based on antv/g6the configuration of the visualization routine implemented Vuecomponents

Project uses rolluppackaged, are provided cjs esmin two modular form to introduce ways, size is only about 100K

Design ideas

In order to remove the business logic as much as possible, the component shares the G6 instance, as well as the currently operating node and edge instance, for users to complete their own business logic externally

About G6 api: G6

Part of the problem and progress tracking

  • Currently antv/g6there will be an updated version of the problem after the disappearance of custom graphics, it does not support the new antv/g6tracking Issue: G6-Issue

issue has been fixed, use antv/g6@3.7.3and above

  • Currently does not support simultaneous node configuration settings tipsand anchor configuration labelNamecauses a problem can not be switched prompt information g6-issue

issue has been fixed, use antv/g6@3.8.1and above

demo

Personal use demo

use

installation

$ npm install @antv/g6 --save
$ npm install vue-visual-flow --save

Configuration

main.js

import VisualFlow from 'vue-visual-flow';
Vue.use(VisualFlow);

index.vue

<template>
  <div id="app">
    <visual-flow
      :tree-list="treeList"
      :tool-list="toolList"
      :contextmenu-list="contextmenuList"

      :graph.sync="graph"
      :current-node.sync="currentNode"
      :current-edge.sync="currentEdge"

      @contextmenuEvent="contextmenuEvent"
    />
  </div>
</template>

< script > 
export  default  { 
  name : 'App' , 
  data ( )  { 
    return  { 
      // Tree node list on the left, compatible with 2-n depth 
      treeList : [ 
        // First level category 
        { 
          label : 'First level category 1' , 
          showFlag : false , 
          children : [ 
            // Secondary category 
            { 
              label : 'Secondary category 1-1' , 
              showFlag : false , 
              children : [ 
                // Three-level category (node) 
                { 
                  // Basic attribute 
                  label: 'Node 1' ,  // Node display name 
                  tips : 'Add some node description information here~' ,  // (Optional) Node floating tip 
                  inPoints : [  // Enter anchor point array 
                    { 
                      dataType : 'type1' ,  / / Custom anchor point type, only in and out anchor points of the same type can be connected 
                      labelName : 'Incoming anchor point type is type1' ,  // (optional) Anchor point prompt information 
                    } , 
                    { 
                      dataType : 'type2' , 
                      labelName : 'Incoming anchor point type is type2' , 
                    } , 
                  ] , 
                  outPoints : [  // Out anchor point array 
                    { 
                      dataType : 'type1', 
                      labelName : 'Anchor point type is type1' , 
                    } , 
                  ] ,

                  // Custom attribute 
                  itemId : 'xxx' ,  // Node id 
                } , 
              ] , 
            } , 
          ] , 
        } , 
      ] , 
      // Optional canvas control 
      toolList : [ 'zoomIn' ,  'zoomOut' ,  'adjustCanvas' ,  ' realRatio' ,  'autoFormat' ,  'fullScreen' ] ,  
      // right-click menu configuration 
      contextmenuList : { 
        // node right-click menu 
        node : [ 
          { 
            label : 'delete node' , 
            eventName :'removeNode' ,  // custom event contextmenuEvent will capture this field 
          } , 
        ] , 
        // side right-click menu 
        edge : [ 
          { 
            label : 'remove edge' , 
            eventName : 'removeEdge' , 
          } , 
        ] , 
        // right-click menu 
        canvas : [ 
          { 
            label : 'Don't know what to do' , 
            eventName : 'unknow' , 
          } , 
        ] , 
      } ,

      // Share g6 instance 
      graph with components : { } ,  // g6 instance 
      currentNode : { } ,  // Node instance 
      currentEdge : { } ,  // Edge instance when left and right keys 
    } ; 
  } , 
  methods : { 
    contextmenuEvent ( eventName )  { 
      // eventName matches the field with the same name in contextmenuList 
      if  ( eventName  ===  'removeNode' )  { 
        this . graph . removeItem ( this . currentNode);
      }

      if (eventName === 'removeEdge') {
        this.graph.removeItem(this.currentEdge);
      }

      if  ( eventName  ===  'unknow' )  { 
        alert ( 'Really didn't do anything' ) ; 
      } 
    } , 
  } , 
} ; 
</ script >

Download Details:

Author: qunzi0214

Source Code: https://github.com/qunzi0214/vue-visual-flow

#vue #vuejs #javascript

Alex Lambert

Alex Lambert

1580592120

vue-quill-editor Rich Text Editor Experience

There are many rich text editors on the market. I personally still recommend Vue’s own vue-quill-deitor. Although it only supports IE10 +, I will provide you with the experience of using this text editor.

So let’s go straight to the point and use quill in vue. We need npm to install it. The installation command is as follows:

npm install vue-quill-editor

Reinstall dependencies

npm install quill

use:

Introduced in main.js

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill / dist / quill.core.css'
import 'quill / dist / quill.snow.css'
import 'quill / dist / quill.bubble.css'
  
Vue.use (VueQuillEditor)

The following css must be referenced, otherwise the editor will not have css.

The code in the vue page is as follows:

<template>
  <div class = "edit_container">
        <quill-editor 
            v-model = "content" 
            ref = "myQuillEditor" 
            : options = "editorOption" 
            @ blur = "onEditorBlur ($ event)" @ focus = "onEditorFocus ($ event)"
            @ change = "onEditorChange ($ event)">
        </ quill-editor>
        <button v-on: click = "saveHtml"> Save </ button>
    </ div>  
</ template>

<script>
export default {
  name: 'App',
  data () {
     return {
            content: `<p> hello world </ p>`,
            editorOption: {}
        }
  }, computed: {
        editor () {
            return this. $ refs.myQuillEditor.quill;
        },
    }, methods: {
        onEditorReady (editor) {// Prepare the editor
        },
        onEditorBlur () {}, // lost focus event
        onEditorFocus () {}, // get focus event
        onEditorChange () {}, // content change event
        saveHtml: function (event) {
          alert (this.content);
        }
    }
}
</ script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: # 2c3e50;
  margin-top: 60px;
}
</ style>

The v-model is our own html code, you can put this html directly into the database, so there is no problem. If you want to disable the editor, you can pass the following code:

onEditorFocus (val, editor) {// event when rich text gets focus
      console.log (val); // content when rich text gets focus
      editor.enable (false); // Disable when getting focus
    }

Theme settings

In the vue project, Quill’s files are specifically introduced, whichever theme is used is written. The default is snow theme.

data () {
     return {
            content: `<p> hello world </ p>`,
            editorOption: {
              theme: 'snow'
            }
        }
  }

Toolbar settings

modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'],   
               // Bold, italic, underline, strikethrough
              ['blockquote', 'code-block'],     
              // Reference, code block
  
  
              [{'header': 1}, {'header': 2}],       
               // Title, the form of key-value pairs; 1, 2 represents the font size
              [{'list': 'ordered'}, {'list': 'bullet'}],    
               // list
              [{'script': 'sub'}, {'script': 'super'}],   
              // superscript and subscript
              [{'indent': '-1'}, {'indent': '+1'}],    
               // indent
              [{'direction': 'rtl'}],             
              // text direction
  
  
              [{'size': ['small', false, 'large', 'huge']}],
               // font size
              [{'header': [1, 2, 3, 4, 5, 6, false]}],    
               // Several levels of title
  
  
              [{'color': []}, {'background': []}],     
              // font color, font background color
              [{'font': []}],     
              // font
              [{'align': []}],   
               // alignment
  
  
              ['clean'],   
               // Clear font style
              ['image', 'video']   
               // Upload pictures, upload videos
  
            ]
          },
          theme: 'snow'
        }
     }

Picture push upload

You need to install the quill-image-drop-module module, then change the imageDrop setting to true, and you can take pictures on your computer online.

import {quillEditor} from 'vue-quill-editor'
import * as Quill from 'quill'
import {ImageDrop} from 'quill-image-drop-module';
Quill.register ('modules / imageDrop', ImageDrop);
export default {
  name: 'App',
  data () { 
     return {
        editorOption: {
          modules: {
            imageDrop: true, 
          },
          theme: 'snow'
        }
      }
  }

Then you do n’t need to think about uploading the file. You may want to put the picture first. In fact, the file is already a base64. When you read it at the front desk, you can directly decode it ~

ImageResize

return {
        editorOption: {
          modules: {
        imageResize: ()
          },
          theme: 'snow'
        }
      }

#vue-js #vue-editor #vue