JavaScript Tutorial/Dojo toolkit/Text Editor

Материал из Web эксперт
Перейти к: навигация, поиск

Create text editor declaratively

<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.Editor");
    </script>
  </head>
  <body class="tundra">
        <div>
          <textarea name="field" width="200px" height="100px"
            dojoType="dijit.Editor">
            dijit.Editor
          </textarea>
        </div>
  </body>
</html>


Get data from editor

<html>
  <head>
    <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
            dojo.require("dojo.parser");
            dojo.require("dijit.form.Button");
            dojo.require("dijit.Editor");
    </script>
  </head>
  <body class="tundra">
    <div style="margin:5px;background:#eee; height: 400px; width:525px">
        <div id="editor" height="375px" dojoType="dijit.Editor">
            data
            
        </div>
    </div>
    <button dojoType="dijit.form.Button">Save
        <script type="dojo/method" event="onClick" args="evt">
            alert(dijit.byId("editor").getValue(  ));
        </script>
    </button>
    <button dojoType="dijit.form.Button">Clear
        <script type="dojo/method" event="onClick" args="evt">
            dijit.byId("editor").replaceValue("");
        </script>
    </button>
  </body>
</html>


Replace value in Text Editor

<html>
  <head>
    <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
            dojo.require("dojo.parser");
            dojo.require("dijit.form.Button");
            dojo.require("dijit.Editor");
    </script>
  </head>
  <body class="tundra">
    <div style="margin:5px;background:#eee; height: 400px; width:525px">
        <div id="editor" height="375px" dojoType="dijit.Editor">
            data
            
        </div>
    </div>
    <button dojoType="dijit.form.Button">Save
        <script type="dojo/method" event="onClick" args="evt">
            alert(dijit.byId("editor").getValue(  ));
        </script>
    </button>
    <button dojoType="dijit.form.Button">Clear
        <script type="dojo/method" event="onClick" args="evt">
            dijit.byId("editor").replaceValue("");
        </script>
    </button>
  </body>
</html>


Set dijit.form.TextBox propercase=true

<html>
  <head>
    <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
            dojo.require("dojo.parser");
            dojo.require("dijit.form.TextBox");
            function help() {
                var msg="Help";
                alert(msg);
                return false;
            }
            function validate(){
                var f = document.getElementById("registration_form");
                if (f.first.value == "" ||f.last.value == "" ||f.email.value == "") {
                        alert("All fields are required.");
                        return false;
                }
                return true;
            }
    </script>
  </head>
  <body class="tundra">
      <form id="registration_form"
            onsubmit="javascript:return validate()"
            action="">
            First Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="first"><br>
            Last Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="last"><br>
            Your Email:<input dojoType="dijit.form.TextBox" length=25 name="email"><br>
            <button type="submit">Sign Up!</button>
            <button type="reset">Reset</button>
            <button type="button" onclick="javascript:help()">Help</button>
      </form>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Dojo_toolkit/Text_Editor&oldid=8635»