Cómo usar TinyMCE en modo oscuro

Cómo usar TinyMCE en modo oscuro

Our Code World adora las interfaces de usuario oscuras. Nos encanta cuidar nuestros ojos, especialmente en esas largas noches de programación con pizza y refrescos. Esta es una práctica no tan común que, afortunadamente, está comenzando a ser adoptada por muchos sitios web como Stack Overflow, Dev.to, etc. 

Como desarrolladores, es posible que debamos introducir las mismas funciones en los productos en los que estás trabajando, como un CMS. Si algunos de tus proyectos utilizan uno de los mejores editores WYSIWYG para JavaScript que existen , específicamente TinyMCE, no necesitarás desarrollar un modo oscuro personalizado, ya que ya ofrece uno que posiblemente se ajuste a tu diseño de interfaz actual. En este breve artículo, te explicaré cómo usar fácilmente el modo oscuro de TinyMCE en tu proyecto con JavaScript.

Usando el modo oscuro

Si estás utilizando la última versión de TinyMCE, puedes definir fácilmente el modo oscuro con las dos propiedades skin y content_css. El paquete predeterminado de TinyMCE incluye ambas versiones de las skins predeterminadas de TinyMCE (Oxide y Oxide Dark). Proporcionando las siguientes propiedades durante la inicialización del editor:

tinymce.init({
    // Tu selector inicial
    selector:'textarea',

    // 1. Utilice la versión oscura de la máscara de Oxide predeterminada para TinyMCE
    skin: "oxide-dark",
    // 2. El contenido CSS también debe ser oscuro o tus ojos se quemarán
    // Puede utilizar el modo oscuro predeterminado o crear sus propias reglas especificando la
    // ruta al archivo css
    // content_css : "https://cdn.mywebsites.com/css/custom_tinymce_rules.css",
    content_css: "dark"
});

Como se especifica, también puedes, en lugar de usar el CSS oscuro predeterminado para el contenido dentro del editor, puedes proporcionar tus propias reglas con la URL del archivo CSS con estas reglas. Eso es básicamente todo lo que necesitas hacer para usar un modo oscuro en TinyMCE.

Utilizando según las preferencias del usuario

Como describimos en artículos anteriores, existe una forma bastante útil de saber cuándo el usuario prefiere un esquema de color más oscuro o más claro en sus aplicaciones con JavaScript y CSS fácilmente. Podemos usar esto para definir el tema de TinyMCE en consecuencia:

tinymce.init({
    // Tu selector inicial
    selector:'textarea',

    // 1. Utilice la versión oscura de la máscara de Oxide predeterminada para TinyMCE
    skin: (window.matchMedia("(prefers-color-scheme: dark)").matches ? "oxide-dark" : ""),
    // 2. El contenido CSS también debe ser oscuro o tus ojos se quemarán
    // Puedes utilizar el modo oscuro predeterminado o crear tus propias reglas especificando la
    // ruta al archivo css
    // content_css : "https://cdn.mywebsites.com/css/custom_tinymce_rules.css",
    content_css: (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "")
});

De esta manera, si los usuarios prefieren un esquema oscuro, entonces se usará el tema Oxide oscuro, de lo contrario, se usará la skin predeterminada.

Personaliza la skin tú mismo

Y recuerde, si esto no es lo que está buscando y, en cambio, desea personalizar cada detalle en el editor, consulte las pautas oficiales sobre cómo crear una máscara personalizada para TinyMCE en su sitio web oficial aquí .

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable