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

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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

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

Во-первых, Инициализируйте 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/темы/Дополнительно/editor_template_src.js, а затем упаковать его.

Затем определяет текстовую область, которая в настоящее время находится в центре внимания с помощью JQuery привязки:

$().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> 

Answer 3

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

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

Не повторно производится это с последней версией, хотя :(

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

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

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

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

Answer 4

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

Во-первых, я создал панель инструментов обертку (в моем случае я прикрепил его с позиции: закрепленной на верхней части документа:

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

Затем я установил функцию установки в TinyMCE-настройки (для каждого редактора), как это:.

[...] 
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(); 
      } 
     }); 
    }); 
} 

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

Answer 5

Я предлагаю решение по этому вопросу в случае, если кто-то все еще приходит сюда для одного. Вы можете использовать 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. Хотя единственным недостатком этой функции является то, что вам придется много работать, чтобы показать эффект на конкретной кнопке, когда она включена или выключена. Если вас это не волнует, тогда это сделает трюк.

Я надеюсь, что это помогает ...