function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
BJamesBJames 

Dojo

Anyone out there have any information they can share about using the Dojo Toolkit in an scontrol?

Specifically I'm attempting to use the editor widget and I have the dojo.js file installed as a document and I'm referencing it via the document URL.  However I cannot seem to get it recognized and rendered... 

Any ideas?

-=Bryan

DevAngelDevAngel
Did you start off with an editor sample?  If not you should and swap out the "content" fetch and save for API calls.
DevAngelDevAngel
So, I played with the editor a bit today and got it working ok.

What you need to do is first get the editor up and running. This code should work (assuming you have the dojo.js in the right place.

Code:
<!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>
    <title>Dojo Samples</title>
<script type="text/javascript"> 
    var djConfig = {isDebug: true};
</script>
<script src="https://www.salesforce.com/services/lib/ajax/beta3.3/sforceclient.js—browser=true" type="text/javascript"></script>
<script type="text/javascript" src="../../../dojo.js.uncompressed.js"></script>
<script type="text/javascript">

dojo.provide("dojo.widget.TreeController");

dojo.require("dojo.widget.Editor");
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.ResizeHandle");

dojo.hostenv.writeIncludes();
/*
    To test this you need to have two fields on your object (depending on your needs) one to hold
    the content without markup, and another to hold the content with markup.  In my case, I added
    two fields to the lead object, bigText and bigTextMarkedUp.  I have a lead Id hardcoded so that
    I can run this outside of the salesforce.com UI.
*/
var editor;
var bean;
var leadId = "00Q30000005qYNl";

dojo.addOnLoad(function() {

    setup = function() {
        
        //Get an object to edit
        bean = sforceClient.retrieve("bigText__c, bigTextMarkedUp__c", "Lead", [leadId])[0];
        var content = bean.get("bigText__c");
        var contentMU = bean.get("bigTextMarkedUp__c");
        var c = "";
        if (contentMU == null || contentMU == 0) {
            if (content != null && contentMU.length > 0) {
                c = content;
            }
        } else {
            c = contentMU;
        }
        
        //Set the inner html of the div BEFORE creating the widget.
        dojo.byId("editor").innerHTML = c;
        
        editor = dojo.widget.fromScript("Editor", {content: c}, dojo.byId("editor"));    
        dojo.event.connect(editor, "onSave", "handleSave");
    }

    sforceClient.registerInitCallback(setup);
    sforceClient.useCookies = true;
    sforceClient.init(null, null, true);
});

function handleSave(e) {
    bean.set("bigText__c", stripMarkup(e.getHtml()));
    bean.set("bigTextMarkedUp__c", editor.getEditorContent());
    bean.save();
    e.enableToolbar();
    return true;
}

function stripMarkup(html) {
    var openTag = /<[^>]*>/g;
    var closeTag = /<\/[^>]*>/g;
    html = html.replace(openTag, "");
    html = html.replace(closeTag, "");
    return html;
}

function btnShowUnformatted_onclick() {
    debugger;
    alert(stripMarkup(editor.getHtml()));
}
    
function btnWithMarkup_onclick() {
    alert(editor.getEditorContent());
}

</script>

</head>
<body>
    <input id="btnShowUnformatted" type="button" value="Show Without Markup" onclick="return btnShowUnformatted_onclick();" />
    <input id="btnWithMarkup" type="button" value="Show With Markup" onclick="return btnWithMarkup_onclick()" />

    <div id="editor" style="width: 627px; height: 276px; border-right: 2px solid; border-top: 2px solid; border-left: 2px solid; border-bottom: 2px solid;">
    </div>
</body>
</html>

 
BJamesBJames
Thank you for taking the time to construct this example! 

After building on what you posted, I discovered that one still needs access to a file system to use dojo via the dojo.require() method.  So since this sControl will live in our instance, dojo won't work.

I was wondering if there is a JavaScript HTML editor that you would recommend using within an sControl?

-=Bryan

Message Edited by BJames on 04-11-2006 02:17 PM
BJamesBJames
I uploaded a simple test that I got working locally in IE6 and FireFox,  into an sControl… and it seems that something is conflicting with the creation of this HTML editor.

The URL for the site this code comes from is here... http://www.unverse.net/using-whizzywig-web-pages.html

Code:
<html>
  <head>
    <title>whizzywig editor</title>
    <!-- <script type="text/javascript" src="whizzywig.js"></script> -->
    <script src="http://www.unverse.net/whizzery/whizzywig.js" type="text/javascript"></script>
  </head>
  <body>
    <form>
      <textarea id="edited" rows="20" cols="50"> this should be displayed </textarea>
      <script type="text/javascript">
        makeWhizzyWig("edited", "formatblock fontname fontsize newline bold italic underline | left center right | number bullet indent outdent | undo redo | color hilite rule | link image table | clean html");
      </script>
      <a onclick="syncTextarea(); alert(document.getElementById('edited').value);">get value</a>
    </form>
  </body>
</html>

I tried using an embedded document URL from Salesforce and a direct link of the js from the creators site.  Neither worked.

Ideas?
-=Bryan

--Update:  It works in Firefox but not IE6 on Salesforce.  IE6 is the customers platform.
--Would it be possible to use the HTML editor that I'm using to enter this message in an sControl?


Message Edited by BJames on 04-12-2006 08:47 AM
RichardC.ax220RichardC.ax220
Bryan,

Wikiwyg ( http://www.wikiwyg.net/ ) came in second to dojo when I was looking at
Javascript text editors. Jeroen Coumans looks at dojo, wikiwyg and others at
http://www.jeroencoumans.nl/journal/wysiwyg-text-editing-in-cms.
Happy hunting!

Richard