Feature Request : Anchors using redactor editor

Permalink
Feature : Create anchors using redactor editor. I think it would be more feasible if anchors also can be managed through site map or flat view of page list.
There should be list of anchors that page contains under the page list in sitemap.

I had a meeting with concrete5 developers and they suggested me to post the feature request here.
Our site have around 3000 pages and it contains hundreds of thousands of anchors. So with this feature it will same our and others lots of time who have lots of anchors.

1 Attachment

srjahir32
View Replies: View Best Answer
csebe replied on at Permalink Reply 1 Attachment
Hi,
based on Mesuva's plugin herehttps://github.com/Mesuva/specialcharacters_redactor_plugin/blob/mas... and on this discussion here:https://github.com/concrete5/concrete5-5.7.0/issues/2199... I have created a new Redactor plugin that does Anchors as follows:

- calculates anchor names form the selected text (if any)
- allows choosing anchor name if no text is selected
- adds anchors at the start of the current paragraph (be it P, H1, ...)
- allows deciding the level that the anchor will "be on"; it includes the level name in the anchor name, to be used further for generating a click-able table of contents for example.

Please see attached pictures for more details.

I would be happy to share the code on github or C5 or wherever, maybe someone wants to participate in improving/testing this or take it further (in few days).

My current unknown is the correct installation of the addon in C5.7.4 (that doesn't conform to these instructions:https://www.concrete5.org/documentation/how-tos/developers/opening-u... completely; maybe it's a version difference or so).

Here is what I did to make a Redactor Plugin work under the C5.7.4RC2:

1. create override for /concrete/js/redactor.js to /application/js, prettyfiy it and then modify overridden file by adding one more function at the end of it:
RedactorPlugins.anchors = function() {
[...]
};

2. create override for /concrete/config/concrete.php in /application/config and modify overridden file to include new plugin name in the "selected" array (search for "specialcharacters" and add another element to that array, like 'anchors')

3. modify directly /concrete/src/Editor/RedactorEditor.php (I tried to override it in the Application directory but it was ignored...) to add
$this->pluginManager->register('anchors', t('Anchors')); in the constructor (search for specialcharacters and add after)

So, is this the optimum way to include the plugin in C5? By altering the fiel in src (step 3)?
Maybe this addon should be included in C5 like Mesuva's, as soon as someone finds it useful and it is tested enough?

Cheers,
Lian
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi csebe,

It is great that you are working on Redactor plugins. Sharing the code on GitHub is ideal, that way people can make pull requests and comment on it.

There is currently discussion and development on ways to add Redactor plugins.

Adding Custom Redactor Plugins #2325
https://github.com/concrete5/concrete5-5.7.0/issues/2325...
csebe replied on at Permalink Reply
csebe replied on at Permalink Reply
Version 2 of the Anchors plugin is out, now with a basic TOC generator included ;)

Check it out athttps://github.com/csebe/anchors_redactor_plugin... for a description of the functionality, features and limitations.

Cheers,
Lian
MrKDilkington replied on at Permalink Reply 1 Attachment
MrKDilkington
@csebe

Regarding this issue:
"Doesn't indicate visually that an anchor is present in the text (in "normal" view mode). TBD if Redactor offers a solution for this."

CSS can be included with Redactor plugins. I am not sure if the CSS is limited to the toolbar/buttons/modals though. If it applies to the content area, then you could try this.
.anchors[name]:before {
    content: "\f13d";
    font: normal normal normal 14px/1 FontAwesome;
    padding-right: 5px;
}

I attached a screenshot of what this code does.
csebe replied on at Permalink Reply
Super idea!

I have tried to add your code in various places in the addon or in the redactor.js file, but no luck. I have even tried adding it to /concrete/css/redactor.css and it was ignored there too...

So, finally, I have added another button (link) in the modal, to allow showing anchors on demand (it adds the style dynamically in the DOM, per "editing session"), which might be considered even a bit more elegant :)

Added also another button to clean-up all generated anchors (to allow start anew).

Just a word of warning: all features are working only with anchors that have the css class="anchors" (which the plugin adds to the inserted/generated anchors)!
So, TOC generation, Show Anchors and Delete all anchors are not including/affecting pre-existing anchors that don't have the "anchors" css class.

Check it out! :)

Lian
MrKDilkington replied on at Permalink Reply
MrKDilkington
@csebe

Your plugin is evolving quickly and has a lot of potential. I will be referring to it as I make my own.

Have you tried packaging your plugin yet?
https://www.concrete5.org/documentation/developers/5.7/interface-cus...

The package controller allows for registering JavaScript and CSS, so it is included when Redactor is loaded.

I tried to package a plugin without success. I might need Andrews advice on getting it to work.
https://www.concrete5.org/community/forums/5-7-discussion/5.7.4-has-...
MrKDilkington replied on at Permalink Reply 1 Attachment
MrKDilkington
@csebe

I packaged your plugin. No more overrides are required.

Now it includes a CSS file that will be loaded with Redactor.

After installing the package, it needs to be enabled.
Dashboard > System & Settings > Basics > Rich Text Editor
csebe replied on at Permalink Reply
That's super, thanks a lot!

I'll install the package on a fresh 5.7.4.1 as soon as I finish my current workload.

Thanks again man,

Lian

EDIT 2015-05-19
It works super!

The whole C5/Redactor plugin integration is super elegant right now in 5.7.4.1 and, with your contribution, my particular plugin looks better too :)

Regards,
Lian
ExRxNet replied on at Permalink Reply
I'm glad to see you've tackled our feature request for an easier way to link to anchors. I tried to clarify our feature request a bit more clearly in GitHub post:
https://github.com/concrete5/concrete5-5.7.0/issues/2199...

I'm curious if your plugin allows us to link to anchors on other pages as well as the same page? I understand your solution still need testing and possibly further development. I am unfamiliar with the turn around time for these sort of new feature implementations. When do you expect your plugin to be a part of the core Concrete5 installation?

Thank you again for your efforts in creating what we see as an important feature.
csebe replied on at Permalink Reply
Hi,
the way I did it is just a simple anchor names generator. If you want to link to those anchors from other pages, there is no restriction obviously; this is an HTML feature.
To see available anchors on a page without looking through the code, you could try generating the TOC, then copy/paste the interesting one in your other page.

However, this plugin is not a solution for centrally managing all anchors in your concrete5. It is quite far from that...

As for smooth (i.e. few clicks) integrating the plugin in C5: this it is beyond my limits; as soon as C5 would accept adding Redactor plugins with few clicks (as I understand it is gonna happen in the next 5.7.4 release) this simple plugin will be usable by less technical users too. Till then, there is an installation procedure detailed in the github INSTALL file.

Cheers,
Lian
andrew replied on at Permalink Reply
andrew
Thanks for working on this. We are currently tweaking the API to make this work better, and will post back with details. This should make it into 5.7.4
andrew replied on at Permalink Reply
andrew
Thanks for working on this. I have worked on the editor API and have fixed some issues and added some functionality. I have documented how this works here

http://www.concrete5.org/documentation/developers/5.7/interface-cus...

You shouldn't have to do much more than what's on that page. You should be able to register a plug-in from a package, and enable it from the rich text editor settings dashboard page. Note: this requires concrete 5.7.4 (and it's just been added so it's not part of the release candidate)
MrKDilkington replied on at Permalink Reply
MrKDilkington
This is great.

Allowing people to download Redactor plugins from the marketplace will be very useful.
Dushka replied on at Permalink Reply
Dushka
Hi. I'm not a programmer, so do not understand the technical aspects of this discussion. But thanks to csebe and others for working on this very useful plugin. I will wait with bated breath for further news.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@Dushka

Being able to test these plugins and offering feedback and ideas is very useful too.
srjahir32 replied on at Permalink Reply
srjahir32
I have just installed this extension on my concrete 5.7.4 installation.
I found that it generates anchors, but does not shows up generated anchors.

Is there any way to add links to that anchors ?
Suppose If I have generated an anchor. On other page When i insert link, anchor should show up in under site map view under respective page. so I can directly select and insert link to anchor ?

Is it possible ?
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi srjahir32,

Yes, I believe that can be done. I was able to get the link selector working in a plugin.

I believe it would work like this:
- select text
- hit the anchor button
- use the link selector to select the internal page
- enter the name of the ID
- save

This would create a link to an internal page
Example:
<a href="http://www.yoursite.com/food/apples#tips">Link Text</a>

You would have to set the ID on the target element on that page though.
Example:
"<p id="tips">... text ... </p>" on the page "www.yoursite.com/food/apples"

I created a Redactor plugin for adding classes and ID's. This could be used to set the ID on the target element.
Add and Remove Classes and ID's
http://www.concrete5.org/download_file/-/79131/...
srjahir32 replied on at Permalink Reply 2 Attachments
srjahir32
Here what i do.
- Select a text. Hitting the anchor button.
- insert anchor name. Click on insert anchor.

- Go to other page.
- Select text.
- Click on link. Open site map view.
- select that page with anchor.

But how to add that anchor here ?

Attached screenshot. Please take a look at that.
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
@srjahir32

I made this today.

Anchor Tag Link and Target
https://www.concrete5.org/download_file/-/79617/...

What it does:
- add anchor links using the concrete5 page selector
- add anchor link targets
- show and hide anchor links
- show and hide anchor link targets
- remove anchor links
- remove anchor link targets
srjahir32 replied on at Permalink Reply
srjahir32
Hi, Mr.KDilkington,
Thanks you so much for making this, works great.
I can not link anchors by selecting pages directly.

I have one question,
Is it possible that in Page selector,
Page can shows anchors created inside it ?
Like in Tree view. So it can be directly selected.
These was original feature request.

I have website that contains thousands of anchors in it. I will have to remember all anchors name, if I create anchors with plugin you have developed.

I really appreciate what you have developed. Lots of thanks for that.. :)
MrKDilkington replied on at Permalink Reply
MrKDilkington
@srjahir32

The feature you described would require a lot of work and in depth knowledge of core concrete5.

I do not see anyone adding this feature any time soon.
CaroSV replied on at Permalink Reply
CaroSV
Hi MrKDilkington!
This looks awesome and seems to be exactly what I'm looking for.
I'm no pro at this stuff by any means and am just learning by trial and error ... so I am having trouble finding where exactly I upload this plug-in and also if/where I need to change code to incorporate the plug-in.

Thank you so much for any guidance!
MrKDilkington replied on at Permalink Reply
MrKDilkington
@CaroSV

I have made some changes and improvements to the plugin.

It will be submitted to the marketplace this weekend and might be available early next week.
csebe replied on at Permalink Reply
@Dushka: So, have you tried the Anchors Redactor plugin after MrKDilkington has packed it for easy installation in your Concrete5.7.4.1 (and greater)?