it-swarm-eu.dev

Přidání tříd CSS do wysiwyg

Používám wysiwyg s ckeditorem, a přemýšlel jsem, jak přidám CSS styly, aby uživatel mohl například plovoucí obrázky nalevo nebo provádět jiné podobné změny ...?

Dík!

7
Jane

Ckeditor používá ckeditor.styles.js file pro definování dostupných stylů v rozevírací nabídce Styly. Dokumentace v tomto souboru uvádí:

'Styles' button is not enabled by default in DrupalFull and DrupalFiltered toolbars.

Pokud se podíváte na soubor, mělo by být docela rovné jej upravit pomocí uvedených příkladů.

The ckeditor.styles.js soubor lze zkopírovat do adresáře přístupného pomocí Drupal a upravený tak, aby zahrnoval vaše styly.) Potom musíte nakonfigurovat svůj profil CKeditor tak, aby ukazoval na nový soubor, včetně všech příslušných CSS.

6
nmc

Namísto zapojení do ckeditor.styles.js, můžeme to udělat přímo na konfigurační stránce formátu.

Formát WYSIWYG vám dává možnost podle vašich vlastních stylů a na základě těchto formátů můžeme jednoduše napsat css.

Postup přidání stylů

  • Přihlaste se na web jako správce.
  • Přejděte na konfigurační stránku formátů. (Konfigurace "Tvorba obsahu" Profily Wysiwyg)

    enter image description here

  • Upravte libovolný formát.

    enter image description here

  • Otevřete sadu polí CSS .

    enter image description here

  • Ve skupinovém rámečku CSS tříd vytvořte styl, který chcete vytvořit. Formát by měl být

Název stylu = html_element.class_name

Příkladem toho je

Statický název stránky = div.static_page_title (Takže název stylu je Statický název stránky , který při použití zabalí text do div přidání static_page_title jako třídy prvku div .)

Kroky k použití

  • Zkuste vytvořit obsah a použijte formát, ve kterém jste přidali styl.
  • V části Styly byste viděli nastavení stylu, které jste vytvořili. enter image description here
  • Jednoduše napište test a vyberte styl. Poté, co to uděláte, bude označení vypadat podobně

    <div class="static_page_title">Testing</div>

  • Můžeme tedy jednoduše napsat css pro static_page_title třídu a vše bude fungovat podle očekávání.

Doufám, že moje odpověď bude užitečná

1
Nitesh Sethia