zoukankan      html  css  js  c++  java
  • 20151225jquery学习笔记---编辑器插件

    编辑器(Editor),一般用于类似于 word 一样的文本编辑器,只不过是编辑为 HTML
    格式的。分类纯 JS 类型的,还有 jQuery 插件类型的。
    一. 编辑器简介
    我们使用的 jQuery 版本比较新,但尚未全面使用 2.0 的版本,因为 IE6,7,8 被抛弃了。
    而恰恰在这个时期,就出现编辑器插件的两极分化的局面。高端和先进的 HTML 编辑器已
    经全面不支持 IE6,7,8 了, 而老版本的 HTML 编辑器, 在使用 jQuery1.10.x 版本时会发生这
    样那样的不兼容。 为此, 还需要引入 jquery-migrate-1.2.1.js 向下兼容插件才能解决一部分问
    题。并且需要手动修改源代码保证了正常运行。
    二. 引入 uEditor
    第一步:引入 jquery-migrate-1.2.1.js 文件,排除编辑器低版本的问题。
    第二步:把编辑器文件夹包放入根目录下。
    第三步:引入 uEditor.js 和 uEditor.css 两个文件。
    第四步:插入 textarea,设置规定值。
    第五步: jQuery 调用运行。

    //HTML 部分代码
    <button id="question_button">提问</button>
    <form id="question" action="123.html" method="post" title="提问">
    <p>
    <label for="user">问题名称: </label>
    <input type="text" name="title" class="text" style="390px;" id="title" />
    <span class="star"></span>
    </p>
    <p>
    <textarea class="uEditorCustom" name="content">请填写问题描述! </textarea>
    </p>
    </form>
    <div id="error">请登录后操作...</div>
    //jQuery 部分代码
    $('#question_button').button({
    icons : {
    primary : 'ui-icon-lightbulb',
    },
    }).click(function () {
    if($.cookie('user')) {
    $('#question').dialog('open');
    } else {
    $('#error').dialog('open');
    setTimeout(function () {
    $('#error').dialog('close');
    $('#login').dialog('open');
    }, 1000);
    }
    });
    $('#question').dialog({
    autoOpen : false,
    modal : true,
    resizable : false,
    width : 500,
    height : 360,
    buttons : {
    '发布' : function () {
    $(this).submit();
    }
    }
    });
    $('.uEditorCustom').uEditor();
    $('#error').dialog({
    autoOpen : false,
    modal : true,
    closeOnEscape : false,
    resizable : false,
    draggable : false,
    width : 180,
    height : 50,
    }).parent().find('.ui-widget-header').hide();
    

      



  • 相关阅读:
    【实验】利用系统自带脚本utlsampl.sql创建scott用户及样本数据
    有哪些优秀的沟通思路?
    srand()以及rand()函数用法
    微信公众号
    Sublime Text 3 全程详细图文原创教程(持续更新中。。。)
    Android应用的缓冲界面启动界面
    ListView技巧
    android线性布局参数
    CocoaPods的一波三则
    003.开发者账号异同
  • 原文地址:https://www.cnblogs.com/xiaoduc-org/p/5076862.html
Copyright © 2011-2022 走看看