Is this possible to set the language in tinymce editor in javascript?

怎甘沉沦 提交于 2019-12-10 17:32:59

问题


I have using tinymce text edit for my asp.net applications.Now i have added language pack.now i want to set the language pack for the text editor programatically.And also hide the language pack bar from the visible state.

for example : i want to programatically set the language of the text editior is hindi.Pleasr guide me to get out of this...

whenever user clicks translation Button in my web form , i have initialized this string variable.then i want to set the tinymce editor language programatically.

string lang="Hindi";

ptp.js

function LoadTypePad()
{
    // Initialize pad

    tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        skin : "o2k7",
        skin_variant : "silver",
        plugins : "safari,style,table,advhr,advimage,advlink,inlinepopups,insertdatetime,preview,media,searchreplace,print,paste,fullscreen,indicime,aksharspellchecker",

        // Theme options
        theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontsizeselect,fontselect,aksharspellchecker,indicime, indicimehelp",
        theme_advanced_buttons2 : "selectall,cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,media,advhr,|,print",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
        spellchecker_rpc_url:"http://service.vishalon.net/spellchecker.aspx",
        // Example content CSS (should be your site CSS)
        content_css : "css/content.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "lists/template_list.js",
        external_link_list_url : "lists/link_list.js",
        external_image_list_url : "lists/image_list.js",
        media_external_list_url : "lists/media_list.js",
        width : "100%",
        init_instance_callback : "afterInit"
    });
}

function showPleaseWait()
{
    var mainMessage = document.getElementById("message").innerHTML;
    document.getElementById("message").innerHTML = pleaseWait;
    pleaseWait = mainMessage;
}

// This function finds absolute position of the element in screen and returns array.
function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return [curleft,curtop];
    }
}
// id= outer most id for show/hide. baseid = reference id for pointer
function showPopup(id, baseid)
{
    toggle_menu(id);
    var base = document.getElementById(baseid);
    var l = findPos(base);
    var obj = document.getElementById(id + 'content');
    var im = document.getElementById(id + 'img');
    var left = im.src.indexOf('left.gif') > 0;

    obj.style.top = (l[1] - obj.offsetHeight - 20) + "px";
    obj.style.left = (l[0] + (base.offsetWidth/2) - (left?obj.offsetWidth:0)) + "px";

    l = findPos(obj);
    im.style.top = (l[1] + obj.offsetHeight - 1) + "px";
    im.style.left = (l[0] + (left?obj.offsetWidth - 26:0)) + "px";
}

function closePopup()
{
    // hide popup
    var elem = document.getElementById("step1");
    elem.style.display = "none";
    elem = document.getElementById("step2");
    elem.style.display = "none";
    elem = document.getElementById("step3");
    elem.style.display = "none";
}
// Once tinymce is fully loaded
function afterInit()
{
    // Find search string from referral
    var term = document.referrer;
    var re = /bengali|gujarati|gujrati|hindi|marathi|devnagari|devanagari|punjabi|gurmukhi|kannada|malayalam|tamil|telugu|thelugu|thamil/gi ; 
    var m = re.exec(term);
    var result ='';
    if (m != null && m.length > 0)
        result = "<strong>" + m[0] + "</strong>";
    else
        result = "your favourite Indic Script";
    // Create popup
    CreatePopup("step1", "Step 1", "Click here to erase existing contents", "right");
    CreatePopup("step2", "Step 2", "Select " + result + " from this dropdown list and start typing.", "left");
    CreatePopup("step3", "Step 3", "Click here to get a help for typing once you selected script in Step 2", "right");

    // Restore the message from please wait to spell checker
    document.getElementById("message").innerHTML = "Now Akshar Spell Checker for Gujarati is available!!! Click on <img src=\"tiny_mce/plugins/aksharspellchecker/img/aksharspellchecker.gif\"> to check Gujarati spelling";

    // Initialize for google search
    pph = new PramukhPhoneticHandler();
    pph.convertToIndicIME("q");
    pph.onScriptChange("q", indicChange);

    // Open up popups
    showPopup("step1","elm1_newdocument");
    showPopup("step2","elm1_indicime");
    showPopup("step3","elm1_indicimehelp");

    // Close popup after xx seconds.
    setTimeout("closePopup();",15000);
}

function toggle_menu(id)
{
    var elem = document.getElementById(id);
    elem.style.display = elem.style.display=="none"? "":"none";
}

function CheckNewVersion()
{
    var JSONRequest = tinymce.util.JSONRequest;
    try {
        netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
    } catch (e) {
// do nothing
    }
    JSONRequest.sendRPC({
            url : "http://service.vishalon.net/pramukhtypepadmessage.aspx?v=2.5.00",
            method : "",
            params : "",
            type: "GET",
            success : function(r){
                var message = r.substring(r.indexOf(",")+1);
                if (message != "")
                    document.getElementById("message").innerHTML = "<img src='img/info.jpg' >" + message + "<br><br>";
                },
                error : function(e, x) {
                    // do nothing 
                }
            });
}
function indicChange(id, lang)
{
    var s = document.getElementById('language');
    s.value = lang;
    if (lang == null || lang == "")
        lang = 'english';
    pph.setScript(id, lang);
}
function CreatePopup(id, title,content, dir)
{
    var holder = document.getElementById("plholder");
    holder.innerHTML += "<div id='" +id + "' style='display:none;'>"+
        "<div class='popupbody' id='" +id + "content'>" +
    "<div style='float:right;'><img src='img/close.gif' style='cursor:pointer;cursor:hand;' onclick='toggle_menu(\"" + id + "\");'/></div>"+
    "<div><strong>" + title + "</strong></div>"+
    "<div style='clear:both'></div>"+
    "<div>" + content + "</div>"+
    "</div>"+
    "<img src='img/" + dir + ".gif' id='" + id + "img' style='position:absolute;'/>"+
    "</div>";
}

var pph, pleaseWait = "Please wait while Pramukh Type Pad is loading... <img src='img/progress.gif' /> &nbsp;&nbsp;(Loading problem??? Get <a href=\"pramukhlibex.htm\">Simple Pramukh Type Pad</a> )";

回答1:


You have to download your language pack and unzip it.
Then you have to put every single js file in the corresponding folder of your tinymce folder.
You have to specify the language as well.
If you're using TinyMCE - jQuery Plugin you have to do something like this:

// Initializes all textareas with the tinymce class
$(document).ready(function() {
   $('textarea.tinymce').tinymce({
      script_url : '../js/tinymce/jscripts/tiny_mce/tiny_mce.js',
      theme : "advanced",
      language: "hi",
      ...
   });
});

If you want to remove tinyMCE (and I guess you have to do it if you want to reset the language) from your text-area you can use this code:

tinyMCE.execCommand('mceRemoveControl', false, 'mycontrol_id');

as specified here.

and you can recreate it using the same code. You can wrap everything in a function and pass the language parameter:

function setup(language) {
   tinyMCE.init({
      mode : "textareas",
      theme : "advanced",
      language: language,
      plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
      theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
      theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
      theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
      theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
      theme_advanced_toolbar_location : "top",
      theme_advanced_toolbar_align : "left",
      theme_advanced_statusbar_location : "bottom",
      theme_advanced_resizing : true
   });
}

If you want to remove buttons from the toolbar you have to work on these lines:

theme_advanced_buttons1 
theme_advanced_buttons2
...

removing those you don't need.
There's a list of all buttons and plugins here.
If you want to add your own buttons you can find a sample here.

UPDATE:

Since you've used your own plugin, I guess you have defined it in the plugin section:

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    language: 'hi',
    plugins : "myPlugin, pagebreak ... ",
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "myPlugin",
    ...
    });

If you don't want to show it, just remove it from the theme_advanced_buttons2.



来源:https://stackoverflow.com/questions/10929006/is-this-possible-to-set-the-language-in-tinymce-editor-in-javascript

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!