Question Cần giúp đỡ tạo 1 nút giống kiểu bbcode

Mình muốn trên thanh editor có 1 nút mà chức năng của nó như sau:
Khi bôi đen 1 đoạn văn bản và ấn vào nút đó thì nó sẽ có dạng

Mã:

$ đoạn văn bản $

Tức là đoạn văn bản đó kẹp giữa hai dấu đô la.
Các bác giúp em nhé.

 

HÌnh như cái MarkitUP có chức năng này nè @@

 

Bác nói cụ thể hơn được không

 

Bác tham khảo ở đây
http://vietxf.org/threads/hd-them-cac-button-cho-bbcode-o-thanh-editor.887/

 

Cảm ơn bác, nhưng đó k phải là ý của e. Ý của e là đoạn text bị bao quanh bởi $

 

Thì bác ấn button xong mới đánh văn bản

 

button ở đó là button bbcode, tức là có dạng

Mã:

[bbcode] nội dung [/bbcode]

nhưng cái em cần là

Mã:

$ nội dung $

cơ

 

Không biết là mình không hiểu ý bác hay là bác không đọc kỹ cái link mình vừa gửi?

 

Bác không hiểu ý em rồi.
Button đó là button bbcode, tức là khi ấn vào thì có dạng

Mã:

[bbcode] nội dung [/bbcode]

nhưng cái em cần là khi ấn vào có dạng

Mã:

$ nội dung $

 

thì thay bbcode bằng $. Bạn kia send link ko chịu tìm hiểu đã bảo ko phải

 

Bạn làm thế này nhé, đầu tiên làm theo hướng dẫn thêm button bbcode. Bạn thêm 1 nút như sau:

Mã:

tb.add(controlManager.createButton('xenforo_demo',
            { title: 'Demo', image : 'link ảnh', cmd: 'xenForoWrapBbCode', ui: false, value: '$' }));

Kết quả sẽ ra thế này:

Mã:

[$] Nội dung [/$]

Giờ bạn lên đầu file editor_template.js đó, tìm và sửa đoạn:

Mã:

            content = '[' + tag + ']'
            + selection.getContent().replace(/^<p>/, '').replace(/<\/p>$/, '')
            + '<span id="__xfBbCaret">_</span>'
            + '[/' + tag + ']';

Thành:

Mã:

        var xenStartTag = '[';
        var xenSlashTag = '[/';
        var xenEndTag = ']';
        if(tag == '$') {
            xenStartTag = ' ';
            xenSlashTag = ' ';
            xenEndTag = ' ';
        }
        content = xenStartTag + tag + xenEndTag
            + selection.getContent().replace(/^<p>/, '').replace(/<\/p>$/, '')
            + '<span id="__xfBbCaret">_</span>'
            + xenSlashTag + tag + xenEndTag;

 

^ À, em đã hiểu ý bác chủ thread Còn 2 cái ngoặc [ ] nữa

 

Tuyệt vời bác ạ, thanks bác rất rất rất nhiều !!!!

 

Bác darkghost ơi em hỏi chút.
Em đã làm theo bác và thành công.
Tuy nhiên khi em bôi đen 1, rồi chọn nút vừa tạo là 2 thì cái chữ AM bị xuống dòng (3).
Làm thế nào để nó không bị xuống dòng mà ở luôn dòng đó bác.
Em nghĩ là cái nút này tạo dựa trên nút quote của xenforo, khi bôi đen 1 đoạn và ấn vào nút quote cũng bị như thế, nhưng nút quote cần phải xuống dòng như thế cho tiện. Còn cái nút mà bác vừa hướng dẫn em làm em muốn nó không bị xuống.
Bác giúp em nhé

 

À, bạn sửa thêm thế này nhé:
Dưới đoạn:

Mã:

var xenStartTag = '[';
        var xenSlashTag = '[/';
        var xenEndTag = ']';

Thêm:

Mã:

        var xenPStart = '<p>';
        var xenPEnd = '</p>';

Sửa:

Mã:

        if(tag == '$') {
            xenStartTag = ' ';
            xenSlashTag = ' ';
            xenEndTag = ' ';
        }

Thành:

Mã:

        if(tag == '$') {
            xenStartTag = ' ';
            xenSlashTag = ' ';
            xenEndTag = ' ';
            xenPStart = '';
            xenPEnd = '';
        }

Kéo xuống 1 chút tìm:

Mã:

content = '<p>' + content + '</p>';

Sửa thành:

Mã:

content = xenPStart + content + xenPEnd;

Toàn bộ code sẽ trông như dưới đây là đã làm đúng

Mã:

var xenStartTag = '[';
        var xenSlashTag = '[/';
        var xenEndTag = ']';
        var xenPStart = '<p>';
        var xenPEnd = '</p>';
        if(tag == '$') {
            xenStartTag = ' ';
            xenSlashTag = ' ';
            xenEndTag = ' ';
            xenPStart = '';
            xenPEnd = '';
        }
        content = xenStartTag + tag + xenEndTag
            + selection.getContent().replace(/^<p>/, '').replace(/<\/p>$/, '')
            + '<span id="__xfBbCaret">_</span>'
            + xenSlashTag + tag + xenEndTag;
           
        content = xenPStart + content + xenPEnd;

 

Cảm ơn bác rất nhiều !!!! Bác giỏi quá. Một lần nữa cảm ơn bác !!!

 

Tiện thể hỏi bác câu nữa, em tham quá
Nếu em muốn tạo 1 nút khi ấn vào thì hiện cả hai bbcode thì như nào ạ?
Ví dụ. Em muốn nút đó khi ấn vào hiện cả hai bbcode là

Mã:

 [b][/b]

và

Mã:

 [color=blue] [/color] 

(vì hai thẻ này diễn đàn em rất rất hay dùng). Tức là thế này: Em bôi đen 1 đoạn văn, sau khi em ấn vào nút đó thì ở khung soạn thảo sẽ hiện

Mã:

 [b][color=blue] đoạn văn bản đã bôi đen [/b][/color] 

P/s: À hình như em đang dần hiểu ra vấn đề. Hay quá em đang suy nghĩ đoạn code bác viết.

 

Mở thẻ trước đóng thẻ sau chứ bác ơi. Mở [ b ] [ color ] thì fải đóng là [ /color ][ /b ] chứ.

Code demo cho pác đây:

Mã:

var xenStartTag = '[';
        var xenSlashTag = '[/';
        var xenEndTag = ']';
        var xenPStart = '<p>';
        var xenPEnd = '</p>';
        var tag2 = tag;
        if(tag == '$') {
            xenStartTag = ' ';
            xenSlashTag = ' ';
            xenEndTag = ' ';
            xenPStart = '';
            xenPEnd = '';
        } else if (tag == 'strongblue') {
            tag = 'b][color=blue';
            tag2 = 'color][/b';
            xenPStart = '';
            xenPEnd = '';
        }
        content = xenStartTag + tag + xenEndTag
            + selection.getContent().replace(/^<p>/, '').replace(/<\/p>$/, '')
            + '<span id="__xfBbCaret">_</span>'
            + xenSlashTag + tag2 + xenEndTag;
       
        content = xenPStart + content + xenPEnd;

Value của button thêm vào editor là strongblue trong ví dụ này nhé.

 

Tuyệt quá bác ạ. Không biết gì ngoài cảm ơn bác rất nhiều !!!

 

Bác darkghost ơi cho em hỏi : giờ em muốn tạo 1 hàng nữa (ở dưới 2 hàng mặc định của khung editor) để cho tất cả các nút em mới tạo nằm trong hàng đó thì làm thế nào ạ?