当前位置: 首页 > 编程日记 > 正文

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" type="text/javascript"></script><script src="ueditor/editor_all.js" type="text/javascript"></script><link href="ueditor/themes/default/ueditor.css" 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则需要,下面配置ckfindervar 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);去掉

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

转载于:https://www.cnblogs.com/zagelover/articles/3056298.html

相关文章:

Datawhale组队学习周报(第032周)

希望开设的开源内容 目前Datawhale的开源内容分为两种&#xff1a;第一种是已经囊括在我们的学习路线图内的Datawhale精品课&#xff0c;第二种是暂未囊括在我们的学习路线图内的Datawhale打磨课。我们根据您的投票来确定精品课程的排期&#xff0c;打磨课程一旦完成&#xff…

常建的性能指标

1、响应时间响应时间指的是“系统响应时间”&#xff0c;定义为应用系统从发出请求开始到客户端接收到响应所消耗的时间。把它作为用户视角的软件性能的主要体现。它包括网络上的传输时间&#xff0c;web服务器上处理时间&#xff0c;APP服务器上处理时间&#xff0c;DB服务器上…

东野圭吾最值得看的书排行榜_东野圭吾最值得看的7本作品,我进了坑就再也没出来...

自从读了东野圭吾的《解忧杂货店》,我便一发不可收拾,成了这位日本推理大佬的脑残粉。 有的人说不清他哪里好,但就是想戒也戒不掉!读了东野圭吾几乎所有作品后,我盘点了「东野圭吾作品必读top 7」,拿去不谢—— 07《圣女的救济》 一场真正的“完美谋杀”! 男子在家中死亡…

【青少年编程】【四级】用逗号分隔列表

「青少年编程竞赛交流群」已成立&#xff08;适合6至18周岁的青少年&#xff09;&#xff0c;公众号后台回复【Scratch】或【Python】&#xff0c;即可进入。如果加入了之前的社群不需要重复加入。 我们将有关编程题目的教学视频已经发布到抖音号21252972100&#xff0c;小马老…

Console-算法-一个偶数总能表示为两个素数之和

ylbtech-Arithmetic:Console-算法-一个偶数总能表示为两个素数之和1.A&#xff0c;Demo(案例)【程序84】题目&#xff1a;一个偶数总能表示为两个素数之和。1.程序分析&#xff1a; 1.B&#xff0c;Solution(解决方案)【不太理解】using System;namespace ConsoleApplication1 …

day16-筛选器以及Tab菜单示例

一、前言 之前我们学习dom写Tab菜单示例&#xff0c;今天我们来学习一下常用的筛选器和Tab菜单示例。 二、操作的html <head><meta charset"UTF-8"><title>Title</title><style>.header{background-color: black;color: white;cursor:…

nginx和mysql链接_nginx转发mysql连接

场景&#xff1a;访问UAT环境&#xff0c;只能使用客户电脑访问&#xff0c;太难用了&#xff0c;于是就需要在自己电脑上跑代码&#xff0c;通过客户电脑中转来访问uat环境的数据库。选用nginx进行转发。配置如下&#xff1a;stream {upstream cloudsocket {hash $remote_addr…

两个有序单链表的并交差运算

/*实验2.6&#xff1a;求集合&#xff08;有序单链表表示&#xff09;的并、交和差运算*/ #include<iostream> #include<malloc.h> using namespace std; typedef char ElemType; typedef struct LNode {ElemType data;struct LNode *next; }LinkList; void Displa…

【青少年编程】【蓝桥杯】排队购票

「青少年编程竞赛交流群」已成立&#xff08;适合6至18周岁的青少年&#xff09;&#xff0c;公众号后台回复【Scratch】或【Python】&#xff0c;即可进入。如果加入了之前的社群不需要重复加入。 我们将有关编程题目的教学视频已经发布到抖音号21252972100&#xff0c;小马老…

Linux (CentOS 7 )下搭建局域网SVN服务器+SVN权限配置

准备 公司内部需要配置局域网SVN&#xff0c;需要在在内部虚拟机服务器搭建&#xff0c;搭建过程做个记录&#xff0c;供参考。注&#xff1a;如果条件允许&#xff0c;尽量在windows下搭建svn服务器&#xff0c;很省事&#xff0c;尤其是权限配置非常方便又易懂&#xff0c;效…

mysql事件探查器_【干货】Mysql的事件探查器-之Mysql-Proxy代理实战一(安装部署与实战sql拦截与性能监控)...

1:资料参考https://blog.csdn.net/coldljy/article/details/3168906https://www.cnblogs.com/jwentest/p/8552075.htmlhttps://www.cnblogs.com/ExMan/p/10396298.html一&#xff1a;原理Mysql-Proxy是一个处于你的client端和Mysql Server端之间的一个简单程序&#xff0c;它可…

【青少年编程】【蓝桥杯】绘制莲花图形

「青少年编程竞赛交流群」已成立&#xff08;适合6至18周岁的青少年&#xff09;&#xff0c;公众号后台回复【Scratch】或【Python】&#xff0c;即可进入。如果加入了之前的社群不需要重复加入。 我们将有关编程题目的教学视频已经发布到抖音号21252972100&#xff0c;小马老…

问题总结两天来两场实习面试(中科创达、华为)

查了好多资料&#xff0c;发现还是不全&#xff0c;干脆自己整理吧&#xff0c;至少证保在我的做法正确的&#xff0c;以免误导读者&#xff0c;也是给自己做个记录吧&#xff01; 昨天下午去的中科创达口试 今天下午刚刚结束为华的练习生口试&#xff0c;月五二号去上机试笔&a…

不想被问年终奖?2018年春节自救攻略来了!

转眼间,春节即将来临&#xff01;当然按捺不住那颗归家的心~但是想到回家&#xff0c;就要接受来自七大姑八大姨的亲切问候&#xff0c;美好的假期变得不怎么美好了&#xff0c;瞬间忧伤起来~对象难找、年终奖少&#xff0c;当被七姑八姨问起时&#xff0c;内心总会产生抵触情绪…

mysql complete_mysql 无意重启 [Note] /usr/sbin/mysqld: Normal shutdown

情况&#xff1a;今早发现&#xff0c;昨天下午安装的4台mysql服务器&#xff0c;突然出现&#xff0c;由于在shell窗口(rootlocalhost:mysql.sock) [(none)]> 190102 18:12:16 mysqld_safe mysqld from pid file /home/data/mysqldata/3306/data/mysql3.pid ended什么情况&…

redis 数据结构 内存管理 持久化

为什么80%的码农都做不了架构师&#xff1f;>>> Redis 内存数据结构与编码 OBJECT encoding key、DEBUG OBJECT key简单动态字符串&#xff08;simple dynamic string&#xff09;链表&#xff08;linked list&#xff09;字典&#xff08;dict&#xff09;跳表&am…

【青少年编程】【蓝桥杯】水仙花数

「青少年编程竞赛交流群」已成立&#xff08;适合6至18周岁的青少年&#xff09;&#xff0c;公众号后台回复【Scratch】或【Python】&#xff0c;即可进入。如果加入了之前的社群不需要重复加入。 我们将有关编程题目的教学视频已经发布到抖音号21252972100&#xff0c;小马老…

本地 无法启动 SQL Server 错误代码126

Windows 不能在 本地计算机 启动 SQL Server 。错误代码126. 2008 R2 配置工具 VIA设置禁用。 然后重启一下服务 转载于:https://www.cnblogs.com/wuxinyu/archive/2013/05/08/3068008.html

mysql 表的继承,MySQL是否支持表继承?

I have this code in PostgreSQLCREATE TABLE first (id serial,primary key(id));CREATE TABLE second (primary key(id)) INHERITS (first);What is the equivalent code for MySQL?解决方案MySQL does not support table inheritance. The only way to approximate the fun…

C#编程概念系列(一):面向对象编程

系列文章索引目录&#xff1a;http://www.cnblogs.com/loner/archive/2013/05/09/3068211.html 引子&#xff1a; 面向对象编程&#xff1a;这个在当下已不是什么时髦的概念&#xff0c;但通过自己的语言组织描述出来可能会有点意外的收获&#xff01; 记得最近看的乔布斯在199…

【青少年编程】【四级】数字反转

「青少年编程竞赛交流群」已成立&#xff08;适合6至18周岁的青少年&#xff09;&#xff0c;公众号后台回复【Scratch】或【Python】&#xff0c;即可进入。如果加入了之前的社群不需要重复加入。 我们将有关编程题目的教学视频已经发布到抖音号21252972100&#xff0c;小马老…

【对讲机的那点事】关于对讲机锂电池你了解多少?

在对讲机日常使用中&#xff0c;对讲机电池是属于损耗件&#xff0c;随着使用时间、频率的增加会减弱其使用性能&#xff1b; 锂离子聚合物电池成为领先的电池技术&#xff0c;它具有不容忽视的优势&#xff0c;但是你究竟对锂离子电池有多少了解呢&#xff1f; 较高的电能重量…

mac mysql5.7 my_【mysql】Mac下安装mysql5.7 完整步骤,大坑已解决

最近使用Mac系统&#xff0c;准备搭建一套本地web服务器环境。因为Mac系统自带PHP和apach&#xff0c;但是没有自带mysql&#xff0c;所以要手动去安装mysql&#xff0c;本次安装mysql最新版5.7.17。1.官网下载点击上面的地址&#xff0c;会看到如下图的页面。你可能不知道该下…

【数学基础】校招算法工程师笔试题

请留言&#xff0c;说出你的解题思路和答案。稍后&#xff0c;我会把参考答案发到留言区。不定期整理相关的问题答案分享。 1、下列矩阵的主元列为&#xff08;&#xff09; A[000111001123]A\begin{bmatrix}0&0&0&1\\1&1&0&0\\1&1&2&3\e…

IOS6.0 应用内直接下载程序 不需跳转AppStore

闲来没事看了篇文章 应用内创建应用商店环境&#xff0c;不跳转AppStore. 先武断的想一句&#xff1a;放屁。然后好奇的进去看看&#xff0c;原来是IOS6.0的新特性&#xff0c;顿感惭愧。研究下 SKStoreProductViewController类是UIViewController的子类, 如果你对view control…

python语言基础汇总

注释 代码中添加注释是一个良好的编程习惯&#xff0c;python语言的注释才用井号#作为注释开头的&#xff0c;可以是任意内容&#xff0c;解释器会忽略掉这部分内容。其他每一行都是语句&#xff0c;当语句以冒号:结尾时&#xff0c;缩进的语句视为代码块。 数据类型 python中有…

docker安装mysql5.7_超详细Docker安装Mysql5.7并进行挂载

1、下载mysql 5.7镜像docker pull mysql:5.72、创建mysql容器并启动docker run -d -p 3306:3306 -e MYSQL_USER"ppx" -e MYSQL_PASSWORD"123456" -e MYSQL_ROOT_PASSWORD"123456" --name mysqltest1 mysql:5.7 --character-set-serverutf8 --col…

SQL查询语句 select 详解

查询select: 1。单表查询 2。多表查询 3。嵌套查询分类 1&#xff09;单表查询 2&#xff09;多表查询 A.连接查询 B.子查询 ①一般子查询 ②相关子查询***************************************SQL查询语句《一》&#xff1a;单表查询1.查询全部记录&#xff1a;select * from…

【青少年编程】【蓝桥杯】绘制扇子

「青少年编程竞赛交流群」已成立&#xff08;适合6至18周岁的青少年&#xff09;&#xff0c;公众号后台回复【Scratch】或【Python】&#xff0c;即可进入。如果加入了之前的社群不需要重复加入。 我们将有关编程题目的教学视频已经发布到抖音号21252972100&#xff0c;小马老…

centos 7.2 yum mysql_20191209_Centos7.2使用yum安装mysql

1. 下载mysql的rpm包[rootizwz91qnvovd6suufon1ccz ~]# wget http://dev.mysql.com/get/mysql57-community-release-el7-7.noarch.rpm2. 安装rpm包[rootizwz91qnvovd6suufon1ccz ~]# yum localinstall -y mysql57-community-release-el7-7.noarch.rpm3. 安装mysql 5.7[rootizwz…