Saltearse al contenido
StudioCMS Docs
Sitio Principal

@studiocms/wysiwyg

v0.1.0-experimental.5 GitHub npm Registro de cambios

Introducción

Sección titulada «Introducción»

¡Este complemento agrega un editor WYSIWYG a tu proyecto StudioCMS con facilidad!

Instalación

Sección titulada «Instalación»

  1. Instala el paquete usando el siguiente comando:

    Ventana de terminal
    npm run studiocms add @studiocms/wysiwyg

  2. Tu configuración de StudioCMS ahora debe incluir @studiocms/wysiwyg:

    studiocms.config.mjs
    import { 
    function defineStudioCMSConfig(config: StudioCMSOptions): {
        plugins?: StudioCMSPlugin[] | undefined;
        logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
        dbStartPage?: boolean | undefined;
        verbose?: boolean | undefined;
        componentRegistry?: Record<string, string> | undefined;
        locale?: {
            dateLocale?: string | undefined;
            dateTimeFormat?: Intl.DateTimeFormatOptions | undefined;
        } | undefined;
        features?: {
            sdk?: boolean | {
                cacheConfig?: boolean | {
                    lifetime?: string | undefined;
                } | undefined;
            } | undefined;
            robotsTXT?: boolean | {
                host?: string | boolean | undefined;
                sitemap?: string | boolean | string[] | undefined;
                policy?: {
                    userAgent?: "360Spider" | "360Spider-Image" | "360Spider-Video" | "HaoSouSpider" | "AdsBot-Google" | "AdsBot-Google-Mobile" | "AdsBot-Google-Mobile-Apps" | "Googlebot" | "Googlebot-Image" | "Googlebot-Mobile" | "Googlebot-News" | "Googlebot-Video" | "Mediapartners-Google" | "adidxbot" | "bingbot" | "BingPreview" | "MicrosoftPreview" | "msnbot" | "msnbot-media" | "Applebot" | "AppleNewsBot" | "Baiduspider" | "Baiduspider-image" | "Baiduspider-mobile" | "Baiduspider-news" | "Baiduspider-video" | "coccoc" | "coccocbot-image" | "coccocbot-web" | "DuckDuckBot" | "DuckDuckGo-Favicons-Bot" | "facebookcatalog" | "facebookexternalhit" | "Facebot" | "gooblog" | "ichiro" | "Sogou blog" | "Sogou inst spider" | "Sogou News Spider" | "Sogou Orion spider" | "Sogou spider2" | "Sogou web spider" ...
    A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
    

    StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
    

    Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
    @example 
    // studiocms.config.mjs
    import { defineStudioCMSConfig } from 'studiocms';
    

    export default defineStudioCMSConfig({
     dbStartPage: true,
     contentRenderer: 'marked',
     verbose: true,
     dateLocale: 'en-us',
     // ...Other Options
    })
    defineStudioCMSConfig     } from 'studiocms/config';
    import 
    function wysiwyg(opts?: WYSIWYGSchemaOptions): StudioCMSPlugin
    Creates and configures the StudioCMS WYSIWYG Editor plugin.
    

    This plugin integrates a WYSIWYG editor into the StudioCMS environment,
registering custom routes, rendering components, and handling configuration hooks.
    @param ― options - Optional configuration for the WYSIWYG schema, including sanitization options.
    @returns ― A configured StudioCMS plugin instance for the WYSIWYG editor.
    @example 
    import wysiwyg from '@studiocms/wysiwyg';
    

    plugins: [
      wysiwyg({
        sanitize: {}
      })
    ]
    wysiwyg     from '@studiocms/wysiwyg';
    

     export default 
    function defineStudioCMSConfig(config: StudioCMSOptions): {
        plugins?: StudioCMSPlugin[] | undefined;
        logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
        dbStartPage?: boolean | undefined;
        verbose?: boolean | undefined;
        componentRegistry?: Record<string, string> | undefined;
        locale?: {
            dateLocale?: string | undefined;
            dateTimeFormat?: Intl.DateTimeFormatOptions | undefined;
        } | undefined;
        features?: {
            sdk?: boolean | {
                cacheConfig?: boolean | {
                    lifetime?: string | undefined;
                } | undefined;
            } | undefined;
            robotsTXT?: boolean | {
                host?: string | boolean | undefined;
                sitemap?: string | boolean | string[] | undefined;
                policy?: {
                    userAgent?: "360Spider" | "360Spider-Image" | "360Spider-Video" | "HaoSouSpider" | "AdsBot-Google" | "AdsBot-Google-Mobile" | "AdsBot-Google-Mobile-Apps" | "Googlebot" | "Googlebot-Image" | "Googlebot-Mobile" | "Googlebot-News" | "Googlebot-Video" | "Mediapartners-Google" | "adidxbot" | "bingbot" | "BingPreview" | "MicrosoftPreview" | "msnbot" | "msnbot-media" | "Applebot" | "AppleNewsBot" | "Baiduspider" | "Baiduspider-image" | "Baiduspider-mobile" | "Baiduspider-news" | "Baiduspider-video" | "coccoc" | "coccocbot-image" | "coccocbot-web" | "DuckDuckBot" | "DuckDuckGo-Favicons-Bot" | "facebookcatalog" | "facebookexternalhit" | "Facebot" | "gooblog" | "ichiro" | "Sogou blog" | "Sogou inst spider" | "Sogou News Spider" | "Sogou Orion spider" | "Sogou spider2" | "Sogou web spider" ...
    A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
    

    StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
    

    Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
    @example 
    // studiocms.config.mjs
    import { defineStudioCMSConfig } from 'studiocms';
    

    export default defineStudioCMSConfig({
     dbStartPage: true,
     contentRenderer: 'marked',
     verbose: true,
     dateLocale: 'en-us',
     // ...Other Options
    })
    defineStudioCMSConfig    ({
       
    plugins?: StudioCMSPlugin[] | undefined
    plugins    : [
         
    function wysiwyg(opts?: WYSIWYGSchemaOptions): StudioCMSPlugin
    Creates and configures the StudioCMS WYSIWYG Editor plugin.
    

    This plugin integrates a WYSIWYG editor into the StudioCMS environment,
registering custom routes, rendering components, and handling configuration hooks.
    @param ― options - Optional configuration for the WYSIWYG schema, including sanitization options.
    @returns ― A configured StudioCMS plugin instance for the WYSIWYG editor.
    @example 
    import wysiwyg from '@studiocms/wysiwyg';
    

    plugins: [
      wysiwyg({
        sanitize: {}
      })
    ]
    wysiwyg    (),
       ],
     });