文件夹结构调整，新增模版自定义功能

2025-06-24 04:46:37 +00:00 · 2020-12-26 19:13:07 +08:00
parent f03ab953d0
commit 6ad51908d5
601 changed files with 75656 additions and 8 deletions
--- a/templates/orange/static/wangEditor/docs/usage/01-getstart/01-demo.md
+++ b/templates/orange/static/wangEditor/docs/usage/01-getstart/01-demo.md
@ -0,0 +1,41 @@
+# 简单的 demo
+
+## 下载
+
+- 点击 [https://github.com/wangfupeng1988/wangEditor/releases](https://github.com/wangfupeng1988/wangEditor/releases) 下载最新版。进入`release`文件夹下找到`wangEditor.js`或者`wangEditor.min.js`即可
+- 使用CDN：[//unpkg.com/wangeditor/release/wangEditor.min.js](https://unpkg.com/wangeditor/release/wangEditor.min.js)
+- 使用`bower`下载：`bower install wangEditor` （前提保证电脑已安装了`bower`）
+
+*PS：支持`npm`安装，请参见后面的章节*
+
+## 制作 demo
+
+编辑器效果如下。
+
+![图片](https://camo.githubusercontent.com/f3d072718d8fcbbacf8cc80465a34cceffcf5b4a/687474703a2f2f696d61676573323031352e636e626c6f67732e636f6d2f626c6f672f3133383031322f3230313730352f3133383031322d32303137303533303230323930353633332d313834303135383938312e706e67)
+
+代码示例如下。**注意，以下代码中无需引用任何 CSS 文件！！！**
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>wangEditor demo</title>
+</head>
+<body>
+    <div id="editor">
+        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
+    </div>
+
+    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
+    <script type="text/javascript" src="/wangEditor.min.js"></script>
+    <script type="text/javascript">
+        var E = window.wangEditor
+        var editor = new E('#editor')
+        // 或者 var editor = new E( document.getElementById('#editor') )
+        editor.create()
+    </script>
+</body>
+</html>
+```
--- a/templates/orange/static/wangEditor/docs/usage/01-getstart/02-use-module.md
+++ b/templates/orange/static/wangEditor/docs/usage/01-getstart/02-use-module.md
@ -0,0 +1,49 @@
+# 使用模块定义
+
+wangEditor 除了直接使用`<script>`引用之外，还支持`AMD`和`CommonJS`的引用方式。
+
+## AMD
+
+以`require.js`为例演示
+
+先创建`main.js`，代码为
+
+```javascript
+require(['/wangEditor.min.js'], function (E) {
+    var editor = new E('#editor')
+    editor.create()
+})
+```
+
+然后创建页面，代码为
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>wangEditor demo</title>
+</head>
+<body>
+    <div id="editor">
+        <p>欢迎使用 wangEditor 富文本编辑器</p>
+    </div>
+
+    <script data-main="./main.js" src="//cdn.bootcss.com/require.js/2.3.3/require.js"></script>
+</body>
+</html>
+```
+
+## CommonJS
+
+可以使用`npm install wangeditor`安装（注意，这里`wangeditor`全是**小写字母**）
+
+```javascript
+// 引用
+var E = require('wangeditor')  // 使用 npm 安装
+var E = require('/wangEditor.min.js')  // 使用下载的源码
+
+// 创建编辑器
+var editor = new E('#editor')
+editor.create()
+```
--- a/templates/orange/static/wangEditor/docs/usage/01-getstart/03-sperate.md
+++ b/templates/orange/static/wangEditor/docs/usage/01-getstart/03-sperate.md
@ -0,0 +1,48 @@
+# 菜单和编辑区域分离
+
+如果你想要像 知乎专栏、简书、石墨、网易云笔记 这些编辑页面一样，将编辑区域和菜单分离，也可以实现。
+
+这样，菜单和编辑器区域就是使用者可自己控制的元素，可自定义样式。例如：将菜单`fixed`、编辑器区域高度自动增加等
+
+## 代码示例
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>wangEditor 菜单和编辑器区域分离</title>
+    <style type="text/css">
+        .toolbar {
+            border: 1px solid #ccc;
+        }
+        .text {
+            border: 1px solid #ccc;
+            height: 400px;
+        }
+    </style>
+</head>
+<body>
+    <div id="div1" class="toolbar">
+    </div>
+    <div style="padding: 5px 0; color: #ccc">中间隔离带</div>
+    <div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
+        <p>请输入内容</p>
+    </div>
+
+    <script type="text/javascript" src="/wangEditor.min.js"></script>
+    <script type="text/javascript">
+        var E = window.wangEditor
+        var editor1 = new E('#div1', '#div2')  // 两个参数也可以传入 elem 对象，class 选择器
+        editor1.create()
+    </script>
+</body>
+</html>
+```
+
+## 显示效果
+
+从上面代码可以看出，菜单和编辑区域其实就是两个单独的`<div>`，位置、尺寸都可以随便定义。
+
+![](http://images2015.cnblogs.com/blog/138012/201705/138012-20170531224756289-7442240.png)
+
--- a/templates/orange/static/wangEditor/docs/usage/01-getstart/04-multi.md
+++ b/templates/orange/static/wangEditor/docs/usage/01-getstart/04-multi.md
@ -0,0 +1,50 @@
+# 同一个页面创建多个编辑器
+
+wangEditor 支持一个页面创建多个编辑器
+
+## 代码示例
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>wangEditor 一个页面多个编辑器</title>
+    <style type="text/css">
+        .toolbar {
+            background-color: #f1f1f1;
+            border: 1px solid #ccc;
+        }
+        .text {
+            border: 1px solid #ccc;
+            height: 200px;
+        }
+    </style>
+</head>
+<body>
+    <div id="div1" class="toolbar">
+    </div>
+    <div style="padding: 5px 0; color: #ccc">中间隔离带</div>
+    <div id="div2" class="text">
+        <p>第一个 demo（菜单和编辑器区域分开）</p>
+    </div>
+
+    <div id="div3">
+        <p>第二个 demo（常规）</p>
+    </div>
+
+    <!-- 引用js -->
+    <script type="text/javascript" src="/wangEditor.min.js"></script>
+    <script type="text/javascript">
+        var E = window.wangEditor
+
+        var editor1 = new E('#div1', '#div2')
+        editor1.create()
+
+        var editor2 = new E('#div3')
+        editor2.create()
+    </script>
+</body>
+</html>
+```
+