dojo---在线编辑器案例

Dojo在线编辑器实战
最新推荐文章于 2024-04-28 16:50:19 发布
原创最新推荐文章于 2024-04-28 16:50:19 发布 · 185 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#Dojo #CSS #JavaScript #Ajax #HTML #ViewUI
dojo 专栏收录该内容
3 篇文章
订阅专栏
前台页面部分：

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>普通编辑器案例</title>
        <style type="text/css">
@import "js/dojo-release-1.1.0/dojo/resources/dojo.css";

@import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css";
</style>
        <script type="text/javascript" djConfig="parseOnLoad: true"
            src="js/dojo-release-1.1.0/dojo/dojo.js"></script>
        <script type="text/javascript">
            dojo.require("dijit.form.Button");
            dojo.require("dijit.TitlePane");
            //编辑器组件
            dojo.require("dijit.Editor");
            //编辑器扩展插件
            dojo.require("dijit._editor.plugins.AlwaysShowToolbar");
            dojo.require("dijit._editor.plugins.EnterKeyHandling");
            dojo.require("dijit._editor.plugins.FontChoice"); // 'fontName','fontSize','formatBlock'
            dojo.require("dijit._editor.plugins.TextColor");
            dojo.require("dijit._editor.plugins.LinkDialog");
            dojo.require("dijit._editor.plugins.ToggleDir");
            //解析器
            dojo.require("dojo.parser");
        </script>
    </head>
    <body class="tundra">
        <!-- 基本编辑器 -->
        <div dojoType="dijit.TitlePane" title="基本编辑器">
            <textarea dojoType="dijit.Editor" id="editor01"
                styleSheets="/dojotoolkit/dojo/resources/dojo.css">
                <p>
                  初始化内容，基本编辑器。
                </p>
               
            </textarea>
            <button dojoType="dijit.form.Button"
                onclick="alert(dijit.byId('editor01').getValue());">
                获取编辑器的值
            </button>
        </div>
        <br />
        <br />
        <br />
        <br />
        <!-- 扩展编辑器 -->
        <div style="border: 1px solid #ccc">
            <textarea dojoType="dijit.Editor" id="editor02"
                plugins="['bold','italic','|','createLink','insertImage','foreColor','hiliteColor',{name:'dijit._editor.plugins.FontChoice', command:'fontName', generic:true},'fontSize','formatBlock']"
                styleSheets="/dojotoolkit/dojo/resources/dojo.css">
            <p>初始化内容，扩展编辑器。</p>
        </textarea>
        </div>
        <button dojoType="dijit.form.Button"
            onclick="alert(dijit.byId('editor02').getValue());">
            获取编辑器的值
        </button>
    </body>
</html>

dojo 1.1.0 学习总结

四. 在线编辑器案例

        1.导入CSS样式
               
                <style type="text/css">
                        @import "js/dojo-release-1.1.0/dojo/resources/dojo.css"$$
                        @import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css"
                </style>
       
        2.添加dojo.js库
        <script type="text/javascript" djConfig="parseOnLoad: true" src="js/dojo-release-1.1.0/dojo/dojo.js"></script>

        3.导入组件
            //编辑器组件
            dojo.require("dijit.Editor");
            //编辑器扩展插件
            dojo.require("dijit._editor.plugins.AlwaysShowToolbar");
            dojo.require("dijit._editor.plugins.EnterKeyHandling");
            dojo.require("dijit._editor.plugins.FontChoice"); // 'fontName','fontSize','formatBlock'
            dojo.require("dijit._editor.plugins.TextColor");
            dojo.require("dijit._editor.plugins.LinkDialog");
            dojo.require("dijit._editor.plugins.ToggleDir");
            //解析器
            dojo.require("dojo.parser");
           
        注：如果只使用普通的编辑器，只需要导入
             dojo.require("dijit.Editor");
             dojo.require("dojo.parser");
        其他组件为扩展功能
       
        4.基本编辑器
        <!-- 基本编辑器 -->
        <div style="border: 1px solid #ccc">
            <textarea dojoType="dijit.Editor" id="editor01"
                styleSheets="/dojotoolkit/dojo/resources/dojo.css">
                <p>
                  初始化内容，基本编辑器。
                </p>
            </textarea>
        </div>
       
        <button dojoType="dijit.form.Button" onclick="alert(dijit.byId('editor01').getValue());">获取编辑器的值</button>
       
        注：
        类型使用 dojoType="dijit.Editor"
        id和name必须要有一个，使用Ajax时，当通过form获取数据则需要name属性，通过content获取数据时，需要ID属性
        <button dojoType="dijit.form.Button" onclick="alert(dijit.byId('editor01').getValue());"></button> 用户演示获取的数据，真实开发时不需要这句
       
        5.自定义扩展编辑器功能
        <!-- 扩展编辑器 -->
        <div style="border: 1px solid #ccc">
            <textarea dojoType="dijit.Editor" id="editor02"
                plugins="['bold','italic','|','createLink','insertImage','foreColor','hiliteColor',{name:'dijit._editor.plugins.FontChoice', command:'fontName', generic:true},'fontSize','formatBlock']"
                styleSheets="/dojotoolkit/dojo/resources/dojo.css">
            <p>初始化内容，扩展编辑器。</p>
        </textarea>
        </div>
       
        注：
        类型使用 dojoType="dijit.Editor"
        id和name必须要有一个，使用Ajax时，当通过form获取数据则需要name属性，通过content获取数据时，需要ID属性
        plugins="['bold','italic','|','createLink','insertImage','foreColor','hiliteColor',{name:'dijit._editor.plugins.FontChoice', command:'fontName', generic:true},'fontSize','formatBlock']"
        通过plugins属性设置编辑器功能