Главная / Верстка / Веб решения / CKEditor - вставить свое содержимое по клику

CKEditor - вставить свое содержимое по клику


29.03.2015 14:283498

CKEditor - визуальный html редактор, который можно использовать на сайте. Бывает так, что может понадобиться вставка содержимого в редактор не средствами самого редактора внутри области действия, а за ее пределами. Например при редактировании новости.

Но просто так вставить содержимое в редактор не получится, для этого нужно прописать небольшую комбинацию с помощью js, которая будет обращаться конкретно к определенной форме, и передавать необходимые команды.
Поможет в этом параметр instances.

Предположим что нужно вставить ссылку в редактор по клику на определенный объект, кнопку, что угодно. В нашем случае это будет текстовая ссылка, по клику на которую будет происходить вставка в редактор CKEditor. 
Для этого создадим функцию:

<script>
    function myfunc(myurl,mydesc) {
            // а здесь параметры    
    }
</script>

В качестве параметров будут адрес ссылки (myurl) и анкор ссылки (mydesc), а чтобы они шли по назначению, адресуем их редактору:

 

 

  • объявим переменную var editor = CKEDITOR
  • указываем что и чему разрешить: instances.myform  (разрешить взаимодействие с формой myform)
  • указываем что вставить: insertHtml('<a href="'+myurl+'">'+mydesc+'</a>');

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


В итоге функция вставки ссылки в редактор CKEditor может выглядеть так:


<script>
    function myfunc(myurl,mydesc) {
            var editor = CKEDITOR.instances.myform.insertHtml('<a href="'+myurl+'">'+mydesc+'</a>');     
    }
</script>


И теперь осталось прописать саму ссылку, с вызовом формы и передачи ей определенных параметров.


<a href="javascript:myfunc('httр://prohtml.net','Решения веб сайтам');">Вставить в редактор</a>


Чтобы сделать проверку, включен визуальный режим или режим кода, нужно добавить условие if ( editor.mode == 'wysiwyg' ), а чтобы известить о необходимости переключиться в визуальный режим, можно добавить всплывающее сообщение, например alert( 'Вставка доступна в визуальном режиме!!' );


В таком случае с учетом изменений наш исходный код будет выглядеть так:

<script>    
     function myfunc(myurl,mydesc) {
					var editor = CKEDITOR.instances.myform;
					if ( editor.mode == 'wysiwyg' )
					{
					   editor.insertHtml('<a href="'+myurl+'">'+mydesc+'</a>');
                     }
					else alert( 'Вставка доступна в визуальном режиме!!' 
    );}
</script>

<a href="javascript:myfunc('httр://prohtml.net','Решения веб сайтам');">Вставить в редактор</a>


Теперь все готово, вместо ссылки можно передавать и что-то другое, например вставлять изображение и тд.

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

 

 



Вы не можете скачивать прикрепленные файлы.
Пожалуйста, включите JavaScript!

Ckeditor , Вставка По Клику





«CKEditor - вставить свое содержимое по клику» - Похожие страницы

Смена картинки по клику средствами html css Смена картинки по клику Смена картинки по клику - это уже мини сценарий, который в большинстве случаев решается использованием Java Script, позволяющим выполнять эту процедуру эффективно. Но в этом уроке речь пойдет о том, как это ...

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям