Inicio>Recursos para la creación de sitios web>Otros recursos
Descargar

️ AVISO: Este repositorio está en desusoam.

Toast UI Editor Vue Wrapper se ha administrado por separado del repositorio del Editor de UI Toast. Como resultado de la distribución de estos problemas, decidimos despreciar cada repositorio de envoltorio y administrar el repositorio como mono-RepO del repositorio del editor de interfaz de usuario de Toast.

De ahora en adelante, envíe problemas o contribuciones relacionadas con Toast UI React Wrapper al repositorio del editor de UI Toast. ¿Gracias?.

Toast UI Editor para Vue

Este es el editor de interfaz de usuario de tostadas de envoltura de componentes Vue.

Tabla de contenido

  • Recopilar estadísticas sobre el uso de código abierto
  • Instalar
    • Usando NPM
  • Uso del editor
    • Carga
    • Implementar
    • Usando V-Modelo
    • Accesorios
    • Evento
    • Método
  • Uso del espectador
    • Carga
    • Implementar
    • Accesorios
    • Evento
  • Pasos de solicitud de retiro
  • Documentos
  • Que contribuye
  • Licencia

Recopilar estadísticas sobre el uso de código abierto

Vue Wrapper of Toast UI Editor aplica Google Analytics (GA) para recopilar estadísticas sobre el uso de código abierto, para identificar cuán ampliamente se usa el editor de UI Toast en todo el mundo. También sirve como un índice importante para determinar el curso futuro de los proyectos. ubicación.hostname (por ejemplo, "ui.toast.com") se debe recopilar y el único propósito no es más que medir las estadísticas sobre el uso. Para deshabilitar GA, use las siguientes opciones de usageStatistics cuando declare VUE WRAPPER COMPOENT. 

 var options = {
    ...
    usageStatistics : false
}

O, incluya incluir tui-code-snippet.js ( v1.4.0 o posterior ) y luego escriba inmediatamente las opciones de la siguiente manera: 

 tui . usageStatistics = false ;

? Instalar

Usando NPM 

npm install --save @toast-ui/vue-editor

Uso del editor

Carga

Puede usar Toast UI Editor para Vue como formato Moudule o espacio de nombres. También puede usar componente de archivo único (SFC de Vue). Al usar el formato de módulo y SFC, debe cargar tui-editor.css , tui-editor-contents.css y codemirror.css en el script.

  • Uso del módulo ECMAScript 

     import 'tui-editor/dist/tui-editor.css' ;
import 'tui-editor/dist/tui-editor-contents.css' ;
import 'codemirror/lib/codemirror.css' ;
import { Editor } from '@toast-ui/vue-editor'

  • Usando el módulo CommonJS 

     require ( 'tui-editor/dist/tui-editor.css' ) ;
require ( 'tui-editor/dist/tui-editor-contents.css' ) ;
require ( 'codemirror/lib/codemirror.css' ) ;
var toastui = require ( '@toast-ui/vue-editor' ) ;
var Editor = toastui . Editor ;

  • Uso del componente de un solo archivo 

     import 'tui-editor/dist/tui-editor.css' ;
import 'tui-editor/dist/tui-editor-contents.css' ;
import 'codemirror/lib/codemirror.css' ;
import Editor from '@toast-ui/vue-editor/src/Editor.vue'

  • Usando el espacio de nombres 

     var Editor = toastui . Editor ;

Implementar

Primero implementa <editor/> en la plantilla. 

 < template >
    < editor />
</ template >

Y luego agregue Editor a los components de su componente o instancia de Vue como esta: 

 import { Editor } from '@toast-ui/vue-editor'

export default {
  components : {
    'editor' : Editor
  }
}

o 

 import { Editor } from '@toast-ui/vue-editor'
new Vue ( {
    el : '#app' ,
    components : {
        'editor' : Editor
    }
} ) ;

Usando V-Modelo

Si usa V-Model, debe declarar un data para el enlace. (❗️ Al usar el editor en modo wysiwyg , v-model puede causar la degradación del rendimiento).

En el siguiente ejemplo, editorText es vinculante al texto del editor. 

 < template >
    < editor v-model =" editorText " />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
  components : {
    'editor' : Editor
  } ,
  data ( ) {
      return {
          editorText : ''
      }
  }
}
</ script >

Accesorios

Nombre Tipo Por defecto Descripción
valor Cadena '' Este accesorio puede cambiar el contenido del editor. Si usa v-model , no lo use .
opción Objeto Siguiendo defaultOptions Opciones de tui.editor. Esto es para InitAilize Tui.Editor.
altura Cadena '300px' Este accesorio puede controlar la altura del editor.
Vista previa Cadena 'pestaña' Este accesorio puede cambiar el estilo de vista previa del editor. ( tab o vertical )
modo Cadena 'reducción' Este accesorio puede cambiar el modo del editor. ( markdown o wysiwyg )
html Cadena - Si desea cambiar el contenido del editor utilizando el formato HTML, use este accesorio.
visible Booleano verdadero Este accesorio puede controlar visible el eiditor. 
 const defaultOptions = {
    minHeight : '200px' ,
    language : 'en_US' ,
    useCommandShortcut : true ,
    useDefaultHTMLSanitizer : true ,
    usageStatistics : true ,
    hideModeSwitch : false ,
    toolbarItems : [
        'heading' ,
        'bold' ,
        'italic' ,
        'strike' ,
        'divider' ,
        'hr' ,
        'quote' ,
        'divider' ,
        'ul' ,
        'ol' ,
        'task' ,
        'indent' ,
        'outdent' ,
        'divider' ,
        'table' ,
        'image' ,
        'link' ,
        'divider' ,
        'code' ,
        'codeblock'
    ]
} ;

Ejemplo : 

 < template >
    < editor
    :value =" editorText "
    :options =" editorOptions "
    :html =" editorHtml "
    :visible =" editorVisible "
    previewStyle =" vertical "
    height =" 500px "
    mode =" wysiwyg "
    />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
    components : {
        'editor' : Editor
    } ,
    data ( ) {
        return {
            editorText : 'This is initialValue.' ,
            editorOptions : {
                hideModeSwitch : true
            } ,
            editorHtml : '' ,
            editorVisible : true
        } ;
    } ,
} ;
</ script >

Evento

  • Carga: se emitiría cuando el editor se cargue completamente
  • Cambio: se emitiría cuando cambió el contenido
  • STATECHANGE: se emitiría cuando el cambio de formato por posición del cursor
  • Enfoque: se emitiría cuando el editor se enfoque
  • Blur: se emitiría cuando el editor suelte el enfoque

Ejemplo : 

 < template >
    < editor
    @load =" onEditorLoad "
    @focus =" onEditorFocus "
    @blur =" onEditorBlur "
    @change =" onEditorChange "
    @stateChange =" onEditorStateChange "
    />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
    components : {
        'editor' : Editor
    } ,
    methods : {
        onEditorLoad ( ) {
            // implement your code
        } ,
        onEditorFocus ( ) {
            // implement your code
        } ,
        onEditorBlur ( ) {
            // implement your code
        } ,
        onEditorChange ( ) {
            // implement your code
        } ,
        onEditorStateChange ( ) {
            // implement your code
        } ,
    }
} ;
</ script >

Método

Si desea manipular más el editor, puede usar el método invoke para llamar al método de tui.editor. Para obtener más información del método, consulte el método de tui.editor.

Primero, debe asignar el atributo ref de <editor/> y luego puede usar el método invoke a través de this.$refs como este: 

 < template >
    < editor ref =" tuiEditor " />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
    components : {
        'editor' : Editor
    } ,
    methods : {
        scroll ( ) {
            this . $refs . tuiEditor . invoke ( 'scrollTop' , 10 ) ;
        } ,
        moveTop ( ) {
            this . $refs . tuiEditor . invoke ( 'moveCursorToStart' ) ;
        } ,
        getHtml ( ) {
            let html = this . $refs . tuiEditor . invoke ( 'getHtml' ) ;
        }
    }
} ;
</ script >

? Uso del espectador

Carga

  • Uso del módulo ECMAScript 

     import 'tui-editor/dist/tui-editor-contents.css' ;
import 'highlight.js/styles/github.css' ;
import { Viewer } from '@toast-ui/vue-editor'

  • Usando el módulo CommonJS 

     require ( 'tui-editor/dist/tui-editor-contents.css' ) ;
require ( 'highlight.js/styles/github.css' ) ; 
var toastui = require ( '@toast-ui/vue-editor' ) ;
var Viewer = toastui . Viewer ;

  • Uso del componente de un solo archivo 

     import 'tui-editor/dist/tui-editor-contents.css' ;
import 'highlight.js/styles/github.css' ;
import Viewer from '@toast-ui/vue-editor/src/Viewer.vue'

  • Usando el espacio de nombres 

     var Viewer = toastui . Viewer ;

Implementar

Primero implementa <viewer/> en la plantilla. 

 < template >
    < viewer />
</ template >

Y luego agregue Viewer a los components de su componente o instancia de Vue como esta: 

 import { Viewer } from '@toast-ui/vue-editor'

export default {
  components : {
    'viewer' : Viewer
  }
}

o 

 import { Viewer } from '@toast-ui/vue-editor'
new Vue ( {
    el : '#app' ,
    components : {
        'viewer' : Viewer
    }
} ) ;

Accesorios

Nombre Tipo Por defecto Descripción
valor Cadena '' Este accesorio puede cambiar el contenido del espectador.
altura Cadena '300px' Este accesorio puede controlar la altura del espectador.
extensiones Formación Este accesorio puede aplicar las extensiones del espectador.

Ejemplo : 

 < template >
    < viewer
    :value =" viewerText "
    height =" 500px "
    />
</ template >
< script >
import { Viewer } from '@toast-ui/vue-editor'

export default {
    components : {
        'viewer' : Viewer
    } ,
    data ( ) {
        return {
            viewerText : '# This is Viewer.n Hello World.' ,
        } ;
    } ,
} ;
</ script >

Evento

  • Carga: se emitiría cuando el editor se cargue completamente
  • Cambio: se emitiría cuando cambió el contenido
  • STATECHANGE: se emitiría cuando el cambio de formato por posición del cursor
  • Enfoque: se emitiría cuando el editor se enfoque
  • Blur: se emitiría cuando el editor suelte el enfoque

Ejemplo : 

 < template >
    < viewer
    @load =" onEditorLoad "
    @focus =" onEditorFocus "
    @blur =" onEditorBlur "
    @change =" onEditorChange "
    @stateChange =" onEditorStateChange "
    />
</ template >

< script >
import { Viewer } from '@toast-ui/vue-editor'

export default {
    components: {
        'viewer': Viewer
    },
    methods: {
        onEditorLoad() {
            // implement your code
        },
        onEditorFocus() {
            // implement your code
        },
        onEditorBlur() {
            // implement your code
        },
        onEditorChange() {
            // implement your code
        },
        onEditorStateChange() {
            // implement your code
        },
    }
};

? Pasos de solicitud de retiro

Los productos Toast UI son de código abierto, por lo que puede crear una solicitud de extracción (PR) después de solucionar problemas. Ejecute los scripts de NPM y desarrolle el siguiente proceso.

Configuración

Fork develop la rama en su repositorio personal. Clonarlo a la computadora local. Instalar módulos de nodo. Antes de comenzar el desarrollo, debe verificar los errores de Haveany. 

$ git clone https://github.com/{your-personal-repo}/[[repo name]].git
$ cd [[repo name]]
$ npm install

Desarrollar

¡Comencemos al desarrollo!

Solicitud de solicitud

Antes de PR, verifique para probar por último y luego verifique cualquier error. Si no tiene error, comprométase y luego presione!

Para obtener más información sobre el paso de las relaciones públicas, consulte los enlaces de la sección contribuyente.

Que contribuye

  • Código de conducta
  • Guía contribuyente
  • Convención de compromiso

Licencia

Este software tiene licencia bajo el MIT © NHN.

Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo