Задайте свой вопрос о JavaScript на нашем форуме

Список команд для метода execCommand

Теги: javascript wysiwyg

Метод execCommand, применяемый для форматирования выделений, имеет довольно обширный список команд, приводимых в данной статье.

Синтаксис метода execCommand

Метод execCommand объекта document используется для работы с range-объектами, в частности с пользовательскими выделениями. Он принимает три аргумента:

  • имя команды: указывает на действия, которые необходимо совершить с выделением.
  • флаг: булево значение, указывающее отображать ли интерфейс пользователя, вызванный командой.
  • параметры команды

Из этих трех аргументов обязательным является только первый. Пример:

// Окрашивает выделение в заданный цвет (IE Only)
document.execCommand("foreColor", false, "#FF0000");

Полноценная поддержка этого метода появилась только в ИЕ. Пример, иллюстрирующий работу метода execCommand.

Список команд

КомандаОписание
2D-PositionКоманда, позволяющая пользователю передвигать абсолютно позиционированные элементы.
AbsolutePositionКоманда, устанавливающая свойство position данного элемента в значение "absolute".
BackColorКоманда, устанавливающая или возвращающая цвет фона данного выделеного текста.
BlockDirLTRНе поддерживается.
BlockDirRTLНе поддерживается.
BoldКоманда, переключающая состояние шрифта выделенного фрагмента текста между жирным и нормальным.
BrowseModeНе поддерживается.
CopyКоманда, помещающая копию данного выделенного фрагмента текста в буфер обмена.
CreateBookmarkКоманда, создающая "якорь" из выделенного фрагмента текста или возвращает имя "якоря" для выделенного фрагмента текста.
CreateLinkКоманда, создающая гиперссылку из выделенного фрагмента текста.
CutКоманда, помещающая копию данного выделенного фрагмента текста в буфер обмена и удаляющая этот фрагмент из документа.
DeleteКоманда, удаляющая выделенный фрагмент текста.
DirLTRНе поддерживается.
DirRTLНе поддерживается.
EditModeНе поддерживается.
FontNameКоманда, задающая или возвращающая имя шрифта текста.
FontSizeКоманда, задающая или возвращающая размер шрифта текста
ForeColorКоманда, задающая или возвращающая цвет текста.
FormatBlockКоманда, форматирующая выделенный фрагмент текста как блок <DIV>, <P> или <SPAN>.
IndentКоманда, увеличивающая отступ выделенного фрагмента текста.
InlineDirLTRНе поддерживается.
InlineDirRTLНе поддерживается.
InsertButtonКоманда, вставляющая в документ кнопку(<BUTTON>).
InsertFieldsetКоманда, вставляющая в документ группу <FIELDSET>.
InsertHorizontalRuleКоманда, вставляющая в документ горизонтальную полосу прокрутки.
InsertIFrameКоманда, вставляющая в документ "плавающий" фрейм.
InsertImageКоманда, вставляющая в документ изображение.
InsertInputButtonКоманда, вставляющая в документ командную кнопку.
InsertInputCheckboxКоманда, вставляющая в документ кнопку-"флажок".
InsertInputFileUploadКоманда, вставляющая в документ элемент управления для отправки файла на сервер.
InsertInputHiddenКоманда, вставляющая в документ скрытое поле.
InsertInputImageКоманда, вставляющая в документ изображение как элемент управления.
InsertInputPasswordКоманда, вставляющая в документ поле ввода пароля.
InsertInputRadioКоманда, вставляющая в документ радиокнопку.
InsertInputResetКоманда, вставляющая в документ кнопку сброса данных формы.
InsertInputSubmitКоманда, вставляющая в документ кнопку отправки данных из формы на сервер.
InsertInputTextКоманда, вставляющая в документ поле ввода текста.
InsertMarqueeКомманда, вставляющая в документ прокручивающийся текст.
InsertOrderedListКомманда, вставляющая в документ нумерованный список.
InsertParagraphКомманда, создающая абзац из выделенного фрагмента текста.
InsertSelectDropdownКомманда, вставляющая в документ выпадающий список.
InsertSelectListboxКомманда, вставляющая в документ список.
InsertTextAreaКомманда, вставляющая в документ область редактирования текста.
InsertUnorderedListКомманда, вставляющая в документ маркированный список.
ItalicКомманда, переключающая состояние шрифта выделенного фрагмента текста между наклонным и нормальным.
JustifyCenterКомманда, выравнивающая абзац, в который входит фрагмент выделенного текста, по центру.
JustifyFullНе поддерживается.
JustifyLeftКомманда, выравнивающая абзац, в который входит фрагмент выделенного текста, по левому краю.
JustifyNoneНе поддерживается.
JustifyRightКомманда, выравнивающая абзац, в который входит фрагмент выделенного текста, по правому краю.
LiveResizeКомманда, включающая или выключающая режим мгновенного("живого") отображения размеров или местоположения элементов страницы во время изменения размеров последней.
MultipleSelectionКомманда, позволяющая или запрещающая выделение сразу нескольких элементов web-строницы.
OpenНе поддерживается.
OutdentКомманда, уменьшающая отступ выделенного фрагмента текста.
OverWriteКомманда, переключающая режим ввода текста между вставкой и заменой.
PasteКомманда, заменяющая данный выделенный фрагмент текста на содержимое буфера обмена.
PlayImageНе поддерживается.
PrintКомманда, открывающая диалоговое окно "Печать".
RedoНе поддерживается.
RefreshКомманда, перезагружающая данный документ с сервера.
RemoveFormatКомманда, удаляющая все тэги форматирования текста из выделенного фрагмента текста.
RemoveParaFormatНе поддерживается.
SaveAsКомманда, сохраняющая текущую web-страницу в файл.
SelectAllКомманда, выделяющая весь документ.
SizeToControlНе поддерживается.
SizeToControlHeightНе поддерживается.
SizeToControlWidthНе поддерживается.
StopНе поддерживается.
StopImageНе поддерживается.
StrikeThroughНе поддерживается.
SubscriptНе поддерживается.
SuperscriptНе поддерживается.
UnBookmarkКомманда, удаляющая элемент закладки из текущего фрагмента выделенного текста.
UnderlineКомманда, устанавливающая подчёркивание для выделенного фрагмента текста или снимающая это подчёркивание.
UndoНе поддерживается.
UnlinkКомманда, удаляющая элемент гиперссылки из текущего фрагмента выделенного текста.
UnselectКомманда, очищающая данный фрагмент выделенного текста.

Александр Бурцев 30 августа 2007

© Все права на данную статью принадлежат порталу fastcoder.org. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.

Комментарии

Написать комментарий
studentdok 24 октября 2008, 10:17 #
У меня тут возник вопрос при использовании команды BackColor FF начинает глючить и закрашивать весь бекраунд, а IE закрашивает все нормально, как решить эту проблему?
Ответить
 
ammarty 24 октября 2008, 12:29 #
попробуйте для мозилы и оперы использовать hilitecolor
Ответить
 
studentdok 25 октября 2008, 09:48 #
Большое спасибо, все заработало
Ответить
 
studentdok 30 октября 2008, 11:19 #
Еще один вопрос только с функцией InsertImage как задать дополнительные отрибуты, пробован через InsertHtml, и всталять нужный мне тег, но ие начинает ругаться, как быть?
Ответить
 
Bur 5 ноября 2008, 11:29 #
Дополнительные атрибуты для изображения с помощью execCommand боюсь не получится вставить. Вместо команды "InsertHtml" попробуйте воспользоваться статьей WYSIWYG: вставляем произвольный HTML-код
Ответить
 
studentdok 8 ноября 2008, 11:18 #
Я прочел эту статью, с цветами и ссылками я разобрался, уже написал почти весь текстовый редактор, осталась проблема с картинками, и применение к ней дополнительных отребутов, типа мышь сверху, id и т.д.
Ответить
 
Bur 10 ноября 2008, 12:19 #
В чем суть проблемы?
Ответить
 
studentdok 10 ноября 2008, 14:56 #
команда InsertImage вставляет тег
<img src="путь">
, а мне нужно
<img src="путь" id="ид элемента" onclick="действие" onmouseOver="действие">
и тд, вот как это реализовать так и не пойму
Ответить
 
Bur 10 ноября 2008, 23:36 #
Можно делать так:
1) Вставляем картинку через execCommand("InsertImage"...
2) Находим все изображения с этим урлом в DOM-дереве документа.
3) Отбрасываем те, у которых уж есть id (или какой-то специфическийц параметр).
4) Оставшемуся изображению добавляем необходимые свойства и обработчики событий.

Надеюсь объяснил понятно.
Если не осилите - пишите, набросаю пример.
Ответить
 
studentdok 11 ноября 2008, 07:45 #
можно пример :)
И как это вставить изменения безболезненно для остального текста, если
<span>ляля</span><img src=""> <span>ляля</span>
Ответить
 
Bur 11 ноября 2008, 17:30 #
Можно, чтобы абстрактно не писать, дайте ссылку на то, что есть сейчас?
Ответить
 
serjinio 19 ноября 2008, 19:15 #
Подстраиваю под себя очень неплохой редактор но не могу решить проблему как при загрузке картинки выводилась ее ширина и высота ссейчас выводится
<img src="uploadedimages/1-1.gif">,а хотелось бы получить <img src="uploadedimages/1-1.gif" width="16" height="16" border="0" />

вот код
var dsRTE_insertImage=function()
{
this.ExecuteCommand=function(a,b,c){c.slideToggle();return true};
this.PrepareCommand=function(b,c,d,f)
{
var g=c;
$('#'+b.iframe.id+'-'+c+'-ok').click(function()
{
b.frame.focus();
$.ajaxFileUpload(
{
url:f.attr('path'),secureuri:false,fileElementId:b.iframe.id+'-'+g+'-file',dataType:'json',success:function(a,s)
{
if(a.error){alert(a.error)}
else{
b.frame.focus();
$('#'+c).val('');                                                                                           d.slideUp();
b.doc.execCommand('insertimage',false,a.path+'/'+a.file )
}
},error:function(a,s,e){alert(e+': '+a.responseText)}})});
return true
}
};
dsRTE.RegisterPlugin(new dsRTE_insertImage(),'image');
 



Ответить
 
Bur 19 ноября 2008, 19:56 #
Насколько я понял, за вставку изображения в вашем редакторе отвечает только эта строка:
b.doc.execCommand('insertimage',false,a.path+'/'+a.file )

Можно проставить изображению width и height уже после вставки, приблизительно таким образом:
var iWidth = 16; // Ширина изображений
var iHeight = 16; // Высота изображения
var all_images = b.doc.images; // Вернет коллекцию всех изображений
for (var i = 0; i < all_images.length; i++) {
   if (all_images[i].src && all_images[i].src.indexOf(a.path+'/'+a.file) != -1) { // Вы нашли изображение с нужным урлом
      if (!all_images[i].width && !all_images[i].height) { // Проверим нет ли у него установленных width & height
         all_images[i].width = iWidth;
         all_images[i].height = iHeight;
         break;
      }
   }
}

Не проверял, но код имеет все шансы заработать...
Ответить
 
serjinio 19 ноября 2008, 21:39 #
Ничего себе скорость ответа....сразу видно профессионал....сам редактор очень неплохой
http://www.avidansoft.com/_en/scriptsмне очень понравился..но я больше по PHP поэтому и ковыряюсь с яваскриптами методом научного тыка и почитывая мануал...спасибо за быстрый ответ сейчас попробую сам редактор называется Damn Small Rich Text Editor,но кое что приходится напильником.....
Ответить
 
serjinio 21 ноября 2008, 23:32 #
Помогите пожалуйста допилить этот редактор
что сделал
удалил модуль вв кодов
сделал вывод в ифрэйм dsrte.php
$html .= '<textarea rows="1" cols="1" id="'.$this->id.'-ta" name="'.$this->id.'_text" style="display:none">'.stripslashes($default_text).'</textarea>';


в uploadhandler.php добавил

$Img_Path = 'http://www.test.ru/images/img_art';
// get the one and only file element from the FILES array
$file = current( $_FILES );
$upfiledir = $_SERVER['DOCUMENT_ROOT']."/images/img_art/";
$up_file = $upfiledir . basename($file['name']);
// verify upload was successful...
$u=@move_uploaded_file( $file['tmp_name'], "$up_file" );
@$r_img  = getimagesize($up_file);

@unlink($_FILES['image']['tmp_name']);
// Изменяем права доступа к файлу
@chmod($up_file, 0644);

if ( $file['error'] == UPLOAD_ERR_OK )
{// and move the file to it's destination
if ($u ==FALSE )
{
$error = t( "Can't move uploaded file into the $Img_Path directory" );
}
}

и
// print results for AJAX handler
echo to_json( array( 'error' => $error,
 'path' => $Img_Path,
  'file' => $file['name'],
   'tmpfile' => $file['tmp_name'],
    'size' => $file['size'],
     'w_h_img' => $r_img[3]
    ) );


в image.js

else
{
b.frame.focus();
$('#'+c).val('');                                                                   d.slideUp();
var s='border="0"';
b.doc.execCommand('insertimage',false,a.path+'/'+a.file + a.w_h_img + s)
}

вот здесь и засада...картинка грузится,но в браузер те в поле ифрейма выводится
<img src="http://www.test.ru/images/img_art/more.gifwidth=%2219%22%20height=%2212%22border=%220%22">
без пробела перед width= и сущности вместо кавычек и пробелов..... просто знаний по яваскрипту явно не хватает ...Прошу Вас о помощи ,заранее спасибо
Ответить
 
Bur 23 ноября 2008, 22:02 #
Смотрим на эту строчку:
b.doc.execCommand('insertimage',false,a.path+'/'+a.file + a.w_h_img + s)

В качестве третьего аргумента метода execCommand должен стоять ТОЛЬКО! путь к изображению. Зачем вы передаете еще и размер?
Ответить
 
studentdok 25 ноября 2008, 21:13 #
Большое спасибо за ответ, с помощью данной функции решил много проблем
Ответить
 
serjinio 27 ноября 2008, 12:53 #
Спасибо за подсказку,понял,что решение моей задачи не существует
Ответить
 
studentdok 16 марта 2009, 17:09 #
Значит так, работа с сылками и картинками еще проще можно через dom вставить картинку со всеми нужными атрибутами и не нужно изобретать велосипед сейчас покажу на примере:

var img = document.createElement('img');
    img.src ='путь для изображения';
    img.id =' ID изображения';
        iDoc = (isGecko) ? iframe.contentDocument : iframe.document;
    iDoc.body.appendChild(img)

все что касается iDoc берем из этой статьи http://fastcoder.org/articles/?aid=169 если не понятно обращайтесь
Ответить
 
Bur 16 марта 2009, 17:36 #
Можно и через DOM, только статья называется "Список команд для метода execCommand" и речь здесь именно про команды...
Ответить
 
studentdok 18 марта 2009, 22:09 #
я понимаю, просто может кому поможет
Ответить
 
Stasovsky 21 мая 2010, 00:33 #
Здравствуйте. Мне нужно скопировать в буфер значение, но мне нарисовало огромную ошибку...
код:
... document.execCommand('Copy',false,uname); ...

ошибка:
uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLDocument.execCommand]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"...
Ответить
 
dsmt 3 сентября 2010, 00:18 #
Спасибо за отличный редактор!
Есть ли простой способ вставлять текст без предварительного форматирования, чтобы не приходилось потом его удалять?
Ответить
 
 
Rambler's Top100 Flede HTML valid CSS valid