Ru-Board.club
← Вернуться в раздел «Web-программирование»

» редакторы BB кода или WYSIWYG

Автор: rtyug
Дата сообщения: 21.09.2009 06:23
а подскажите есть какой-то расширенный BB редатор или визуальный, НО чтобы там были тэги CODE и QUOTE ? с инструкцией?
так как на этом форуме?
(чтобы велосипед не изобретать)

я посмотрел исходники форума одного, но что-то не разобрался там не было инструкции
Автор: Delta RuBoard
Дата сообщения: 21.09.2009 08:51

Код:     <style>
            input.ed_buttons
            {
                background: #000000;
                width: 22px;
                border: 0px;
                height: 22px;
                cursor: hand;
                border: 1px dotted b0b0b0;
                margin-bottom: 3px;
                font-face: Verdana;
                font-size: 17px;
                font-weight: bold;
                color: red;
            }
    </style>
            
    <script>
    // Load Quicktags JavaScript
        var edButtons = new Array();
        var edSmiles = new Array();
        var edOpenTags = new Array();
    
        function edButton(id, display, tagStart, tagEnd, access, open, image) {
            this.id = id;                // used to name the toolbar button
            this.display = display;        // label on button
            this.tagStart = tagStart;     // open tag
            this.tagEnd = tagEnd;        // close tag
            this.access = access;        // access key
            this.open = open;            // set to -1 if tag does not need to be closed
            this.image = image;            // set to -1 if tag does not need to be closed
        }
        function edSmile(id, title) {
            this.id = id;                // used to name the toolbar button
            this.title = title;                // used to name the toolbar button
        }
    
        // Start code
        function edShowButton(button, i) {
            if (button.id == 'ed_img') {
                document.write('<input type="button" style="background: url(templates/default/img/buttons/' + button.image + '.gif);" id="' + button.id + '" accesskey="' + button.access + '" class="ed_buttons" onclick="edInsertImage(edCanvas);"> ');
                document.write(' <span style="font-size: 20px; color: e0e0e0;">|</span> ');
            }
            else if (button.id == 'ed_link') {
                document.write('<input type="button" style="background: url(templates/default/img/buttons/' + button.image + '.gif);" id="' + button.id + '" accesskey="' + button.access + '" class="ed_buttons" onclick="edInsertLink(edCanvas, ' + i + ');"> ');
            }
            else {
                document.write('<input type="button" style="background: url(templates/default/img/buttons/' + button.image + '.gif);" id="' + button.id + '" accesskey="' + button.access + '" class="ed_buttons" onclick="edInsertTag(edCanvas, ' + i + ');" > ');
                if (button.id == 'u' || button.id == 'right' || button.id == 'quote')
                    document.write(' <span style="font-size: 20px; color: e0e0e0;">|</span> ');
            }
        }
    
        function edShowSmile(smile, i) {
            document.write('<td width=40 style="border: 1px dotted #c0c0c0;" nowrap align="center" valign="center" onclick="edInsertContent(edCanvas, \'' + smile.title + '\');"><img src="templates/default/img/smiles/' + smile.id + '.gif" title="' + smile.title + '" id="' + smile.title + '"></td>');
            if ((i+1)%4 == 0 && (i+1) != 36)
            document.write('</tr><tr height=40>');
        }
        
        function edAddTag(button) {
            if (edButtons[button].tagEnd != '') {
                edOpenTags[edOpenTags.length] = button;
                document.getElementById(edButtons[button].id).value = 'X' + document.getElementById(edButtons[button].id).value;
            }
        }
    
        function edRemoveTag(button) {
            for (i = 0; i < edOpenTags.length; i++) {
                if (edOpenTags == button) {
                    edOpenTags.splice(i, 1);
                    document.getElementById(edButtons[button].id).value = document.getElementById(edButtons[button].id).value.replace('X', '');
                }
            }
        }
    
        function edCheckOpenTags(button) {
            var tag = 0;
            for (i = 0; i < edOpenTags.length; i++) {
                if (edOpenTags[i] == button) {
                    tag++;
                }
            }
            if (tag > 0) {
                return true; // tag found
            }
            else {
                return false; // tag not found
            }
        }    
    
        function edCloseAllTags() {
            var count = edOpenTags.length;
            for (o = 0; o < count; o++) {
                edInsertTag(edCanvas, edOpenTags[edOpenTags.length - 1]);
            }
        }
    
        function edToolbar() {
            document.write('<span id="ed_comment_toolbar">');
            for (i = 0; i < edButtons.length; i++) {
                edShowButton(edButtons[i], i);
            }
            document.write('<input type="button" id="ed_close" style="background: url(templates/default/img/buttons/close.gif);" class="ed_buttons" onclick="edCloseAllTags();" title="Close all open tags" >');
            document.write('</span>');
        }
        
        function edSmilesbar() {
            document.write('<span id="ed_Smiles_toolbar">');
            for (i = 0; i < edSmiles.length; i++) {
                edShowSmile(edSmiles[i], i);
            }
            document.write('</span>');
        }
        // insertion code
    
        function edInsertTag(myField, i) {
            //IE support
            if (document.selection) {
                myField.focus();
             sel = document.selection.createRange();
                if (sel.text.length > 0) {
                    sel.text = edButtons[i].tagStart + sel.text + edButtons[i].tagEnd;
                }
                else {
                    if (!edCheckOpenTags(i) || edButtons[i].tagEnd == '') {
                        sel.text = edButtons[i].tagStart;
                        edAddTag(i);
                    }
                    else {
                        sel.text = edButtons[i].tagEnd;
                        edRemoveTag(i);
                    }
                }
                myField.focus();
            }
            //MOZILLA/NETSCAPE support
            else if (myField.selectionStart || myField.selectionStart == '0') {
                var startPos = myField.selectionStart;
                var endPos = myField.selectionEnd;
                var cursorPos = endPos;
                var scrollTop = myField.scrollTop;
    
                if (startPos != endPos) {
                    myField.value = myField.value.substring(0, startPos)
                     + edButtons[i].tagStart
                     + myField.value.substring(startPos, endPos)
                     + edButtons[i].tagEnd
                     + myField.value.substring(endPos, myField.value.length);
                    cursorPos += edButtons[i].tagStart.length + edButtons[i].tagEnd.length;
                }
                else {
                    if (!edCheckOpenTags(i) || edButtons[i].tagEnd == '') {
                        myField.value = myField.value.substring(0, startPos)
                         + edButtons[i].tagStart
                         + myField.value.substring(endPos, myField.value.length);
                        edAddTag(i);
                        cursorPos = startPos + edButtons[i].tagStart.length;
                    }
                    else {
                        myField.value = myField.value.substring(0, startPos)
                         + edButtons[i].tagEnd
                         + myField.value.substring(endPos, myField.value.length);
                        edRemoveTag(i);
                        cursorPos = startPos + edButtons[i].tagEnd.length;
                    }
                }
                myField.focus();
                myField.selectionStart = cursorPos;
                myField.selectionEnd = cursorPos;
                myField.scrollTop = scrollTop;
            }
            else {
                if (!edCheckOpenTags(i) || edButtons[i].tagEnd == '') {
                    myField.value += edButtons[i].tagStart;
                    edAddTag(i);
                }
                else {
                    myField.value += edButtons[i].tagEnd;
                    edRemoveTag(i);
                }
                myField.focus();
            }
        }
    
        function edInsertContent(myField, myValue) {
            //IE support
            if (document.selection) {
                myField.focus();
                sel = document.selection.createRange();
                sel.text = myValue;
                myField.focus();
            }
            //MOZILLA/NETSCAPE support
            else if (myField.selectionStart || myField.selectionStart == '0') {
                var startPos = myField.selectionStart;
                var endPos = myField.selectionEnd;
                myField.value = myField.value.substring(0, startPos)
                 + myValue
         + myField.value.substring(endPos, myField.value.length);
                myField.focus();
                myField.selectionStart = startPos + myValue.length;
                myField.selectionEnd = startPos + myValue.length;
            } else {
                myField.value += myValue;
                myField.focus();
            }
        }
    
        function edInsertLink(myField, i, defaultValue) {
            if (!defaultValue) {
                defaultValue = 'http://';
            }
            if (!edCheckOpenTags(i)) {
                var URL = prompt('Введите ссылку:' ,defaultValue);
                if (URL) {
                    
                    var URL_NAME = prompt('Введите название ссылки' ,'');
                    if (!URL_NAME) {
                        URL_NAME = 'URL';
                    }
                    edButtons[i].tagStart = '[url name=' + URL_NAME + ']' + URL + '[/url]';
                    edInsertTag(myField, i);
                }
            }
            else {
                edInsertTag(myField, i);
            }
        }
    
        function edInsertImage(myField) {
            var myValue = prompt('Enter the URL of the image', 'http://');
            if (myValue) {
                myValue = ' ';
                edInsertContent(myField, myValue);
            }
        }
    </script>
    
    <form action="?go=add_replay&t=<? echo $topic_id;?>" method="post" name="post" id="commentform">
            <!-- BEGIN - LMB^Box Comment Quicktags Version 2.4 - Display //-->
            <span id="comment_quicktags">
                <script type="text/javascript" language="javascript">
                <!--
                    edButtons[edButtons.length] = new edButton('b','B','','','b','','bold');
                    edButtons[edButtons.length] = new edButton('i','I','[i]','
','i','','italic');
                    edButtons[edButtons.length] = new edButton('u','U','','','u','','underline');
                    
                    edButtons[edButtons.length] = new edButton('left','LEFT','[left]','[/left]','left','','justifyleft');
                    edButtons[edButtons.length] = new edButton('center','center','
','
','center','','justifycenter');
                    edButtons[edButtons.length] = new edButton('right','right','[right]','[/right]','right','','justifyright');
                    
                    edButtons[edButtons.length] = new edButton('ed_link','Link','','','a','','createlink');
                    edButtons[edButtons.length] = new edButton('ed_img','Image','','','','','insertimage');
                    
                    edButtons[edButtons.length] = new edButton('code','Code','
Код: ','
Автор: rtyug
Дата сообщения: 21.09.2009 16:54
ну тэг code мне нужно показать другим цветом на странице, правильно?

в php надо code заменить на тэг HTML чтобы серым цветом фон сделать?
Автор: Delta RuBoard
Дата сообщения: 21.09.2009 17:46
ты еврей?

Добавлено:
aa, допер что ты хочешь, вроде как
http://sau.su/8d52f2d3668af86399cb8c1bde5da8e4/bb.zip
это ложиш в корневую папку. там в папочке BB есть демо и описание
Автор: andead
Дата сообщения: 22.09.2009 00:12
http://markitup.jaysalvat.com/examples/bbcode/
Автор: rtyug
Дата сообщения: 08.11.2009 03:32
Все таки мне приспичело остановиться на визуальном редакторе TinyMCE

НО напимер есть у меня статьи с BB кодом

можно ли совмещать BB и TinyMCE?



например я введу ВВ код в TinyMCE отправлю его в скрипт, скрипт перед вставкой MySQL преобразует из BB в HTML правильно (HTML оставляет)? а если нужно откорректирвоать сообщение, то он преобразует обратно из HTML и BB? или это не получиться?

еще я не где не нашел и никто не знает как вставить ['code'] тэг и "квоту"

чтобы тэг код преобразовывлся в таблицу

в скрипте выполнить и обратно при редактировании этого скрипта
['code'] -> <table bla-bla-bla >
['/code'] -> </table>

и если мне нужно разукрашивать код ЯП еще автоматически....


правильно? или я путаюсь? как это работает? обясните


===

кстате, нужно ли вырезать плогие и опасные тэги или их можно экранировать?

Автор: rtyug
Дата сообщения: 08.11.2009 13:55
а подскажите как сделать чтобы код был в таблице HTML с рамочкой какого-то цвета?

['code'] -> <table bla-bla-bla >
['/code'] -> </table>

нужно перевести в скрипте с BB в HTML , а при редактировани обратно перевести c HTML в BB в редактор?

это правильно

Добавлено:
если внутри в ['code'] будут таблицы еще какие-то ? то тогда как?
Автор: rtyug
Дата сообщения: 18.11.2009 20:13


подскажите пожалуйста, например хотел:

написаН текст в визуальном редакторе, нужно нажать на кнопку CODE и чтобы этот текст был в тэгах /code и чтобы было видно сами тэги в визуальном редакторе...

правильно? такая схема сделанная в vBulletin®

как эти кнопки поставить?

я кажется понял, просто найти сейчас и понять не могу....
если не сложно, то подскажите....
Автор: rtyug
Дата сообщения: 20.11.2009 11:29

Цитата:
http://markitup.jaysalvat.com/examples/bbcode/

andead

подскажите, пожалуйста есть ли еще?

я не могу найти, в этот просто реклама ставиться...


Добавлено:
нету
http://www.google.com.ua/#hl=uk&q=bb+%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80&start=10&sa=N&fp=bf5056a779b927eb

Добавлено:
вот нашел еще, но они слабые:
и в некотрых документаций нету

http://source.virtser.net/
http://pastebin.com/d7ab5ac8a
http://habrahabr.ru/blogs/jquery/70174/#habracut
http://www.recoilme.ru/ninja/editor

http://plugins.jquery.com/project/osimo-bbcode-editor
http://plugins.jquery.com/project/bbcode-editor



или ладно, я остановлюсь на markItUp
Автор: rtyug
Дата сообщения: 30.11.2009 16:09
andead

вот я поставил


Код:
<tr>
<td colspan="3">
<textarea id="markItUp" rows="50" cols="120" name="content_text"><TMPL_VAR NAME="text_co_current"></textarea>
</td>
</tr>
Автор: rtyug
Дата сообщения: 01.12.2009 12:24
andead

в предыдущем после проблема все таки есть такая которую я там описал


я правильно все сделал? почему именно с редатора текст не передается?

посмотрите пожалуйста, у вас так было?


Цитата:
dfdf
Автор: rtyug
Дата сообщения: 01.12.2009 16:40
http://www.phpcow.com/smartmarkup/documentation

с этим редатором такое же

параметр в textarea в которой текст не передается....

[more]
<tr>
<td colspan="3">


<textarea name="html" id="html" cols="60" rows="12" ><TMPL_VAR NAME="text_co_current"></textarea>
</td>
</tr>









<tr>
<td> <br> </td>
</tr>

<tr class="left_menu_black">
<td>Вернутся сюда:</td>
<td><input class="flat" type="checkbox" name="type_redirect" /></td>
</tr>

<tr>
<td colspan="3" class="hlp_center"><input class="button" type="submit" name="s" value="Edit content" /></td>
</tr>
<tr>

</tr>


</form>





<script type="text/javascript" src="/smarkup/smarkup.js"></script>
<script type="text/javascript" src="/smarkup/conf/html/conf.js"></script>
<script type="text/javascript">
    SMarkUp.bind(
        'html', //textarea id
        'html', //makup configuration name
        300        //height of textarea
    );
</script>
<script type="text/javascript">
    var remove = document.getElementById('remove');
    remove.onclick = function() {
        if (this.rel == 'on') {
            this.innerHTML = 'Return SmartMarkUP Back';
            this.rel = 'off';
            var textarea = SMarkUp.getInstance('html');
            textarea.remove();
        } else {
            this.innerHTML = 'Remove SmartMarkUP';
            this.rel = 'on';
            SMarkUp.bind(
                'html', //textarea id
                'html', //makup configuration name
                300        //height of textarea
            );
        }
        return false;
    };
</script>[/more]



использовал ли кто-то такие редаторы?

я хотел просто красивый редактор поставить....
Автор: andead
Дата сообщения: 01.12.2009 16:53
rtyug
ссылку на живой пример, и в будущем заключайте ваши листинги в тег more
Автор: rtyug
Дата сообщения: 01.12.2009 19:48


было из-за того что надо было закрыть таблицу и открыть внутри...


Код: </table>

<form name="create_admin" id="create_admin" method="post" action="/profile/edit_pesonal_content2">

<table>
Автор: rtyug
Дата сообщения: 04.12.2009 02:36

Цитата:
ссылку на живой пример, и в будущем заключайте ваши листинги в тег more


andead

отредактировал
Автор: vs6262
Дата сообщения: 28.02.2016 17:45
нужен JavaScript WYSIWYG едитор для композирования емаил с inline-Image и выборкой шрифтов функциями.

может кто подскажет какой WYSIWYG едитор для этих целей подойдет ?

заранее спасибо
Автор: vs6262
Дата сообщения: 04.03.2016 15:06
вопрос снят

решился к TinyMCE Editor
https://www.tinymce.com/

нужна только помощь как в TinyMCE Editor font-family и font-size в тулбаре ввязать ?
может кто поможет ?

заранее спасибо
Автор: vs6262
Дата сообщения: 07.03.2016 12:09
проблема решилась
Автор: Mavrikii
Дата сообщения: 29.04.2016 01:42
vs6262
на будущее - TinyMCE

Страницы: 1

Предыдущая тема: Название переменной совпадает с названием класса


Форум Ru-Board.club — поднят 15-09-2016 числа. Цель - сохранить наследие старого Ru-Board, истории становления российского интернета. Сделано для людей.