Изменение содержимого CSS на ходу в TinyMCE или CKEditor - PullRequest
Новая
       20

Изменение содержимого CSS на ходу в TinyMCE или CKEditor

1 голос
/ 24 августа 2010

У меня есть форма, в которой я хочу редактировать шаблон HTML. У него 2 текстовых поля: одно для HTML, другое для CSS.

Я бы хотел использовать TinyMCE или CKEditor для текстовой области HTML.

Есть ли способ изменить CSS содержимого в любом из них, чтобы он соответствовал CSS в текстовой области CSS на ходу, поэтому при изменении CSS он автоматически загружается в редактор?

Спасибо.

1 Ответ

0 голосов
/ 25 августа 2010

У меня нет опыта работы с CKEditor, но я знаю, что это возможно с TinyMce. Что вам нужно сделать, это написать собственный плагин, который обеспечит необходимую функциональность.

OnNodeChange во 2-й текстовой области (той, что с вашим css), вам нужно обновить заголовок первых редакторов iframe. Этот фрагмент кода, который должен быть выполнен для специального действия (например, onNodeChange), должен указать вам правильное направление: 

var DEBUG = false;
var css_code = tinymce.editors[1].getContent(); // get content of 2nd editorinstance on page (your css)


iframe_id = tinymce.editors[0].id+'_ifr';

with(document.getElementById(iframe_id).contentWindow){
    var h=document.getElementsByTagName("head");
    if (!h.length) {
        if (DEBUG) console.log('length of h is null');
        return;
    }
    var newStyleSheet=document.createElement("style");
    newStyleSheet.type="text/css";
    h[0].appendChild(newStyleSheet);
    try{
        if (typeof newStyleSheet.styleSheet !== "undefined") {
        newStyleSheet.styleSheet.cssText = css_code;
    }
    else {
        newStyleSheet.appendChild(document.createTextNode(css_code));
        newStyleSheet.innerHTML=css_code;
    }
}

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

...