[关闭]
@liayun 2016-05-11T14:53:06.000000Z 字数 1405 阅读 1425

知问前端--编辑器插件

知问前端


编辑器(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.jsuEditor.css两个文件。
第四步:插入textarea,设置规定值。
第五步:jQuery调用运行。
HTML部分:

  1. <button id="question_button">提问</button>
  2. <form id="question" title="提问">
  3. <p>
  4. <label for="title">问题名称:</label>
  5. <input type="text" name="title" style="width: 390px;" class="text" id="title"></input>
  6. </p>
  7. <p>
  8. <textarea class="uEditorCustom" name="content">请输入问题描述!</textarea>
  9. </p>
  10. </form>
  11. <div id="error">请登录后操作...</div>

jQuery部分代码:

  1. $("#question_button").button({
  2. icons:{
  3. primary:"ui-icon-lightbulb",
  4. }
  5. }).click(function() {
  6. if($.cookie("user")) {
  7. $("#question").dialog("open");
  8. } else {
  9. $("#error").dialog("open");
  10. setTimeout(function() {
  11. $("#error").dialog("close");
  12. $("#login").dialog("open");
  13. }, 1000);
  14. }
  15. });
  16. $("#question").dialog({
  17. autoOpen : false,
  18. modal : true,
  19. resizable:false,
  20. width:500,
  21. height:360,
  22. buttons:{
  23. '发布':function() {
  24. $(this).submit();
  25. }
  26. }
  27. });
  28. $("#error").dialog({
  29. autoOpen:false,
  30. modal:true,
  31. closeOnEscape:false, // 禁用Esc键关闭对话框
  32. resizable:false,
  33. draggable:false,
  34. width:180,
  35. //height:80
  36. height:50
  37. }).parent().find(".ui-widget-header").hide();
  38. $(".uEditorCustom").uEditor(); // HTML代码中<textarea>中定要添加类选择符uEditorCustom才可
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注