14.jQuery UI 编辑器插件

最新推荐文章于 2024-08-15 09:27:38 发布

初心始终钰

最新推荐文章于 2024-08-15 09:27:38 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery UI

本文链接：https://blog.youkuaiyun.com/qq_16430735/article/details/38474373

jQuery UI 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何将uEditor富文本编辑器集成到网页中，包括引入必要的文件、设置textarea元素及使用jQuery初始化编辑器的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编辑器（Editor），一般用于类似于word 一样的文本编辑器，只不过是编辑为HTML
格式的。分类纯JS 类型的，还有jQuery 插件类型的。

一．引入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="width: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();