Обработка в яваскрипт текстового поля ckeditor

88

luckydan

21 июня 2014, 10:59

991

Неожиданнно столкнулся с проблемой обработки в яваксрипт значения поля сформированного в ckeditor

Если мой код выглядит так:

<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>

<script>

CKEDITOR.replace( 'editor1', {

uiColor: '#FFECDB'

});

</script>

то в коде страницы идет много чего и сам текст находится в <iframe allowtransparency="true" tabindex="0" aria-describedby="cke_52" title="Визуальный текстовый редактор, editor1" class="cke_wysiwyg_frame cke_reset" style="width: 100%; height: 100%;" src="" frameborder="0"></iframe>

Как обратится в нему в яваскрипте? document.getElementById("editor1").value - так у меня не работает..

S3

367

Sly32

21 июня 2014, 11:51

#1

Похоже, с визредакторами это проблема, CKE я вообще не смог настроить нормально с Tiny получше но тоже проблемы, правад мусорного кода меньше. Нужно было добавить свою кнопку, вставляющую в текстареа код - не работает. И никто не смог подсказать тут, как сделать

Вставить HTML в textarea Как сделать обработчик событий Вопрос про PHP

342

iqmaker

21 июня 2014, 12:01

#2

задайте для iframe некоторый id, после чего можете обращаться к его document как-то так:


var doc = document.getElementById("cleditor").contentWindow.document;

S3

367

Sly32

21 июня 2014, 12:06

#3

iqmaker:
задайте для iframe некоторый id, после чего можете обращаться к его document как-то так:


var doc = document.getElementById("cleditor").contentWindow.document;

А подскажите как в TinyMCE добавить свою кнопку? там никаких iframe нет.

342

iqmaker

21 июня 2014, 12:21

#4

Sly32:
А подскажите как в TinyMCE добавить свою кнопку? там никаких iframe нет.

а в чём сложность?, добавляете javascript-ом код html кнопки аналогичный имеющимся и вешаете свой event, вроде onClick

---------- Добавлено 21.06.2014 в 16:26 ----------

Открыл демку: http://www.tinymce.com/tryit/full.php

в консоль javascript, еще одну кнопку со смайлом (все добавляется):


$('#mceu_41-body').append( '<div id="mceu_21__" class="mce-widget mce-btn mce-last" tabindex="-1" aria-labelledby="mceu_21" role="button" aria-label="Emoticons" aria-haspopup="true"><button role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-emoticons"></i></button></div>' ) 

// hello при клике 

$( '#mceu_21__' ).click( function() { alert( "hello" ); } );

Оцените сайт. Продажа авто Баги форумного движка пишем display: none

S3

367

Sly32

21 июня 2014, 12:39

#5

iqmaker, спасибо, попробую

342

iqmaker

21 июня 2014, 12:57

#6

Sly32:
iqmaker, спасибо, попробую

Пожалуйста, только попробовать можете прямой сейчас это не сложно, открываете ссылку http://www.tinymce.com/tryit/full.php, в хроме нажимаете CTRL + SHIFT + J и вставляете в открывшуюся консоль код:


$('#mceu_41-body').append( '<div id="mceu_21__" class="mce-widget mce-btn mce-last" tabindex="-1" aria-labelledby="mceu_21" role="button" aria-label="Emoticons" aria-haspopup="true"><button role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-emoticons"></i></button></div>' ) 
// hello в документ
$( '#mceu_21__' ).click( function() { var frame = document.getElementById( 'content_ifr' ); $(frame.contentWindow.document.body).append( "<p>Hello </p>" ); } );

После каждого нажатия второй кнопки со смайлом в тело визуального редактора будет добавлять фраза hello.

В Метрике появилась поддержка В Google Таблицах появились Вышел новый Директ.Коммандер 2.7

S3

367

Sly32

22 июня 2014, 11:37

#7

iqmaker:
Пожалуйста, только попробовать можете прямой сейчас это не сложно,
После каждого нажатия второй кнопки со смайлом в тело визуального редактора будет добавлять фраза hello.

В консоли попробовал - действительно все работает. Осталось понять, куда это нужно вставлять на практике))) какой файл править?