Highlight in Safari misses first letter.
May 6, 2008 - 1:22am — nathanziarek
| Project: | designMode |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Description
I have some very simple code I am playing with to get my feet wet in designMode.
The bold, underline and italics code seems to work fine. When changing block-level elements in Safari, though, the first letter of each line gets "missed." Except, it doesn't get missed, it gets reformatted to look like it wasn't touched.
<h1>
<span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: Times; font-size: 16px; font-weight: normal; ">y</span>es siree ok, good bye!
</h1>my "full" code is below. Any thoughts?
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="jquery-1.2.3.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.designmode.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
p { font-family: Trebuchet MS; }
h1, h2, h3 {color: #ab45ed; font-family: Trebuchet MS; }
</style>
<title>Test</title>
</head>
<body onload="$(window).designMode('on');">
<div id='editable'>
<h1>Hello</h1>
<p>Hi there!</p>
yes siree ok, good bye!
<ul>
<li>here is something</li>
<li>and something else</li>
</ul>
<img src="image.jpg" />
</div>
<input type="button" onclick="$(window).execCommand('bold');" value="Bold" />
<input type="button" onclick="$(window).execCommand('italic');" value="Italics" />
<input type="button" onclick="$(window).execCommand('underline');" value="Underline" />
<input type="button" onclick="$(window).execCommand('formatblock', '<h1>');" value="Heading 1" />
<input type="button" onclick="$(window).execCommand('formatblock', '<h2>');" value="Heading 2" />
<input type="button" onclick="$(window).execCommand('formatblock', '<h3>');" value="Heading 3" />
<input type="button" onclick="$(window).execCommand('formatblock', '<p>');" value="paragraph" />
</body>
</html>