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

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

11 голосов
/ 02 июня 2010

Я просмотрел форум, но не могу найти однозначного ответа на эту проблему ...

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

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

Спасибо, Джеймс

Ответы [ 5 ]

3 голосов
/ 13 декабря 2010

Я сделал с версией 3.x вот так (это синтаксис Prototype):

Сначала я создал оболочку панели инструментов (в моем случае я прикрепил ее с позицией: зафиксировано в верхней части документа: 

<div id="externalToolbarWrapper"></div>

Затем я устанавливаю функцию настройки в tinyMCE-settings (для каждого редактора) следующим образом: 

[...]
theme_advanced_toolbar_location : "external",
setup : function(ed) {
    ed.onInit.add(function(ed, e) {
        ed.onPostRender.add(function(ed, cm) {
            var toolbar = $(ed.id + '_external');
            // inserts the external toolbar in the external wrapper
            $('externalToolbarWrapper').insert(toolbar.hide());
        });
        ed.onRemove.add(function(ed) {
            if($(ed.id + '_external')) {
                // removes external toolbar
                $(ed.id + '_external').remove();
            }
        });
    });
}

Это сработало в моем случае - редакторы показывают / скрывают панели инструментов при активации / деактивации.

1 голос
/ 12 июня 2010

Там может быть другой путь. Посмотрите на этот пример. 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 голос
/ 25 сентября 2010

Я сделал это с более старой версией tinymce:

http://tinymce.moxiecode.com/punbb/viewtopic.php?id=10197 http://examples.dtbaker.com.au/code/tinymce/

Не удалось воспроизвести это с последней версией: (* ​​1007 *

Но в принципе есть два способа сделать это:

1) Создайте свое собственное меню, которое вызывает аргументы tinymce в активном редакторе tinymce.

2) Установите панель инструментов / меню tinymce как внешнюю, чтобы она отображалась при фокусировке редактора. Затем с помощью CSS вы позиционируете каждую панель инструментов, чтобы они появлялись в одном и том же месте. Таким образом, похоже, что есть одна панель инструментов, но на самом деле это несколько панелей инструментов, появляющихся в одном месте.

Надеюсь, это поможет.

1 голос
/ 02 июня 2010

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

Я делаю подобные вещи (с несколькими текстовыми областями), когда я загружаю по требованию 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);
        });
    }
}
0 голосов
/ 10 октября 2016

Я предоставляю решение этого вопроса на случай, если кто-нибудь еще придет сюда за одним. Вы можете использовать execCommand для выполнения различных стилей текста, которые вам нравятся, при нажатии на ваши пользовательские кнопки. Например: 

// bold, italic and underline
$('#bold').click(function(){
    tinymce.execCommand('Bold');
});
$('#italic').click(function(){
    tinyMCE.execCommand('Italic');
});
$('#underline').click(function(){
    tinyMCE.execCommand('Underline');
});

//commands for left align, right align and center align
$('#l-a').click(function(){
    tinyMCE.execCommand('JustifyLeft');
});
$('#c-a').click(function(){
    tinyMCE.execCommand('JustifyCenter');
});
$('#r-a').click(function(){
    tinyMCE.execCommand('JustifyRight');
});

//commands for inserting ul or ol
$('#ul').click(function(){
    tinyMCE.execCommand('InsertUnorderedList');
});
$('#ol').click(function(){
    tinyMCE.execCommand('InsertOrderedList');
});

где #bold, #italic, #ul и т. Д. - это идентификаторы html-элементов, которые вы используете для реализации стилей. Например: 

<button id="bold">B</button>

Эта кнопка выделяет текст жирным шрифтом, независимо от того, в каком тексте находится экземпляр tinymce. Хотя единственным недостатком этой функциональности является то, что вам придется проделать большую работу, чтобы показать эффект для конкретной кнопки, когда она включена или выключена. Если вас это не касается, тогда это поможет.

Надеюсь, это поможет ...

...