Xenforo Chèn công thức toán học trong xenforo

Thảo luận trong 'Forum PhpBB, vBullentin, Xenforo ...' bắt đầu bởi truongkienthuc, 23/2/14.

Loading...
  1. truongkienthuc

    truongkienthuc Administrator

    Như các bạn đã biết, đối với những diễn đàn chuyên về học tập như Diễn đàn trường kiến thức thì vấn đề gõ công thức toán học, vật lý là vấn đề rất cần thiết. Mình đi lòng vòng và tình cờ thu thập được cách hướng dẫn chèn công thức toán học trong xenforo từ cộng đồng mạng và chia sẻ để mọi người có thể chèn nó vào diễn đàn của mình.

    Demo trước nhỉ X-). Mấy bạn xem hình trước nha:
    [​IMG]
    Màn hình soạn thảo công thức toán học

    Nói sơ qua 1 chút nhỉ? Đây là bộ gõ công thức gần giống như mathtype nhưng dùng có khó hơn 1 chút, nhưng rất cần thiết cho các diễn đàn trao đổi học tập.
    • Sử dụng jquery để load nên nhìn rất mượt
    • Tự động chuyển sang bbcode, bạn chỉ việc copy and paste là Ok.
    Ok, Demo đã có, cơ bản đã nói qua, tiến hành cài đặt thôi nhỉ :;

    Bước 1: Nhìn file đính kèm của mình, download về máy và giải nén ra lun nhé. Sau đó kết nối hosting diễn đàn rồi úp vào thư mục js (Ngang hàng ngoài index.php).
    Bước 2: Vào templates -> Create new templates tên colorbox với nội dung code như sau:
    HTML:
    <link media="screen" rel="stylesheet" href="js/colorbox/colorbox.css" />
    <xen:require js="js/colorbox/jquery.colorbox.js" />
    <xen:require js="js/latex/editor.js" />
    <script type="text/javascript">
            $(document).ready(function(){
                //Examples of how to assign the ColorBox event to elements
                $(".group1").colorbox({rel:'group1'});
                $(".group2").colorbox({rel:'group2', transition:"fade"});
                $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
                $(".group4").colorbox({rel:'group4', slideshow:true});
                $(".ajax").colorbox();
                $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
                $(".iframe").colorbox({iframe:true, width:"90%", height:"90%"});
                            $(".latex").colorbox({iframe:true, width:"65%", height:"80%"});
                $(".inline").colorbox({inline:true, innerWidth:250,innerHeight:220});
                $(".callbacks").colorbox({
                    onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                    onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                    onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                    onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                    onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
                });
                //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function(){
                    $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                    return false;
                });
            });
        </script>
    Tiếp theo mở template PAGE_CONTAINER ra, tìm đến dòng:
    Mã:
    <xen:include template="page_container_js_head" />
    Enter xuống xòng và chèn bên dưới đoạn code sau:
    Mã:
    <xen:include template="colorbox" />
    Bước 3: Tạo file latex.html với nội dung sau rồi úp lên thư mục root (Ngang hàng với index.php)
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" type="text/css"
      href="js/latex/equation-embed.css" />
    
    <script type="text/javascript"
      src="js/latex/eq_config.js" ></script>
    <script type="text/javascript"
      src="js/latex/eq_editor-lite-11.js" ></script>
    </head>
    <div id="editor" align="center"></div>
    <p align="center"><img id="equation" /></p>
    <p align="center"><textarea id="testbox" rows="6" cols="80"></textarea></p>
    <p align="center">Copy phần dưới và dán vào bài viết</p>
    <p align="center"><textarea id="exportarea1" rows="4" cols="80"></textarea></p>
    <script type="text/javascript">
      EqEditor.embed('editor');
      var a=new EqTextArea('equation', 'testbox');
      EqEditor.add(a,false);
        a.addExportArea('exportarea1','phpBB');
    </script>
    <body>
    </body>
    </html>
    
    Bước 4: Bây giờ là gọi nó ra thôi, các bạn muốn đặt là text link hay button đều đc nhé, mình sẽ hướng dẫn đặt button cạnh những nút đăng chủ đề, hay lưu thay đổi khi edit bài và cạnh button thêm tùy chọn ở quick reply.
    - Thêm vào Create Threads
    Mở template thread_create và tìm
    HTML:
    <input type="button" value="{xen:phrase preview}..." class="button PreviewButton JsOnly" />
    Thêm bên dưới.
    Mã:
    <a class="latex" href="latex.html" title="Trình soạn thảo công thức"><input type="submit" value="Gõ công thức" accesskey="s" class="button primary" /></a>
    - Thêm vào Post edit
    Mở template post_edit tìm
    Mã:
    <input type="button" value="{xen:phrase preview}..." class="button PreviewButton JsOnly" />
    Thêm bên dưới
    Mã:
    <a class="latex" href="latex.html" title="Trình soạn thảo công thức"><input type="submit" value="Gõ công thức" accesskey="s" class="button primary" /></a>
    - Thêm vào quick reply
    Mở template quick_reply
    tìm
    Mã:
    <xen:include template="attachment_upload_button" />
    Thêm bên dưới
    Mã:
    <a class="latex" href="latex.html" title="Trình soạn thảo công thức"><input type="submit" value="Gõ công thức" accesskey="s" class="button primary" /></a>
    Nhớ lưu lại mọi tùy chỉnh bạn đã làm nhé, không thì mất công toi đó &-(

    Bước 5: Còn 1 bước cuối cùng nữa là tạo bbcode
    Vào bbcode manager -> Create new bbcode
    BBcode tag: tex
    ví dụ: [tex]x^2 + 3 = 5[/tex]
    Check Activate BB Code
    Simple Replacement Start:
    Mã:
    <img style="vertical-align: middle" src="http://latex.codecogs.com/png.latex?
    Simple Replacement End:
    Mã:
    "/>
    Vậy là xong, các bạn kiểm tra thử nhé, chỉ cần gõ xong rồi copy dán vào bài viết là ok.
    Nguồn gốc bài viết: Sưu tầm trên in tờ nét :banana:

    Các file đính kèm:

    Loading...

Chia sẻ trang này