这可以在javascript的tinymce编辑器中设置语言吗? [英] Is this possible to set the language in tinymce editor in javascript?

问题描述

我在asp.net应用程序中使用了tinymce文本编辑.现在我添加了语言包.现在我想以编程方式为文本编辑器设置语言包.还要从可见状态隐藏语言包栏. /p>

例如:我想以编程方式设置文本编辑器的语言是印地文.请指导我摆脱此问题...

每当用户单击Web表单中的translation Button时，我都会初始化此字符串变量.然后，我要以编程方式设置tinymce编辑器语言.

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> )";

解决方案

您必须下载语言.
如果您使用的是 TinyMCE-jQuery插件，则必须执行以下操作:

// 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",
      ...
   });
});

如果要从文本区域中删除tinyMCE(我想如果要重置语言，则必须这样做)，可以使用以下代码:

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

在此处指定.

，您可以使用相同的代码重新创建它. 您可以将所有内容包装在一个函数中并传递language参数:

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
   });
}

如果您要从工具栏中删除按钮，则必须进行操作这些行:

theme_advanced_buttons1 
theme_advanced_buttons2
...

删除不需要的内容.
在此处..
如果要添加自己的按钮，可以在此处找到示例.

更新:

由于您使用了自己的插件，所以我想您已经在插件部分中对其进行了定义:

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",
    ...
    });

如果不想显示它，只需将其从 theme_advanced_buttons2 中删除.

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> )";

解决方案

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.

这篇关于这可以在javascript的tinymce编辑器中设置语言吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！