Ueditor和CKeditor 两款编辑器的使用与配置方法

2024-12-08 17:24:53

一丶ueditor 百度编辑器

1.官方文档，演示，下载地址：http://ueditor.baidu.com/website/index.html

2.百度编辑器的好：Editor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点。

3.如果想定制你想要的编辑器功能：查看官方网站的下载页面即可。

4.编辑器展示：

5.百度编辑器配置。

1.载入js，css文件

<script src="ueditor/editor_config.js" type="text/javascript"></script>
<script src="ueditor/editor_all.js" type="text/javascript"></script>
<link href="ueditor/themes/default/ueditor.css" rel="external nofollow" rel="stylesheet" type="text/css" />

2.页面配置

<div id="myEditor"></div>  //可以是aspx控件 只要id正确即可
<script type="text/javascript">
    var ue = new baidu.editor.ui.Editor();
    ue.render("myEditor");  //这里填写要改变为编辑器的控件id
</script>

3.editor_config.js 文件中的路径配置

var tmp = window.location.pathname;
  URL = window.UEDITOR_HOME_URL || "/SomePackage/Ueditor/ueditor/"; //这里你可以配置成ueditor目录在您网站的相对路径或者绝对路径（指以http开头的绝对路径）

4.如果你要使用传图片功能，还需要修改net文件下的几个文件截图说明吧（这个路径可以直接删除的，试试。不行了自己再调整下

改为-->

同理将net文件下其它文件类似的错误更正后即可上传图片。
图片上传默认位置为：net文件夹下。上传一张打开即可发现一个upload文件夹。

5.ueditor 的很多默认配置都在 editor_config.js这个文件中，细心看的话，开启或关闭其中的配置是可以解决很多问题的。

6.我在使用过程中还遇到过编辑器内容影响整体页面的布局问题，这问题是在editor_all.js这个文件中修改的默认样式问题的。

/**
     * 渲染编辑器的DOM到指定容器，必须且只能调用一次
     * @public
     * @function
     * @param {Element|String} container
     */
    render:function ( container ) {
      var me = this, options = me.options;
      if ( container.constructor === String ) {
        container = document.getElementById( container );
      }
      if ( container ) {
        var useBodyAsViewport = ie && browser.version < 9,
            html = ( ie && browser.version < 9 ? '' : '<!DOCTYPE html>') +
                '<html xmlns=\'http://www.w3.org/1999/xhtml\'' + (!useBodyAsViewport ? ' class=\'view\'' : '') + '><head>' +
                ( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml( options.iframeCssUrl ) + '\'/>' : '' ) +
                '<style type=\'text/css\'>' +
              //这些默认属性不能够让用户改变
              //选中的td上的样式
                '.selectTdClass{background-color:#3399FF !important;}' +
                'table.noBorderTable td{border:1px dashed #ddd !important}' +
              //插入的表格的默认样式
                'table{clear:both;margin-bottom:10px;border-collapse:collapse;word-break:break-all;}' +
              //分页符的样式
                '.pagebreak{display:block;clear:both !important;cursor:default !important;width: 100% !important;margin:0;}' +
              //锚点的样式,注意这里背景图的路径
                '.anchorclass{background: url(\'' + me.options.UEDITOR_HOME_URL + 'themes/default/images/anchor.gif\') no-repeat scroll left center transparent;border: 1px dotted #0000FF;cursor: auto;display: inline-block;height: 16px;width: 15px;}' +
              //设置四周的留边
                '.view{padding:0;word-wrap:break-word;cursor:text;height:100%;}\n' +
              //设置默认字体和字号
                'body{margin:8px;font-family:\'宋体\';font-size:16px;}' +
              //针对li的处理
                'li{clear:both}' +
              //设置段落间距
                'p{margin:5px 0;}'
                + ( options.initialStyle || '' ) +
                '</style></head><body' + (useBodyAsViewport ? ' class=\'view\'' : '') + '></body>';

最后对这个编辑器总结下:很好用的，代码很容易读懂，便于修改配置为自己喜欢的想要的。

二丶CKEditor丶CKFinder 国外知名编辑器

1.官方文档，演示，下载地址：http://ckeditor.com/download 丶 http://ckfinder.com/download

2.百度编辑器的好：是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化，不需要太复杂的安装步骤即可使用。

3.编辑器展示：

4.配置步骤以及一些常用配置

1.引入<script src="ckeditor/ckeditor.js" type="text/javascript"></script>

2.页面代码

<!--第一个--->
  <textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>
  <!--第二个--->
  <div id="editorSpace"></div> <!--直接设置class好像也行的可以试试--->
  <script type="text/javascript">
    CKEDITOR.appendTo('editorSpace');
  </script>

3.配置ckeditor的一些常用配置，在config.js这个文件中，所有的属性配置都可以查阅官方的API：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

4.列出一些常用的属性配置：

CKEDITOR.editorConfig = function( config )
{
  // Define changes to default configuration here. For example:
  // config.language = 'fr';
  // config.uiColor = '#AADC6E';
  //config.width=700;
  //config.height=400;
  //config.skin='v2';  //自带皮肤种类有3种：Kama（默认） ， Office 2003 ， v2
  //config.font_names = '宋体;楷体 _GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';

  //如果上传图片或者flash则需要，下面配置ckfinder
  var ckfinderPath = "/SomePackage/FCKeditor/ckfinder"; //配置为绝对路径

  config.filebrowserBrowseUrl = ckfinderPath + "/ckfinder.html";
  config.filebrowserImageBrowseUrl = ckfinderPath + "/ckfinder.html?Type=Image";
  config.filebrowserFlashBrowseUrl = ckfinderPath + "/ckfinder.html?Type=Flash";
  config.filebrowserUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Files";
  config.filebrowserImageUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Images";
  config.filebrowserFlashUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Flash";
};

5.如果上传图片则需在项目中添加ckfinder文件

6.第四步为配置上传图片的第一步

7.改变ckfinder文件夹下的config.ascx,内容如下：

public override bool CheckAuthentication()
  {
    //object str = session["username"];
    //if (str != null & Convert.ToBoolean(str) == true)
    //{
    //  return true;
    //}
    return true;  //不建议直接返回true，最好做下用户验证判断在返回true（安全）,上面为验证的一个实例
  }

8.这样就行了，由于ckfinder不是免费的，所以默认情况下会在上传页面中有红色的广告提示，虽然不影响使用，但总是觉得不爽。
9.去除广告方法：找到ckfinder/core/js/ckfinder_ie.js及ckfinder_gecko.js，将其中的 en.call(window,qo);去掉

最后对这个编辑器总结下:很强大，很好用。世界各地都在用的。

常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介

1.UEditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码... 主要特点: 轻量级:代码精简,加载迅速. 定制化: 全新的分层理念,满足多元化的需求. 采用三层架构: 1. 核心层: 为命令层提供底层API,如range/selection/domUtils类. 2. 命令插件层: 基于核心层开发command命令,命令之间相互独立. 3. 界面层: 为命令层提供用户使用界面. 满
ckeditor和ueditor那个好 CKEditor和UEditor使用比较

CKEditor和UEditor使用比较本来项目中使用CKEditor已经做好了的富文本编辑器的功能,但是业务考虑到美观性要求换成UEditor,所以就在这里总结下先说下使用这两个不同插件的感想,我用的ueditor是1.4.3的版本:(ueditor API) UEditor:ueditor更注重用户体验,而且使用起来较ckeditor简单,但是ueditor在处理前后台交互时相比于ckeditor稍显麻烦 ckeditor:ckeditor不像ueditor,更多的方法需要自己去实现,但
Ueditor和CKeditor 两款编辑器的使用与配置方法

一丶ueditor 百度编辑器 1.官方文档,演示,下载地址:http://ueditor.baidu.com/website/index.html 2.百度编辑器的好:Editor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点. 3.如果想定制你想要的编辑器功能:查看官方网站的下载页面即可. 4.编辑器展示: 5.百度编辑器配置. 1.载入js,css文件 <script src="ueditor/editor_config.js"
百度UEditor编辑器使用教程与使用方法(图文)

我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟大家分享一下百度UEditor编辑器使用教程与使用方法,希望对大家有所帮助. 第一:百度UEditor编辑器的官方下载地址 ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://ueditor.baidu.com/web
Python ckeditor富文本编辑器代码实例解析

1.安装第三方模块包 pip install django-ckeditor 2.添加应用 INSTALLED_APPS = [ ... 'ckeditor', # 富文本编辑器 'ckeditor_uploader', # 富文本编辑器上传图片模块 ... ] 3. 添加CKEditor设置 # 富文本编辑器ckeditor配置 CKEDITOR_CONFIGS = { 'default': { 'toolbar': 'full', # 工具条功能 'height': 300, # 编辑器高度
配合Swagger使用绝佳的两款直观易用JSON可视化工具

目录前言聊聊Swagger JsonHero 简介使用 JsonVisio 简介安装使用总结前言经常使用Swagger的小伙伴应该有所体会,Swagger对于JSON的支持真的很不友好!最近发现了两款颜值很不错的JSON可视化工具,可以优雅地展示JSON数据从而提高开发效率,推荐给大家! SpringBoot实战电商项目mall(50k+star)地址:https://github.com/macrozheng/mall 聊聊Swagger 我们先来聊聊Swagger对JSON支
两款万能的php分页类

本文为大家分享个超级好用.万能的php分页类,具体的实现代码如下第一款php分页类 <?php /* * To change this template, choose Tools | Templates * and open the template in the editor. */ /** * 分页类 * 使用方式: * $page = new Page(); * $page->init(1000, 20); * $page->setNotActiveTemplate('<
Python的Flask框架中集成CKeditor富文本编辑器的教程

CKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写.具备功能强大.配置容易.跨浏览器.支持多种编程语言.开源等特点.它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了CKeditor. 下载CKeditor 访问CKeditor官方网站,进入下载页面,选择Standard Package(一般情况下功能足够用了),然后点击Download CKEditor按钮下载ZIP格式的安装文件.如果你想尝试更多的功能,可以选择下载Full
两款JS脚本判断手机浏览器类型跳转WAP手机网站

随着移动设备的普及,企业的网络宣传已经不能局限在PC端,而需要同时在移动端有所建树.对于公司网站来说,以前都是做的PC端的,当然手机等移动端也可以访问,但是用户体验肯定不如完全适合的手机端来的方便.我们在给自己的网站做了WAP手机网站之后,如果有用户通过手机访问我们的企业顶级域名网站,那就判断跳转到专为的WAP网站. 这里老左整理到目前自己在使用的2种JS脚本,因为之前一直有朋友跟我要,所以这里分享出来. 第一种:直接JS脚本 <script type="text/javascript&q
jQuery实现两款有动画功能的导航菜单代码

本文实例讲述了jQuery实现两款有动画功能的导航菜单代码.分享给大家供大家参考.具体如下: 这里介绍两个有动画功能的jQuery导航菜单,每个具备移动背景的效果,第二则是渐变背景效果,两个都不错,根据你的喜好选择了,菜单的风格和颜色自己修改一下就能用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2-animate-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "
基于dropdown.js实现的两款美观大气的二级导航菜单

本文实例讲述了基于dropdown.js实现的两款美观大气的二级导航菜单.分享给大家供大家参考.具体如下: 1. 蓝色风格导航菜单运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-dropdown-blue-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
CKeditor富文本编辑器使用技巧之添加自定义插件的方法

本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法.分享给大家供大家参考,具体如下: 首先就是在CKeditor的plugins目录下新建一个目录qchoice: qchoice目录下的结构如下: 然后, images中如下: dialogs中如下: 我们先来看plugins.js文件的内容: (function() { CKEDITOR.plugins.add("qchoice", { requires: ["dialog"], init:

Ueditor和CKeditor 两款编辑器的使用与配置方法

相关推荐

随机推荐