tinyMCE - мне нужно ограничить ширину / высоту вводимого текста - PullRequest
Новая
       8

tinyMCE - мне нужно ограничить ширину / высоту вводимого текста

2 голосов
/ 28 марта 2012

У меня есть текстовая область tinyMCE, в которой я хочу ограничить размер, в пикселях, всего, что вводит пользователь. Действительно, я делаю. Я знаю, что это не то, как большинство людей используют tinyMCE, но мы позволяем клиентам вводить и форматировать собственный текст объявления для рекламы определенного размера (407 на 670 пикселей). Поэтому я хочу ограничить то, что они могут ввести в этот конкретный размер. Я не могу ограничить количество символов, потому что это будет зависеть от стиля / размера шрифта. Я на самом деле хочу, чтобы входные данные помещались в ячейку определенного размера.

Я успешно изменил размер области редактора и отключил изменение размера редактора и полос прокрутки (в любом случае в Firefox), но он все равно позволит пользователю продолжать печатать за пределами поля. Есть ли ЛЮБОЙ способ запретить это?

http://www.retailpromoinc.com/RestaurantAdvertising.php

Спасибо за ваше внимание, я боролся с этим в течение ЧАСОВ!

Ответы [ 3 ]

0 голосов
/ 29 марта 2012

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

  1. Вот учебник по написанию собственного плагина , это не сложно.
  2. Вам придется проверять высоту содержимого редактора для каждого из действий пользователя (keyup, paste, aso.). Для этого используйте предопределенные обработчики событий tinymce. Если размер 670px меньше реального, у вас будет для отмены последнего действия пользователя, автоматически с использованием следующей строки tinymce.get('my_editor_id').undoManager.undo();
0 голосов
/ 24 мая 2012

Я основал свое решение на идее Тариамы с отменой (THX). 

setup : function(ed) {
    ed.wps = {}; // my namespace container
    ed.wps.limitMceContent = function(ed) {
        if ((ed.wps.$textcanvas.height() + ed.wps.textcanvasDummyHeight) > ed.wps.iframeHeight) {
            ed.undoManager.undo();
        }
    };


    ed.onKeyDown.add(ed.wps.limitMceContent);
    ed.onChange.add(ed.wps.limitMceContent); // change is fired after paste too

    ed.onInit.add(function(ed) {
        // cache selectors and dimensions into namespace container
        ed.wps.$iframe = $("textarea.tinymce").next().find("iframe");
        ed.wps.iframeHeight = ed.wps.$iframe.height();
        ed.wps.$textcanvas = $(ed.wps.$iframe[0].contentDocument.body);
        ed.wps.textcanvasDummyHeight = parseInt(ed.wps.$textcanvas.css("marginTop"), 10) + parseInt(ed.wps.$textcanvas.css("marginBottom"), 10);
    });
}

Рабочая демоверсия . Работает на keyDown и paste. Проверено только в FF 12 и Chrome.

0 голосов
/ 28 марта 2012

Это сложный вопрос, насколько я знаю, в TinyMCE Api нет возможности сделать это.Вы можете попытаться настроить iFrame, созданный TineMCE.

By: 

function iFrameConfig() {
    var iFrame = document.getElementById('textareaid_ifr');
    iFrame.setAttribute('scrolling', 'no');
    iFrame.style.width = '300px';   
    iFrame.style.height = '600px';
}
...