о выпадающем списке имени / размера шрифта в редакторе wysiwyg - PullRequest
Новая
       23

о выпадающем списке имени / размера шрифта в редакторе wysiwyg

4 голосов
/ 13 декабря 2011

Я работаю над Rich Text Editor для IE, и я хотел бы задать вопрос о получении значения "fontname" в текущей точке вставки.

Проблема с пустыми строками, скажем, в редакторе, который пользователь набрал: 

line 1

line 2

Пустая строка находится между «строкой 1» и «строкой 2», источник html пустой строки в этом примере (генерируется IE, когда пользователь нажимает «enter»): 

<P><FONT size=5 face="Courier New"></FONT>&nbsp;</P>

и проблема в следующем: document.queryCommandValue("fontname") дает мне разные значения в случае щелчка мышью по пустой строке и при перемещении курсора на пустую строку с помощью клавиатуры.

В случае щелчка мышью, он дает мне имя шрифта по умолчанию для браузера, в то время как в другом случае (перемещать курсор с помощью клавиатуры) он дает мне правильное имя шрифта ("Courier New").

На самом деле в этих двух случаях document.selection имеет разные значения "type": "text" при щелчке мыши и "none" при клавиатуре.

Любая помощь будет высоко ценится!

Пожалуйста, дайте мне знать, если мой вопрос не ясен.

1 Ответ

2 голосов
/ 20 октября 2013

Несколько неясно, чего вы пытаетесь достичь.Тем не менее, похоже, что вы пытаетесь получить шрифт лица из области, где его нет.Неразрывный пробел (&nbsp;) находится вне тега шрифта (<FONT> . . . </FONT>) и поэтому не имеет ни одного атрибута этого тега (лицо или размер).Если бы неразрывный пробел был внутри тега шрифта, вы могли бы получить его лицо.

Вот скрипка , иллюстрирующая это.Чтобы что-то увидеть, я заменил &nbsp на Hello.

HTML: 

<!-- Hello is outside the font tag. -->
<P><FONT size=5 face="Courier New"></FONT>Hello</P>

<!-- Hello is inside the font tag. -->
<p><font size=5 face="Times New Roman">Hello</font><p>

Javascript: 

// Alert the face
function handleFonts(e) {
    alert(this.face);
}

// Get all the font elements
var el = document.querySelectorAll("font");

// Bind event handlers to the elements
// The last element of "el" is it's length so we only
// iterate to el.length - 1 or i < el.length
for (var i = 0; i < el.length; i++) {
    el[i].addEventListener("click", handleFonts, true);
    el[i].addEventListener("keypress", handleFonts, true);
}

Нажав на текст впервый тег абзаца ничего не вызывает.Щелчок по тексту во втором работает нормально.

Мы можем обойти это, хотя с небольшим дополнительным JavaScript.

С HTML, как в первом теге и следующем Javascript, мы можем получитьлицо шрифта в теге, содержащем &nbsp, даже если &nbsp не находится внутри этого тега шрифта.

HTML: 

<p id="last-p-tag"><font size=5 face="Tahoma"></font>Hello</p>

Javascript: 

// Get the paragraph tag we want
var lastPTag = document.getElementById("last-p-tag");

// Bind an event to clicking on it
lastPTag.addEventListener("click", function(e) {
    // Alert the face attribute of the first font element
    // within that p tag
    alert(this.querySelector("font").face);
}, true);

Это включено в конце скрипки.

...