SharePoint: Wiki Bookmarks


I have recently received a request from Kerri Abraham,
“Larry, I have a request. For years I’ve tried to come up with a generic way of creating anchors in a wiki so that the code could be used across sites. The problem with the WYSIWYG editor is that it modifies the code to relative links, linking me back to the edit page instead of the .aspx. No SPDesigner. Here is the direction I’ve been testing…”

When I first thought about this I figured it was pretty simple. In fact several posts I’ve read explained it could be done and would be done through the source.

My first attempt was perfect, just as I expected. I began making some modifications and then got ready to draft my reply when it all failed. I was getting the same error. What happens is creating any kind of a link in wiki, using the source editor, SP appends the page URL to the beginning. So when on the EditForm.aspx making edits, this is the URL that gets added. Now each anchor links back to the edit page. This simply will not work.

starting with your wiki home page URL like this:

/sites/globalmp/Bookmarks/Home.aspx

adding a link to a bookmark, when saved goes from this:

<a href="#top">Top of page</a>

to this:

<a href="/sites/globalmp/Bookmarks/Forms/EditForm.aspx#top">Top of page</a>

I began trying a script workaround. Something that could be applied to a CEWP because use of SPD was not an option. I know jquery could probably achieve this task, but my skill level is not quite there yet. So I posted a request on one of my favorite blogs and made a request of Alexander from SharePoint Javascripts. He has proved to be a master with jquery.

So in the mean time I began playing with my own solution. Hacking all the jquery I can and then it finally hit. The simplest solution right in front of my face. If we are linking to a bookmark with in the page, why not add the page URL to the anchor?

Change this:

<a href="#top">Top of page</a>

to this:

<a href="/sites/globalmp/Bookmarks/Home.aspx#top">Top of page</a>

This worked perfectly. I added a table across the top of my wiki that included a simple navigation and throughout the wiki I added links back to the top of the page. They all successfully worked. Here was my final code, mostly comprised of text. You can of course apply formatting and update the page URL to matct your requirements.

<DIV class=ExternalClassF5DD20F2B7E24D8AA406FE7CCA0B90F8>
<DIV>
<TABLE style="DISPLAY: inline; FONT-SIZE: 1em; BORDER-COLLAPSE: collapse" border=1>
<TBODY>
<TR>
<TD class=ms-rtetablecells style="VERTICAL-ALIGN: top">
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#What_is_Lorem_Ipsum">What</A></DIV></TD>
<TD class=ms-rtetablecells style="VERTICAL-ALIGN: top">
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#Where_Does_It_Come_From">Where</A></DIV></TD>
<TD class=ms-rtetablecells style="VERTICAL-ALIGN: top">
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#Why_Do_We_Use_It">Why</A></DIV></TD>
<TD class=ms-rtetablecells style="VERTICAL-ALIGN: top">
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#Donec">Donec</A></DIV></TD>
<TD class=ms-rtetablecells style="VERTICAL-ALIGN: top">
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#Nulla">Nulla</A></DIV></TD>
<TD class=ms-rtetablecells style="VERTICAL-ALIGN: top">
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#Dolor">Dolor</A></DIV></TD>
<TD>
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#Ut">Ut</A></DIV></TD>
<TD>
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#Morbi">Morbi</A></DIV></TD></TR></TBODY></TABLE></DIV>
<DIV><STRONG><FONT size=3><A name=top>Welcome to your wiki library!</A></FONT></STRONG><BR>You can get started and add content to this page by clicking <B>Edit</B> at the top of this page, or you can learn more about wiki libraries by clicking [[How To Use This Wiki Library]].<BR><BR><STRONG>What is a wiki library?</STRONG><BR><BR><I>Wikiwiki</I> means quick in Hawaiian. A wiki library is a document library in which users can easily edit any page. The library grows organically by linking existing pages together or by creating links to new pages. If a user finds a link to an uncreated page, he or she can follow the link and create the page.<BR><BR>In business environments, a wiki library provides a low-maintenance way to record knowledge. Information that is usually traded in e-mail messages, gleaned from hallway conversations, or written on paper can instead be recorded in a wiki library, in context with similar knowledge.<BR><BR>Other example uses of wiki libraries include brainstorming ideas, collaborating on designs, creating an instruction guide, gathering data from the field, tracking call center knowledge, and building an encyclopedia of knowledge.</DIV>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV>
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget enim lacus. Sed eu convallis mi. Sed euismod, odio sit amet scelerisque molestie, enim dui eleifend purus, quis dapibus metus nibh vitae ipsum. Curabitur varius, mauris et vestibulum suscipit, tortor arcu sollicitudin urna, non egestas massa augue vel diam. Phasellus adipiscing nisl vel nibh pellentesque vitae commodo massa gravida. Proin congue congue dolor in facilisis. Integer gravida, enim ac gravida rhoncus, urna odio gravida tellus, nec viverra lectus eros viverra leo. Praesent non adipiscing purus. Cras vitae turpis sit amet diam ultricies iaculis. Mauris scelerisque magna at turpis tempus feugiat. Proin semper ipsum sed enim pretium vestibulum. Curabitur vel porta sapien. Vestibulum suscipit adipiscing magna, pretium fringilla lacus fringilla a. Duis posuere ipsum in quam pharetra cursus. Suspendisse ac nunc nec ante rutrum aliquam. Maecenas ultrices augue sit amet mauris rhoncus viverra. Cras ut lorem nec erat malesuada suscipit. Mauris congue suscipit elit ac aliquam. Cras vestibulum elementum mattis. Aenean mollis euismod purus accumsan convallis. </P>
<P>Duis vitae sem ac elit dapibus malesuada at tempus urna. Proin mollis vulputate tellus nec iaculis. Duis aliquet sollicitudin convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam auctor imperdiet nibh sed semper. Nullam sollicitudin quam et ligula fermentum imperdiet. Aenean mi mi, commodo eu tristique sed, commodo at nunc. Cras ut sem est. Phasellus leo est, tristique eu dapibus id, mollis eget mauris. Aenean mauris lectus, aliquam vitae gravida quis, facilisis eget purus. Aliquam tempor sollicitudin adipiscing. Maecenas nec quam sapien, scelerisque rhoncus ligula. Sed sed mollis ante. </P></DIV>

<DIV><A name=What_is_Lorem_Ipsum><STRONG>What is Lorem Ipsum</STRONG></A></DIV>
<DIV>
<P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</P></DIV>
<DIV></DIV>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV><A name=Where_Does_It_Come_From><STRONG>Where Does It Come From</STRONG></A></DIV>
<P>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. </P>
<P>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </P>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV><A name=Why_Do_We_Use_It><STRONG>Why Do We Use It</STRONG></A></DIV>
<P>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</P>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV><A name=Donec><STRONG>Donec ut nisi arcu</STRONG></A></DIV>
<P>Nec pulvinar nulla. Sed sit amet lectus non mauris volutpat commodo. Curabitur justo purus, eleifend et fermentum porttitor, mattis condimentum orci. Sed risus enim, vehicula vitae gravida sed, adipiscing ac erat. Donec pulvinar nibh nisl, id mollis quam. Maecenas sed turpis nec nulla molestie molestie eget ac urna. Vestibulum ultrices, metus ut fringilla euismod, arcu velit malesuada magna, et vehicula erat elit id nunc. Integer aliquam velit at felis ultrices aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum laoreet massa vel facilisis. Donec porta dui at ante sagittis id lacinia est tincidunt. Vivamus lacinia tincidunt auctor. Vivamus ligula mauris, viverra nec molestie quis, bibendum a neque. Morbi tempus orci mi. Phasellus in commodo orci. Etiam pulvinar adipiscing libero, vitae molestie nibh semper ut. </P>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV><A name=Nulla><STRONG>Nulla suscipit</STRONG></A></DIV>
<P>Dui non congue eleifend, massa ante bibendum massa, a eleifend risus velit a ante. Nunc tincidunt nunc in neque congue sed ullamcorper erat ornare. Nulla non lectus non sem porttitor convallis. Nam interdum eleifend orci, quis dictum urna malesuada ut. Duis vel mauris sit amet orci porta pellentesque. Suspendisse potenti. Vestibulum imperdiet tempus leo ut luctus. Nam eget nisl a lectus aliquet dignissim sit amet at lorem. Maecenas ornare aliquam tristique. Integer vitae dui nec turpis placerat pretium a a tortor. Etiam sit amet ante nibh. Integer a urna nibh. Sed a lectus mauris, in tincidunt arcu. </P>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV><A name=Dolor><STRONG>Dolor sit amet</STRONG></A></DIV>
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus turpis a ante mattis at convallis eros tempor. Aenean vel vehicula ipsum. Phasellus tortor diam, adipiscing vitae dignissim quis, tempus ac erat. Vestibulum tempor ante non metus feugiat porttitor. Donec interdum tincidunt tristique. Aenean eget orci sem. Phasellus id diam ante. Phasellus placerat iaculis interdum. Praesent lacus risus, viverra faucibus posuere in, tincidunt porta eros. Quisque lobortis iaculis turpis, eu posuere ipsum placerat nec. Integer sit amet nibh turpis, ut sodales nisi. In sollicitudin augue ac sapien consequat eu mollis augue molestie. </P>
<P>Quisque risus ipsum, rutrum eu tincidunt et, bibendum id purus. Maecenas pellentesque porta orci, quis ultrices risus aliquam at. Vivamus ut risus et lacus congue euismod. Mauris mattis, lacus in vestibulum egestas, lacus nibh tempor urna, a convallis dolor augue eget urna. Maecenas dui magna, eleifend ut facilisis quis, sagittis et odio. Morbi lectus nisi, euismod non pharetra in, congue ac elit. Morbi nec arcu eros. Vestibulum fringilla, libero non sagittis euismod, augue elit ultricies arcu, vitae egestas nulla dolor quis purus. Nullam et purus nec ante facilisis gravida nec ac erat. Nullam ut metus orci. Suspendisse malesuada nisl a dui aliquet pharetra. Mauris metus augue, scelerisque eget sodales vitae, feugiat ut velit. </P>
<P>Donec ut nisi arcu, nec pulvinar nulla. Sed sit amet lectus non mauris volutpat commodo. Curabitur justo purus, eleifend et fermentum porttitor, mattis condimentum orci. Sed risus enim, vehicula vitae gravida sed, adipiscing ac erat. Donec pulvinar nibh nisl, id mollis quam. Maecenas sed turpis nec nulla molestie molestie eget ac urna. Vestibulum ultrices, metus ut fringilla euismod, arcu velit malesuada magna, et vehicula erat elit id nunc. Integer aliquam velit at felis ultrices aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur </P>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV><A name=Ut><STRONG>Ut ornare aliquam</STRONG></A></DIV>
<P>Libero ut ornare. Quisque iaculis mattis augue, et hendrerit quam pretium et. Cras a pellentesque diam. Aenean consequat imperdiet suscipit. Aenean id augue sit amet mi egestas ornare ut et justo. Integer elementum iaculis commodo. Fusce pulvinar, elit at dictum imperdiet, est nulla sodales erat, ut vestibulum nulla turpis pretium urna. Donec et ligula quis lorem pretium mollis. Vivamus aliquet consequat lacus, eget bibendum nisi posuere id. Proin laoreet sem orci, et dictum quam. Nunc dignissim risus sed tellus pulvinar sit amet imperdiet dui blandit. Morbi augue lacus, vulputate ornare ullamcorper ac, pretium sit amet augue. </P>
<P>Curabitur aliquam tempus urna, nec semper mauris dapibus vel. Ut feugiat adipiscing ligula ac placerat. Mauris aliquet pharetra nisl, at suscipit justo porta a. Ut dui ipsum, egestas vel lobortis id, imperdiet non lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis interdum dictum. Quisque in neque elit. Donec eu dolor erat, ut bibendum eros. Suspendisse nulla purus, fringilla nec lobortis in, placerat sed lorem. Aliquam iaculis velit et metus consectetur egestas. Etiam euismod suscipit mattis. Vivamus egestas leo at lorem facilisis rhoncus. Mauris leo lectus, volutpat ut dapibus a, consequat tincidunt diam. Aliquam eu arcu vitae orci varius pellentesque non at mauris. Maecenas ut sapien elit, sed consequat augue. </P>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV><A name=Morbi><STRONG>Morbi</STRONG></A></DIV>
<P>Morbi congue interdum ultrices. Maecenas sed massa eu lectus dapibus suscipit. Fusce lorem elit, tristique sed ultrices ac, eleifend nec odio. Integer molestie, risus id commodo convallis, est massa convallis eros, nec scelerisque nisi nunc vitae odio. Quisque faucibus euismod eros, quis ultrices ante pulvinar vitae. Sed vitae ligula lorem, ac luctus odio. Fusce ac felis nec mi placerat cursus. Morbi luctus eleifend elit non faucibus. Duis egestas pharetra nulla, quis ullamcorper nisi accumsan vel. Nulla cursus malesuada nisi, id congue erat malesuada id. Pellentesque tempor est eu lacus porta ultrices. Sed suscipit porttitor nisi et ultricies. Morbi in libero id est iaculis vestibulum sed eget eros. Nullam rhoncus ante at neque iaculis et eleifend magna bibendum. Nunc varius semper urna, ut adipiscing massa fringilla pharetra. Quisque a lorem dictum nibh sodales elementum at quis libero. Donec lobortis nisi nec risus placerat auctor. Quisque sagittis magna a nunc eleifend id tempor nulla convallis. </P>
<P>Sed malesuada tincidunt neque, convallis rutrum urna egestas in. Maecenas et dolor quam, ut volutpat mauris. Suspendisse ut neque in eros facilisis ullamcorper. Integer pellentesque diam augue. Nullam ut tellus risus, vitae sollicitudin velit. Integer accumsan, magna at consectetur vulputate, purus tortor auctor sem, at rutrum lorem sem vitae velit. Praesent quam neque, sollicitudin vitae fringilla sed, elementum vel sem. Proin a porttitor nibh. Aenean laoreet ullamcorper neque et consectetur. Sed imperdiet diam eget augue imperdiet pretium. Phasellus a sem libero. Donec et augue magna. Etiam suscipit tellus augue, vel tristique nunc. Maecenas ac iaculis felis. Mauris non dui nulla. Nunc posuere cursus tristique. Vestibulum faucibus eros gravida dui pulvinar id tincidunt velit tempor. Etiam at nisi quis lorem tempus sodales in ac lacus. Praesent porttitor arcu a turpis sodales vel condimentum magna gravida. </P>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P></DIV>
  1. I’m not that much of a internet reader to be honest but
    your sites really nice, keep it up! I’ll go ahead and bookmark your site to come back down the road. Cheers

  2. Have you ever thought about writing an e-book or guest authoring on other websites?
    I have a blog based on the same ideas you discuss and would
    love to have you share some stories/information.

    I know my readers would value your work. If you
    are even remotely interested, feel free to send me an e-mail.

      • Larry
      • July 6th, 2013

      Thank you for your kind words. I actually got started blogging as a guest author. I would be honored to do it again.

      Larry

    • Kerri Abraham
    • June 24th, 2010

    This is exciting! I’m not completely following the directions though. Are you able to contact me directly? Thanks Larry!

      • Larry
      • June 24th, 2010

      My direct email address is cookieking@comcast.net

    • Kerri Abraham
    • June 18th, 2010

    Oh Larry, you are close! btw – I like your history lesson in the text, funny!

    I hope you can find a way to streamline this, as I would love to not have to replace code – I’ve got over a dozen wikis going already, more in the works, and editing the code for each is what I’ve been dreading all along.

      • Larry
      • June 24th, 2010

      I cannot take credit for this. My good friend Alexander is a master with jquery.

      I removed all absolute links so the wiki would replace them with the EditFrom link.

      On the wiki page I set it to Edit mode

      Add a Content Editor Web Part.
      On the Wiki page it only adds them at the bottom of the wiki content.

      In the CEWP add this code and update you path to jQuery.

      <script type="text/javascript" src="/yourpathtosource/jquery-1.4.2.min.js"></script>
      <script type="text/javascript">
      $(".ms-wikicontent a").each(function(){
      	var thisHref = $(this).attr('href');
      	var index = thisHref.indexOf('#');
      	if(index>0){
      		$(this).attr('href',thisHref.substring(index));
      	}
      });
      </script>
      

      This code does a replace of existing URL with current URL, very kool.

      Shout out to Alexander, great job again as usual!

  1. June 29th, 2010
  2. December 22nd, 2010
  3. December 7th, 2011

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 46 other followers

%d bloggers like this: