How to Copy Formatted Text from D2L to Weebly
Update: November 5, 2017:
Please read this entire page before you watch the embedded video. It turns out there is a much easier way to do the most complicated part of this process. The updated content is appended at the end of this page.
Original content of this page:
Weebly has much more limited text styling options than D2L, so some things like superscripts and subscripts will be hard to reproduce in Weebly. If you just cut and paste your posts from D2L to Weebly, you will lose some of the formatting. You can avoid this by using an "embed code" object in Weebly instead of a text box and then grabbing the preformatted code of your post.
The process of copying formatted text from D2L to Weebly is actually not terribly complicated, but it does require a little bit of understanding of the very basics of HTML. It's mostly just a copy and paste process, but you have to know WHAT to copy and paste.
HTML is a fairly simple computer language made up of what are referred to as tags.1 Tags almost always occur in pairs. There are exceptions to this rule, but they aren't relevant to this tutorial. The first tag is the opening tag, and the second tag is the closing tag. The closing tag is of the same type as the opening tag, but it has a forward slash or / on the front of it.
Tags can define styling or layout or in some cases both. For example, if you want something to be drawn in boldface, it would use a "strong" tag.
The tag that we need to worry about for this tutorial is the "div" tag, which defines a division of the page such as "this is the navbar area" or "this is the content area". Div tags are handy in web design because they let you pluck out sections of the code and do things to them separately from whatever you might be doing to the rest of the page.
Tags like the div tag can have classes and styles attached to them, which appear as part of the tag definition. The div we want to find has the class "d2l-htmlblock". If you use the "View Source" option on your browser (might be in your right-click menu or one of the other menus depending on what browser you are using, you can find it in the HTML code like so:
By far the easiest way to find it is to look at the first few words that you typed in your post and search for them with Control-F on a PC or Command-F on a Mac. In the case of this post, I'd search for the words "The process".
Grab everything in between the opening and closing div tags, and then head over to Weebly. The rest of the process is much easier with a video, so here you go:
You may want to click the YouTube logo in the bottom right corner and then select "Watch on YouTube" to see a larger version of this video.
- HTML introduction. W3Schools.com Website. http://www.w3schools.com/html/html_intro.asp. Accessed January 12, 2015.
Update November 5, 2017:
It turns out there is a MUCH easier way to get the code.
Go to the post you want to copy and click the down-arrow next to it. You should see an option that says something like "Edit Thread", which will take you into a D2L post editor window.
Down in the bottom right corner of your D2L editor window, there is a button that will pop up exactly the code you need into a panel:
Just copy everything there and paste it into an "Embed Code" box on your Weebly page, as shown in the video. The rest of the process in the video is the same, so now you can watch it.
I hope this helps!