Jump to content

ProcessPageEditLink with multiple classes


jsantari
 Share

Recommended Posts

Is it possible in the  ProcessPageEditLink to define multiple classes as a group. I've tried to add more the one class to a line but this breaks things. Only single classes on a line seem to work. Using a css framework like Bootstrap it would be good to be able to create a class check box for example for the combined classes: btn btn-success btn-sm.

Link to comment
Share on other sites

You and I both know the right BS classes to use, clients don't. Ideally it would be really cool to have it usean alias for a group of classes - ex; 'Green Link' for 'btn btn-success btn-sm'. Sometimes there are BS theme tweaks involved too so again the alias approach would be more user friendly for the less informed.

Link to comment
Share on other sites

A textformatter would be the way to go if these button classes are subject to change (and most often they are). So you can easily just update the textformatter and everything will still work even for older texts. It's always good to keep html in the database as generic as possible so it's not going to cause problems if things change on the frontend.

  • Like 2
Link to comment
Share on other sites

59 minutes ago, LostKobrakai said:

A textformatter would be the way to go if these button classes are subject to change (and most often they are). So you can easily just update the textformatter and everything will still work even for older texts. It's always good to keep html in the database as generic as possible so it's not going to cause problems if things change on the frontend.

Good point.

Link to comment
Share on other sites

13 hours ago, kongondo said:

What about an autoload module that will make the changes on save? This way, it's done once. Or maybe JavaScript to make changes client-side on click' insert-link'? Hmm, maybe not be as elegant though.  Just some rumblings....

Good thought. Easiest way for now was to just swap out the single class for the multiple classes with jquery on dom loaded. Works fine.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By milo695
      Hello,
      I've added a class in ProcessPageEditLink but when I call it from Editor (attributes > class) nothing happens.
      Also, I've created the class in my custom.css, is there any other css file this class needs to be in?
      thanks
    • By milo695
      Hi all,
      I need help creating link in CK editor that would target my translated page, so it depends on what language user has selected.
      something like:
      <a href="?id=1450">view all</a> would target:
      <a href="en/onion/">Onion</a> <a href="de/zwiebel"></a> depending on user defined language.
      Thank you
    • By Robin S
      If you've ever needed to insert links to a large number of files within CKEditor you may have found that the standard PW link modal is a somewhat slow way to do it.
      This module provides a quicker way to insert links to files on the page being edited. You can insert a link to an individual file, or insert an unordered list of links to all files on the page with a single click.
      CKEditor Link Files
      Adds a menu to CKEditor to allow the quick insertion of links to files on the page being edited.

      Features
      Hover a menu item to see the "Description" of the corresponding file (if present). Click a menu item to insert a link to the corresponding file at the current cursor position. The filename is used as the link text. If you Alt-click a menu item the file description is used as the link text (with fallback to filename if no description entered). If text is currently selected in the editor then the selected text is used as the link text. Click "* Insert links to all files *" to insert an unordered list of links to all files on the page. Also works with the Alt-click option. Menu is built via AJAX so newly uploaded files are included in the menu without the page needing to be saved. However, descriptions are not available for newly uploaded files until the page is saved. There is an option in the module config to include files from Repeater fields in the edited page. Nested Repeater fields (files inside a Repeater inside another Repeater) are not supported. Installation
      Install the CKEditor Link Files module.
      For any CKEditor field where you want the "Insert link to file" dropdown menu to appear in the CKEditor toolbar, visit the field settings and add "LinkFilesMenu" to the "CKEditor Toolbar" settings field.
       
      http://modules.processwire.com/modules/cke-link-files/
      https://github.com/Toutouwai/CkeLinkFiles
    • By Robin S
      File Info
      A textformatter module for ProcessWire. The module can add information to local Pagefile links in two ways:
      As extra markup before, within or after the link As data attributes on the link (handy if you want to use a Javascript tooltip library, for instance) Screenshots
      Module config

      Example of output

      Installation
      Install the File Info module.
      Add the textformatter to one or more CKEditor fields.
      Configuration
      Add markup action (and general)
      Select "Add markup to links" Select the Pagefile attributes that will be retrieved. The attribute "filesizeStrCustom" is similar to the core "filesizeStr" attribute but allows for setting a custom number of decimal places. If you select the "modified" or "created" attributes then you can define a date format for the value. Enter a class string to add to the links if needed. Define the markup that will be added to the links. Surround Pagefile attribute names in {brackets}. Attributes must be selected in the "Pagefile attributes" section in order to be available in the added markup. If you want include a space character at the start or end of the markup then you'll need >= PW 3.0.128. Select where the markup should be added: prepended or appended within the link, before the link, or after the link. Add data attributes action
      Select "Add data attributes to links" Select the Pagefile attributes that will be retrieved. These attributes will be added to the file links as data attributes. Attributes with camelcase names will be converted to data attribute names that are all lowercase, i.e. filesizeStrCustom becomes data-filesizestrcustom. Hook
      If you want to customise or add to the attributes that are retrieved from the Pagefile you can hook TextformatterFileInfo::getFileAttributes(). For example:
      $wire->addHookAfter('TextformatterFileInfo::getFileAttributes', function(HookEvent $event) { $pagefile = $event->arguments(0); $page = $event->arguments(1); $field = $event->arguments(2); $attributes = $event->return; // Add a new attribute $attributes['sizeNote'] = $pagefile->filesize > 10000000 ? 'This file is pretty big' : 'This file is not so big'; $event->return = $attributes; });  
      https://github.com/Toutouwai/TextformatterFileInfo
      https://modules.processwire.com/modules/textformatter-file-info/
    • By Robin S
      I got tired of having to open the link dialog in CKEditor in order to check where a link is pointing to, so made this simple plugin.
      Link Hover
      A plugin for CKEditor. Shows the href attribute of a link in a tooltip when the link is hovered. This saves you from having to open the link dialog in order to check where a link points to.

      Installation
      This readme assumes installation in ProcessWire CMS.
      The plugin folder must be named "linkhover" – if necessary, rename the folder to remove the "-master" suffix added by GitHub. Copy the "linkhover" folder to /site/modules/InputfieldCKEditor/plugins/
      In the field settings for each CKEditor field that you want to activate the plugin for, check the "linkhover" checkbox at Input > Plugins > Extra Plugins
       
      https://github.com/Toutouwai/linkhover
×
×
  • Create New...