Вопросы Теги

Несколько редакторов TinyMCE, но только одна панель инструментов?

Я осмотрел форум, но, может казаться, не нахожу определенное решение этой проблемы...

Я использую jQuery и TinyMCE на нашем веб-сайте. Я прошел документы TinyMCE, но все еще теряюсь, я боюсь. Мы делаем интерфейс, который требует редактирования на месте в нескольких местах на странице. Единственная вещь, каждый из них будет иметь весь выбор редактирования от TinyMCE на одной панели инструментов наверху. Так, для резюме его он - несколько редакторов (что у каждого нет собственных панелей инструментов, просто место, чтобы отредактировать или выбрать текст), и только одна панель инструментов в верхней части страницы для управления, какой бы ни текстовое поле активно в то время.

Как это могло быть достигнуто? Это даже возможно? Любая справка, любое нажатие в правильном направлении, любые подсказки/подсказки/знание вообще на этой проблеме были бы большой, большой справкой.

Спасибо, James

11
задан littlejim84 2 June 2010 в 15:44
поделиться

2 ответа

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

Я делаю похожие вещи (с несколькими текстовыми полями), когда загружаю по запросу tinyMCE, так что что-то вроде загрузки по запросу и последующего уничтожения по завершении с (событие размытия) может быть тем, что вам нужно.

Я не могу дать вам весь свой код, поскольку он на самом деле является частью I.P. моего работодателя, но вот его приблизительный набросок, который, надеюсь, поможет. TinyMCE_GZ является частью gzip, который находится за пределами сайта tinyMCE. 

isTinyMCE_Loaded = false;

jQuery('.my-textarea').one("click", function(){
    BuildWYSIWYG.Full(jQuery(this));
})

BuildWYSIWYG.OnDemand: function(callback){
    tinyMCE_GZ.init({
        plugins : 'style,table,advhr,advimage,advlink,insertdatetime,preview,searchreplace,contextmenu,paste,fullscreen,visualchars,nonbreaking,xhtmlxtras,safari,tinybrowser',
        themes : 'simple,advanced',
        languages : 'en',
        disk_cache : true,
        debug : false
    }, function(){ 
        isTinyMCE_Loaded = true; 
        callback();
    });
};
BuildWYSIWYG.Full: function(el){   
    settings.elements = jQuery(el).attr("id");

    // Build advanced wysiwyg
    if (isTinyMCE_Loaded){
        tinyMCE.init(settings);
    } else {
        BuildWYSIWYG.OnDemand(function(){
            tinyMCE.init(settings);
        });
    }
}
1
ответ дан 3 December 2019 в 11:20
поделиться

Может быть и другой выход. Взгляните на этот пример. http://tinymce.moxiecode.com/examples/example_23.php

Вы можете использовать ссылки внизу (Показать, Скрыть, Полужирный, Получить содержимое и т. Д.) В качестве меню (может потребоваться некоторый стиль). Затем получите идентификатор текстового поля, которое в настоящее время находится в фокусе, и передайте его в меню (#current) и используйте его для изменения этого текстового поля.

Чтобы достичь того, что вы описываете:

  1. Сначала отключите все отдельные элементы меню TinyMCE.
  2. Как только они отключены, создайте собственное меню TinyMCE в HTML и оформьте его соответствующим образом.
  3. Определите, какое текстовое поле TinyMCE находится в фокусе
  4. Примените действия из вашего нового меню к текстовому полю, которое находится в фокусе

Теперь для некоторого кода (может потребоваться некоторая отладка ...)

Сначала инициализируйте TinyMCE и отключите меню. 

tinyMCE configs 
({
    mode : "textareas",
    theme : "advanced",
    editor_selector : "editable"
    theme_advanced_buttons1 : "",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "botton",
    theme_advanced_statusbar_location : "bottom" });

Думаю, вы также можете отредактировать функцию _addToolbars в tiny_mce / themes / advanced / editor_template_src.js, а затем упаковать ее.

Затем определите текстовую область, которая в данный момент находится в фокусе, используя jQuery bind: 

$().ready(function() {
        var current;
        $('.editable').focus(
            current = this.id;
        );
        $('.editable').blur(
            //maybe hide the menu (?)
        );

}

Затем создайте HTML с нашими текстовыми полями и меню 

<form method="post" action="somepage">  
<div id="independent_menu">
    <!-- The Menu, Please Style Accordingly -->
    <a href="javascript:;" onmousedown="$('#current').tinymce().show();">[Show]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().hide();">[Hide]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('Bold');">[Bold]</a>
    <a href="javascript:;" onmousedown="alert($('#current').html());">[Get contents]</a>
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getContent());">[Get selected HTML]</a>
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getContent({format : 'text'}));">[Get selected text]</a>
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getNode().nodeName);">[Get selected element]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert HTML]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a>
</div>

<!-- The Text Areas  -->

<textarea class="editable" id="one">Some Text Here</textarea>

<textarea class="editable" id="two">Yet another text area</textarea>

<textarea class="editable" id="three">Final Text Area</textarea>

1
ответ дан 3 December 2019 в 11:20
поделиться
Другие вопросы по тегам:

Похожие вопросы: