In Sharepoint 2010, I have built a custom page layout and have applied custom styles. Page layout consist of single rich text editor HTML field. Now I have a need to add some custom text next to the selected text when a particular markup Style is applied.
I can do that using jQuery once the page is saved but that is after the user has finished editing.
The requirement is for them to see the text while they are still in edit mode so that they get a true WYSIWYG experience . Below is the jQuery code I am using to display the text after page is saved:
<script type="text/javascript">
$(document).ready(function () {
$('.topicpagelayout2-styleElement-H3').wrap('<div class="hd leftcontent" />');
$('.topicpagelayout2-styleElement-H3').append('<span class="top"><a href="#top">Top</a></span>');
$('.topicpagelayout2-styleElement-H3').addClass('header2');
var count=0;
$('.leftcontent').each(function(index) {
count++;
$(this).attr('id','div_'+count);
});
//$("span.ms-formfieldlabel").css("display", "none");
setLeftContent();
});
</script>