Skip to content

U
ueditor

qq_14980201 / ueditor
与 Fork 源项目一致

从无法访问的项目Fork

通知 3
Star 0
Fork 0
U
ueditor

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 7708d875 编写于 作者: C campaign
浏览文件
操作

Merge pull request #67 from Jinqn/dev-1.3.0 

Dev 1.3.0
上级 7abe110a dd52f896
隐藏空白更改
内联 并排
Showing with 95 addition and 61 deletion
README.md
浏览文件 @ 7708d875
......@@ -46,9 +46,13 @@ UEditor是由百度web前端研发部开发所见即所得富文本web编辑器
1. [部署编辑器](_doc/部署编辑器.md "部署编辑器")
2. [拖拽插入和粘贴图片](_doc/拖拽插入和粘贴图片.md "拖拽插入和粘贴图片")
2. [提交表单并展示内容](_doc/提交表单并展示内容.md "提交表单并展示内容")
3. [ASP支持说明](_doc/ASP支持说明.md "ASP支持说明")
3. [部署编辑器](_doc/路径配置.md "路径配置")
4. [拖拽插入和粘贴图片](_doc/拖拽插入和粘贴图片.md "拖拽插入和粘贴图片")
5. [ASP支持说明](_doc/ASP支持说明.md "ASP支持说明")
## 二次开发文档 ##
......
_doc/增加一个简单的按钮.md
浏览文件 @ 7708d875
......@@ -15,21 +15,23 @@ labelMap:{
}
```
### 第二步：修改_src/ui/editorui.js文件
在_src/ui/editorui.js文件中，找到的btnCmds数组变量，在其中同样增加一个“showmsg”字符串。
在_src/ui/editorui.js文件中，找到的btnCmds数组变量，在其中同样增加一个"showmsg"字符串。
```javascript
var btnCmds = [..., 'mergecells', 'deletetable', 'showmsg'];
```
这时候，清空缓存刷新下页面！工具栏的对应位置是否出现了一个自己定义的按钮呢？如下图所示：
![新增按钮](http://www.ueditorbbs.com/data/attachment/forum/201304/24/110436m5k2bkayokzp7goy.png)
![新增按钮](images/newbtn.png)
### 第三步：修改themes/default/ueditor.css文件
由于此时未设置对应按钮的图片样式，所以会显示默认的“B”字符。要想让其显示成自己需要的图标样式，接着按照下面的步骤动手吧。
找到themes/default/ueditor.css文件，增加一条样式定义:
找到themes/default/ueditor.css文件，增加一条样式定义。此处的样式定义了showmsg图标在UEditor默认的精灵Icon图片（themes/default/images/icons.png）中的位置偏移。如需更改成另外图标，只需添加图标到该图片文件中，然后设置偏移值即可。
```css
.edui-for-showmsg .edui-icon {
......@@ -37,11 +39,10 @@ var btnCmds = [..., 'mergecells', 'deletetable', 'showmsg'];
}
```
此处的样式定义了showmsg图标在UEditor默认的精灵Icon图片（themes/default/images/icons.png）中的位置偏移。如需更改成另外图标，只需添加图标到该图片文件中，然后设置偏移值即可。
![新增按钮并设置背景](images/newbtn-setstyle.png)
![](http://www.ueditorbbs.com/data/attachment/forum/201304/24/110501r0rv0sc1l1qsvxh5.png)
### 第四步：添加_src/plugins/showmsg.js文件
### 第四步：添加_src/plugins/showmsg.js插件文件
到此为止，在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑，但是我们发现点击按钮之后毫无反应。那是必然的，我们还必须为该按钮绑定属于它自己的事件处理方法。
......@@ -58,7 +59,7 @@ UE.commands['showmsg'] = {
};
```
然后将该文件引入ueditor：打开_examples/editor_api.js文件，在paths数组中的适当位置（一般是指默认提供的插件部分地址的最后）增加一条记录：
然后将该文件引入ueditor：打开_examples/editor_api.js文件，在paths数组中的适当位置（一般是指默认提供的插件部分地址的最后）增加一行plugins/showmsg.js的引用：
```javascript
'plugins/webapp.js',
......@@ -68,11 +69,11 @@ UE.commands['showmsg'] = {
再次刷新页面点击一下按钮吧！
![新增一个按钮](http://www.ueditorbbs.com/data/attachment/forum/201304/24/110503by10zh7cqqzt3qgy.png)
![新增按钮并设置动作](images/newbtn-setaction.png)
## 打包文件
注意：正式使用ueditor时，需要把编辑器源码打包成ueditor.all.js文件，具体打包方法请看打包教程：
[拖拽插入和粘贴图片](_doc/拖拽插入和粘贴图片.md "拖拽插入和粘贴图片")
[使用grunt打包源代码](使用grunt打包源代码.md "拖拽插入和粘贴图片")
_doc/拖拽插入和粘贴图片.md 已删除 100644 → 0
浏览文件 @ 7abe110a
# 拖拽插入和粘贴图片
## 支持版本 ##
支持 UEditor 1.3.0+ 的版本
## 支持功能 ##
1. 拖放图片上传并插入到编辑器
2. 使用QQ，百度HI等工具截屏，粘贴到编辑器
3. 复制网页上的图片，粘贴到编辑器
\ No newline at end of file
_doc/提交表单并展示内容.md 0 → 100644
浏览文件 @ 7708d875
# 提交表单并展示内容
## 提交表单设置
1. 按照[部署编辑器](部署编辑器.md "部署编辑器")的教程，完成编辑器加载
2. 把容器放到form表单里面，设置好要提交的路径，如下面代码中的<form>标签
```html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var editor = UE.getEditor('container');
</script>
</body>
</html>
```
\ No newline at end of file
_doc/部署编辑器.md
浏览文件 @ 7708d875
......@@ -6,7 +6,7 @@
2. 解压后的文件目录结构如下所示
![ueditor解压后的目录列表](http://www.ueditorbbs.com/data/attachment/forum/201311/01/173606n69mm6rku9ld05m2.png)
![ueditor解压后的目录列表](images/sourcedir.png)
3. 目录和文件说明:
......@@ -23,22 +23,24 @@
4. 在你页面head内，引用ueditor文件、配置文件和语言包文件。插入下面的代码，修改引用路文件的路径。
```html
<!-- 配置文件 -->
<script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="./ueditor/ueditor.all.js"></script>
<!-- 语言包文件 -->
<script type="text/javascript" src="./ueditor/lang/zh-cn/zh-cn.js"></script>
```
5. 在你页面head内，引用ueditor文件、配置文件和语言包文件。插入下面的代码，修改引用路文件的路径。
```html
<!-- 配置文件 -->
<script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="./ueditor/ueditor.all.js"></script>
<!-- 语言包文件 -->
<script type="text/javascript" src="./ueditor/lang/zh-cn/zh-cn.js"></script>
```
\ No newline at end of file
```html
<!-- 配置文件 -->
<script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="./ueditor/ueditor.all.js"></script>
<!-- 语言包文件 -->
<script type="text/javascript" src="./ueditor/lang/zh-cn/zh-cn.js"></script>
```
5. 然后在代码文件中设置编辑器容器，并添加编辑器的实例化代码。具体代码示例如下。
```html
<script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
<script type="text/javascript">
var editor = UE.getEditor('container')
</script>
```
6. 如果看到了下面这样的编辑器，说明已经部署成功！
![demo.png](images/demo.png)
\ No newline at end of file
_src/plugins/autoheight.js
浏览文件 @ 7708d875
......@@ -76,6 +76,7 @@ UE.plugins['autoheight'] = function () {
domUtils.on(browser.ie ? me.body : me.document, browser.webkit ? 'dragover' : 'drop', function () {
clearTimeout(timer);
timer = setTimeout(function () {
//trace:3681
adjustHeight.call(me);
}, 100);
......
dialogs/table/edittable.css
浏览文件 @ 7708d875
body{
overflow: hidden;
width: 540px;
}
.wrapper {
margin: 10px auto 0;
font-size: 12px;
overflow: hidden;
width: 520px;
height: 275px;
}
.clear {
......@@ -15,13 +21,13 @@
.wrapper .right {
float: right;
margin-right: 10px;
border-left: 2px dotted #EDEDED;
padding-left: 15px;
}
.section {
margin-bottom: 20px;
margin-bottom: 15px;
width: 240px;
overflow: hidden;
}
......@@ -36,10 +42,13 @@
.section ul {
list-style: none;
overflow: hidden;
clear: both;
}
.section li {
float: left;
width: 120px;;
}
.section .tone {
......
dialogs/table/edittable.html
浏览文件 @ 7708d875
......@@ -11,22 +11,20 @@
<div class="section">
<h3><var id="lang_tableStyle"></var></h3>
<ul>
<ul>
<li>
<label><input type="checkbox" id="J_title" name="style"/><var id="lang_insertTitle"></var></label>
</li>
<li>
<label><input type="checkbox" id="J_titleCol" name="style"/><var id="lang_insertTitleCol"></var></label>
</li>
</ul>
<ul>
<li>
<label><input type="checkbox" id="J_caption" name="style"/><var id="lang_insertCaption"></var></label>
</li>
<li>
<label><input type="checkbox" id="J_sorttable" name="style"/><var id="lang_orderbycontent"></var></label>
</li>
</ul>
<li>
<label onselectstart="return false"><input type="checkbox" id="J_title" name="style"/><var id="lang_insertTitle"></var></label>
</li>
<li>
<label onselectstart="return false"><input type="checkbox" id="J_titleCol" name="style"/><var id="lang_insertTitleCol"></var></label>
</li>
</ul>
<ul>
<li>
<label onselectstart="return false"><input type="checkbox" id="J_caption" name="style"/><var id="lang_insertCaption"></var></label>
</li>
<li>
<label onselectstart="return false"><input type="checkbox" id="J_sorttable" name="style"/><var id="lang_orderbycontent"></var></label>
</li>
</ul>
<div class="clear"></div>
</div>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或