Dijit Editor

最新推荐文章于 2022-03-07 11:13:26 发布

qingqingzijinxin

最新推荐文章于 2022-03-07 11:13:26 发布

阅读量610

点赞数

分类专栏： dojo学习文章标签： dojo dijit

dojo学习专栏收录该内容

29 篇文章 1 订阅

订阅专栏

Dijit Editor

Dijit's Editor widget is everything a developer looks for in a WYSIWYG (What-You-See-Is-What-You-Get) editor: flexible, themeable, and above all, functional.

`dijit/Editor` Properties and Methods

Important dijit/Editor properties include:

disabled - Represents if the Editor should be enabled or disabled
extraPlugins - An array of extra plugins to be added to the toolbar and available for use within the immediate Editor instance
focusOnLoad - Represents if the editor should be focused upon loading
name - Specifies the name of a (hidden) <textarea> node on the page that's used to save the editor content on page leave
plugins - The list of plugins to be available within the instance by default
toolbar - The Editor instance's toolbar object
value - The HTML content within the Editor instance

Important dijit/Editor methods include:

addPlugin(pluginName,index) - Adds a plugin to the editor instance
focus - Sets focus to the widget instance
get("value")/set("value","content") - These methods set the HTML content within the editor
redo/undo - These methods redo and undo recent edit actions

There are lots of important properties and methods but implementing the Dijit Editor is very simple.

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Demo: Basic Editor</title>
	<link rel="stylesheet" href="style.css" media="screen">
	<link rel="stylesheet" href="_common/demo.css" media="screen">
	<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
<h1>Demo: Basic Editor</h1>
<p>The following is the default editor, no special settings or plugins.</p>
<div data-dojo-type="dijit/Editor" ></div>
<!-- load dojo and provide config via data attribute -->
<script src="dojo/dojo.js" data-dojo-config="async: true,parseOnLoad: true"></script>
<script>
	// Include the class
	require(["dijit/Editor", "dojo/parser"]);
</script>
</body>
</html>

While the Editor displays numerous tools by default, it's very easy to choose which tools you'd like displaying and which you'd prefer not be available:

<div data-dojo-type="dijit/Editor"
    data-dojo-props="plugins:['bold','italic','|','cut','copy','paste','|','insertUnorderedList']"></div>

For the rest of the tutorial, we'll continue using the declarative approach, but it's quite simple to create one programmatically as well. The attributes that get set in the data-dojo-props are just passed through as an object to the constructor, along with a DOM node or an ID of a node to replace with the editor, like so:

<div style="width:700px;min-height:100px;" id="myEditor"></div>
<script>
    // Load the editor resource
    require(["dijit/Editor", "dojo/domReady!"], function(Editor){
        // Make our editor
        var editor = new Editor({
            plugins: ["bold","italic","|","cut","copy","paste","|","insertUnorderedList"]
        }, "myEditor");
        editor.startup();
    });
</script>

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Demo: Programmatic Editor</title>
	<link rel="stylesheet" href="style.css" media="screen">
	<link rel="stylesheet" href="_common/demo.css" media="screen">
	<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
<h1>Demo: Programmatic Editor</h1>
<p>The following Editor instance allows only a select few tools, and is created programmatically:</p>
<div style="width:700px;min-height:100px;" id="myEditor"></div>
<!-- load dojo and provide config via data attribute -->
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<!-- Notice that there's no parseOnLoad -->
<script>
	// Include the class
	require(["dijit/Editor", "dojo/domReady!"], function(Editor){
		// Make our editor
		var editor = new Editor({
			plugins: ["bold","italic","|","cut","copy","paste","|","insertUnorderedList"]
		}, "myEditor");

		editor.startup();
	});
</script>
</body>
</html>

Dijit Editor with extra plugins

To use these extra plugins, require their resources and add their "short names" to the extraPlugins setting:

Along with the the host of extra plugins within the dijit namespace, dojox/editor/plugins provides numerous additional plugins for Editor:

Short Name (add to extraPlugins list)	Resource
prettyprint	`dojox/editor/plugins/PrettyPrint`
pagebreak	`dojox/editor/plugins/PageBreak`
showblocknodes	`dojox/editor/plugins/ShowBlockNodes`
preview	`dojox/editor/plugins/Preview`
save	`dojox/editor/plugins/Save`
\|\| or toolbarlinebreak	`dojox/editor/plugins/ToolbarLineBreak`
normalizeindentoutdent	`dojox/editor/plugins/NormalizeIndentOutdent`
breadcrumb	`dojox/editor/plugins/Breadcrumb`
findreplace	`dojox/editor/plugins/FindReplace`
pastefromword	`dojox/editor/plugins/PasteFromWord`
insertanchor	`dojox/editor/plugins/InsertAnchor`
collapsibletoolbar	`dojox/editor/plugins/CollapsibleToolbar`
foreColor hiliteColor	`dojox/editor/plugins/TextColor`
blockquote	`dojox/editor/plugins/Blockquote`
smiley	`dojox/editor/plugins/Smiley`
uploadImage	`dojox/editor/plugins/UploadImage`

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Demo: Additional Dijit Plugins</title>
	<link rel="stylesheet" href="style.css" media="screen">
	<link rel="stylesheet" href="_common/demo.css" media="screen">
	<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
<h1>Demo: Additional Dijit Plugins</h1>
<div data-dojo-type="dijit/Editor" style="width:800px;min-height:100px;" data-dojo-props="extraPlugins:['foreColor','hiliteColor','|','createLink','insertImage','fullscreen','viewsource','newpage']">
	This is the <strong>default</strong> content.
</div>
<!-- load dojo and provide config via data attribute -->
<script src="dojo/dojo.js" data-dojo-config="async: true,parseOnLoad: true"></script>
<script>
	// Include the class
	require(["dijit/Editor", "dojo/parser", "dijit/_editor/plugins/TextColor", "dijit/_editor/plugins/LinkDialog", "dijit/_editor/plugins/FullScreen", "dijit/_editor/plugins/ViewSource", "dijit/_editor/plugins/NewPage"]);
</script>
</body>
</html>

Requiring these resources and adding their short names to the extraPlugins array will allow for these plugins to be used within an Editor instance:

<link rel="stylesheet" href="/js/dojox/editor/plugins/resources/css/PageBreak.css" />
<link rel="stylesheet" href="/js/dojox/editor/plugins/resources/css/ShowBlockNodes.css" />
<link rel="stylesheet" href="/js/dojox/editor/plugins/resources/css/Preview.css" />
<link rel="stylesheet" href="/js/dojox/editor/plugins/resources/css/Save.css" />
<link rel="stylesheet" href="/js/dojox/editor/plugins/resources/css/Breadcrumb.css" />
<link rel="stylesheet" href="/js/dojox/editor/plugins/resources/css/FindReplace.css" />
<link rel="stylesheet" href="/js/dojox/editor/plugins/resources/css/PasteFromWord.css" />
<link rel="stylesheet" href="/js/dojox/editor/plugins/resources/css/InsertAnchor.css" />
<link rel="stylesheet" href="/js/dojox/editor/plugins/resources/css/CollapsibleToolbar.css" />
<link rel="stylesheet" href="/js/dojox/editor/plugins/resources/css/Blockquote.css" />
<link rel="stylesheet" href="/js/dojox/editor/plugins/resources/css/Smiley.css" />

<script>
    // Include the class
    require([
        "dijit/Editor",
        "dojo/parser",
        "dojox/editor/plugins/PrettyPrint",
        "dojox/editor/plugins/PageBreak",
        "dojox/editor/plugins/ShowBlockNodes",
        "dojox/editor/plugins/Preview",
        "dojox/editor/plugins/Save",
        "dojox/editor/plugins/ToolbarLineBreak",
        "dojox/editor/plugins/NormalizeIndentOutdent",
        "dojox/editor/plugins/Breadcrumb",
        "dojox/editor/plugins/FindReplace",
        "dojox/editor/plugins/PasteFromWord",
        "dojox/editor/plugins/InsertAnchor",
        "dojox/editor/plugins/CollapsibleToolbar",
        "dojox/editor/plugins/TextColor",
        "dojox/editor/plugins/Blockquote",
        "dojox/editor/plugins/Smiley",
        "dojox/editor/plugins/UploadImage"
    ]);
</script>
<div data-dojo-type="dijit/Editor" style="width:800px;min-height:100px;" data-dojo-props="extraPlugins:['prettyprint','pagebreak','showblocknodes','preview','save','toolbarlinebreak','normalizeindentoutdent','breadcrumb','findreplace','pastefromword','insertanchor','collapsibletoolbar','foreColor', 'hiliteColor','blockquote','smiley','uploadImage']">
    This is the <strong>default</strong> content.
</div>

Many of the Editor plugins within the dojox namespace have their own stylesheet, so don't forget to check the dojox/editor/plugins/resources folder to see if the given plugin has one. Note that in production, you would typically combine your CSS resources into a single CSS file @import rules, and allow the Dojo build system to combine your CSS files into a single file.

With the number of plugins and functionality baked right into dijit/Editor, this widget can match up with, if not surpass, any of the WYSIWYG editors on the web!

Conclusion

Dijit's Editor widget is a flexible, functional widget that allows users to create richly formatted content. Editor comes standard with numerous useful tools but provides even more powerful plugins within dojox/editor/plugins. There's no need to look outside of Dojo to find a WYSIWYG editor for your application — it's already there

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Demo: Additional DojoX Plugins</title>
	<link rel="stylesheet" href="style.css" media="screen">
	<link rel="stylesheet" href="../../_common/demo.css" media="screen">
	<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
	<link rel="stylesheet" href="dojox/editor/plugins/resources/editorPlugins.css" />
	<link rel="stylesheet" href="dojox/editor/plugins/resources/css/PageBreak.css" />
	<link rel="stylesheet" href="dojox/editor/plugins/resources/css/ShowBlockNodes.css" />
	<link rel="stylesheet" href="dojox/editor/plugins/resources/css/Preview.css" />
	<link rel="stylesheet" href="dojox/editor/plugins/resources/css/Save.css" />
	<link rel="stylesheet" href="dojox/editor/plugins/resources/css/Breadcrumb.css" />
	<link rel="stylesheet" href="dojox/editor/plugins/resources/css/FindReplace.css" />
	<link rel="stylesheet" href="dojox/editor/plugins/resources/css/PasteFromWord.css" />
	<link rel="stylesheet" href="dojox/editor/plugins/resources/css/InsertAnchor.css" />
	<link rel="stylesheet" href="dojox/editor/plugins/resources/css/CollapsibleToolbar.css" />
	<link rel="stylesheet" href="dojox/editor/plugins/resources/css/Blockquote.css" />
	<link rel="stylesheet" href="dojox/editor/plugins/resources/css/Smiley.css" />
</head>
<body class="claro">
<h1>Demo: Additional DojoX Plugins</h1>
<div data-dojo-type="dijit/Editor" style="width:800px;min-height:100px;" data-dojo-props="extraPlugins:['prettyprint','pagebreak','showblocknodes','preview','save','toolbarlinebreak','normalizeindentoutdent','breadcrumb','findreplace','pastefromword','insertanchor','collapsibletoolbar','foreColor', 'hiliteColor','blockquote','smiley','uploadImage']">
	This is the <strong>default</strong> content.
</div>
<!-- load dojo and provide config via data attribute -->
<script src="dojo/dojo.js" data-dojo-config="async: true,parseOnLoad: true"></script>
<script>
	// Include the class
	require(["dijit/Editor", "dojo/parser",
		"dojox/editor/plugins/PrettyPrint",
		"dojox/editor/plugins/PageBreak",
		"dojox/editor/plugins/ShowBlockNodes",
		"dojox/editor/plugins/Preview",
		"dojox/editor/plugins/Save",
		"dojox/editor/plugins/ToolbarLineBreak",
		"dojox/editor/plugins/NormalizeIndentOutdent",
		"dojox/editor/plugins/Breadcrumb",
		"dojox/editor/plugins/FindReplace",
		"dojox/editor/plugins/PasteFromWord",
		"dojox/editor/plugins/InsertAnchor",
		"dojox/editor/plugins/CollapsibleToolbar",
		"dojox/editor/plugins/TextColor",
		"dojox/editor/plugins/Blockquote",
		"dojox/editor/plugins/Smiley",
		"dojox/editor/plugins/UploadImage"]);
</script>
</body>
</html>