diff --git a/README.md b/README.md index ab7bc5d..9be6011 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,13 @@ wangEditor extension for laravel-admin ====== +fork from:https://github.com/laravel-admin-extensions/wangEditor + +这个仓库独立出来是给自己使用的,目前 wangEditor 的版本为 4.6.9 + +``` bash +// 注意:升级后需要重新发布静态资源 +php artisan vendor:publish --force --tag=laravel-admin-wangEditor +``` 这是一个`laravel-admin`扩展,用来将`wangEditor`集成进`laravel-admin`的表单中 @@ -8,17 +16,13 @@ laravel-admin | extension 1.x | 1.x 2.x |2.x -## 截图 - - - ## 安装 ```bash // laravel-admin 1.x -composer require "laravel-admin-ext/wang-editor:1.*" +composer require leo-yi/wang-editor -// laravel-admin 2.x +// laravel-admin 2.x (请使用官方) composer require laravel-admin-ext/wang-editor ``` @@ -48,14 +52,7 @@ php artisan vendor:publish --tag=laravel-admin-wangEditor ``` -编辑器的配置可以到[wangEditor文档](https://www.kancloud.cn/wangfupeng/wangeditor3/335776)找到,比如配置上传图片的地址[上传图片](https://www.kancloud.cn/wangfupeng/wangeditor3/335782) - -```php - 'config' => [ - // `/upload`接口用来上传文件,上传逻辑要自己实现,可参考下面的`上传图片` - 'uploadImgServer' => '/upload' - ] -``` +编辑器的配置可以到[wangEditor官网](http://www.wangeditor.com/) ## 使用 @@ -64,35 +61,6 @@ php artisan vendor:publish --tag=laravel-admin-wangEditor $form->editor('content'); ``` -## 上传图片 - -图片上传默认使用base64格式化后与文本内容一起存入数据库,如果要上传图片到本地接口,那么下面是这个接口对应的action代码示例: - - use Illuminate\Http\Request; - use Illuminate\Support\Facades\Storage; - - public function upload(Request $request) - { - $urls = []; - - foreach ($request->file() as $file) { - $urls[] = Storage::url($file->store('images')); - } - - return [ - "errno" => 0, - "data" => $urls, - ]; - } - -> **Note:** 配置路由指向这个action,存储的disk配置在`config/filesystem.php`中,这个需参考laravel官方文档。 - -## 支持 - -如果觉得这个项目帮你节约了时间,不妨支持一下;) - - - License ------------ Licensed under [The MIT License (MIT)](LICENSE). diff --git a/composer.json b/composer.json index f0de1ce..24fa71a 100644 --- a/composer.json +++ b/composer.json @@ -1,5 +1,5 @@ { - "name": "laravel-admin-ext/wang-editor", + "name": "leo-yi/wang-editor", "description": "wangEditor extension for laravel-admin", "type": "library", "keywords": ["laravel-admin", "extension", "editor"], @@ -7,13 +7,13 @@ "license": "MIT", "authors": [ { - "name": "song", - "email": "zosong@126.com" + "name": "leo", + "email": "uyihoo@gmail.com" } ], "require": { - "php": ">=7.0.0", - "encore/laravel-admin": ">=1.6" + "php": ">=7.2.0", + "encore/laravel-admin": ">=1.8" }, "require-dev": { "phpunit/phpunit": "~6.0" diff --git a/resources/assets/wangEditor-3.0.10/release/fonts/w-e-icon.woff b/resources/assets/wangEditor-3.0.10/release/fonts/w-e-icon.woff deleted file mode 100755 index fa64c4d..0000000 Binary files a/resources/assets/wangEditor-3.0.10/release/fonts/w-e-icon.woff and /dev/null differ diff --git a/resources/assets/wangEditor-3.0.10/release/wangEditor.css b/resources/assets/wangEditor-3.0.10/release/wangEditor.css deleted file mode 100755 index bb9b0b2..0000000 --- a/resources/assets/wangEditor-3.0.10/release/wangEditor.css +++ /dev/null @@ -1,410 +0,0 @@ -.w-e-toolbar, -.w-e-text-container, -.w-e-menu-panel { - padding: 0; - margin: 0; - box-sizing: border-box; -} -.w-e-toolbar *, -.w-e-text-container *, -.w-e-menu-panel * { - padding: 0; - margin: 0; - box-sizing: border-box; -} -.w-e-clear-fix:after { - content: ""; - display: table; - clear: both; -} - -.w-e-toolbar .w-e-droplist { - position: absolute; - left: 0; - top: 0; - background-color: #fff; - border: 1px solid #f1f1f1; - border-right-color: #ccc; - border-bottom-color: #ccc; -} -.w-e-toolbar .w-e-droplist .w-e-dp-title { - text-align: center; - color: #999; - line-height: 2; - border-bottom: 1px solid #f1f1f1; - font-size: 13px; -} -.w-e-toolbar .w-e-droplist ul.w-e-list { - list-style: none; - line-height: 1; -} -.w-e-toolbar .w-e-droplist ul.w-e-list li.w-e-item { - color: #333; - padding: 5px 0; -} -.w-e-toolbar .w-e-droplist ul.w-e-list li.w-e-item:hover { - background-color: #f1f1f1; -} -.w-e-toolbar .w-e-droplist ul.w-e-block { - list-style: none; - text-align: left; - padding: 5px; -} -.w-e-toolbar .w-e-droplist ul.w-e-block li.w-e-item { - display: inline-block; - *display: inline; - *zoom: 1; - padding: 3px 5px; -} -.w-e-toolbar .w-e-droplist ul.w-e-block li.w-e-item:hover { - background-color: #f1f1f1; -} - -@font-face { - font-family: 'w-e-icon'; - src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('truetype'); - font-weight: normal; - font-style: normal; -} -[class^="w-e-icon-"], -[class*=" w-e-icon-"] { - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: 'w-e-icon' !important; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -.w-e-icon-close:before { - content: "\f00d"; -} -.w-e-icon-upload2:before { - content: "\e9c6"; -} -.w-e-icon-trash-o:before { - content: "\f014"; -} -.w-e-icon-header:before { - content: "\f1dc"; -} -.w-e-icon-pencil2:before { - content: "\e906"; -} -.w-e-icon-paint-brush:before { - content: "\f1fc"; -} -.w-e-icon-image:before { - content: "\e90d"; -} -.w-e-icon-play:before { - content: "\e912"; -} -.w-e-icon-location:before { - content: "\e947"; -} -.w-e-icon-undo:before { - content: "\e965"; -} -.w-e-icon-redo:before { - content: "\e966"; -} -.w-e-icon-quotes-left:before { - content: "\e977"; -} -.w-e-icon-list-numbered:before { - content: "\e9b9"; -} -.w-e-icon-list2:before { - content: "\e9bb"; -} -.w-e-icon-link:before { - content: "\e9cb"; -} -.w-e-icon-happy:before { - content: "\e9df"; -} -.w-e-icon-bold:before { - content: "\ea62"; -} -.w-e-icon-underline:before { - content: "\ea63"; -} -.w-e-icon-italic:before { - content: "\ea64"; -} -.w-e-icon-strikethrough:before { - content: "\ea65"; -} -.w-e-icon-table2:before { - content: "\ea71"; -} -.w-e-icon-paragraph-left:before { - content: "\ea77"; -} -.w-e-icon-paragraph-center:before { - content: "\ea78"; -} -.w-e-icon-paragraph-right:before { - content: "\ea79"; -} -.w-e-icon-terminal:before { - content: "\f120"; -} -.w-e-icon-page-break:before { - content: "\ea68"; -} -.w-e-icon-cancel-circle:before { - content: "\ea0d"; -} - -.w-e-toolbar { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - padding: 0 5px; - /* 单个菜单 */ -} -.w-e-toolbar .w-e-menu { - position: relative; - text-align: center; - padding: 5px 10px; - cursor: pointer; -} -.w-e-toolbar .w-e-menu i { - color: #999; -} -.w-e-toolbar .w-e-menu:hover i { - color: #333; -} -.w-e-toolbar .w-e-active i { - color: #1e88e5; -} -.w-e-toolbar .w-e-active:hover i { - color: #1e88e5; -} - -.w-e-text-container .w-e-panel-container { - position: absolute; - top: 0; - left: 50%; - border: 1px solid #ccc; - border-top: 0; - box-shadow: 1px 1px 2px #ccc; - color: #333; - background-color: #fff; - /* 为 emotion panel 定制的样式 */ - /* 上传图片的 panel 定制样式 */ -} -.w-e-text-container .w-e-panel-container .w-e-panel-close { - position: absolute; - right: 0; - top: 0; - padding: 5px; - margin: 2px 5px 0 0; - cursor: pointer; - color: #999; -} -.w-e-text-container .w-e-panel-container .w-e-panel-close:hover { - color: #333; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-title { - list-style: none; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - font-size: 14px; - margin: 2px 10px 0 10px; - border-bottom: 1px solid #f1f1f1; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-title .w-e-item { - padding: 3px 5px; - color: #999; - cursor: pointer; - margin: 0 3px; - position: relative; - top: 1px; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-title .w-e-active { - color: #333; - border-bottom: 1px solid #333; - cursor: default; - font-weight: 700; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content { - padding: 10px 15px 10px 15px; - font-size: 16px; - /* 输入框的样式 */ - /* 按钮的样式 */ -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input:focus, -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea:focus, -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content button:focus { - outline: none; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea { - width: 100%; - border: 1px solid #ccc; - padding: 5px; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea:focus { - border-color: #1e88e5; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text] { - border: none; - border-bottom: 1px solid #ccc; - font-size: 14px; - height: 20px; - color: #333; - text-align: left; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text].small { - width: 30px; - text-align: center; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text].block { - display: block; - width: 100%; - margin: 10px 0; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text]:focus { - border-bottom: 2px solid #1e88e5; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button { - font-size: 14px; - color: #1e88e5; - border: none; - padding: 5px 10px; - background-color: #fff; - cursor: pointer; - border-radius: 3px; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.left { - float: left; - margin-right: 10px; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.right { - float: right; - margin-left: 10px; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.gray { - color: #999; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.red { - color: #c24f4a; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button:hover { - background-color: #f1f1f1; -} -.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container:after { - content: ""; - display: table; - clear: both; -} -.w-e-text-container .w-e-panel-container .w-e-emoticon-container .w-e-item { - cursor: pointer; - font-size: 18px; - padding: 0 3px; - display: inline-block; - *display: inline; - *zoom: 1; -} -.w-e-text-container .w-e-panel-container .w-e-up-img-container { - text-align: center; -} -.w-e-text-container .w-e-panel-container .w-e-up-img-container .w-e-up-btn { - display: inline-block; - *display: inline; - *zoom: 1; - color: #999; - cursor: pointer; - font-size: 60px; - line-height: 1; -} -.w-e-text-container .w-e-panel-container .w-e-up-img-container .w-e-up-btn:hover { - color: #333; -} - -.w-e-text-container { - position: relative; -} -.w-e-text-container .w-e-progress { - position: absolute; - background-color: #1e88e5; - bottom: 0; - left: 0; - height: 1px; -} -.w-e-text { - padding: 0 10px; - overflow-y: scroll; -} -.w-e-text p, -.w-e-text h1, -.w-e-text h2, -.w-e-text h3, -.w-e-text h4, -.w-e-text h5, -.w-e-text table, -.w-e-text pre { - margin: 10px 0; - line-height: 1.5; -} -.w-e-text ul, -.w-e-text ol { - margin: 10px 0 10px 20px; -} -.w-e-text blockquote { - display: block; - border-left: 8px solid #d0e5f2; - padding: 5px 10px; - margin: 10px 0; - line-height: 1.4; - font-size: 100%; - background-color: #f1f1f1; -} -.w-e-text code { - display: inline-block; - *display: inline; - *zoom: 1; - background-color: #f1f1f1; - border-radius: 3px; - padding: 3px 5px; - margin: 0 3px; -} -.w-e-text pre code { - display: block; -} -.w-e-text table { - border-top: 1px solid #ccc; - border-left: 1px solid #ccc; -} -.w-e-text table td, -.w-e-text table th { - border-bottom: 1px solid #ccc; - border-right: 1px solid #ccc; - padding: 3px 5px; -} -.w-e-text table th { - border-bottom: 2px solid #ccc; - text-align: center; -} -.w-e-text:focus { - outline: none; -} -.w-e-text img { - cursor: pointer; -} -.w-e-text img:hover { - box-shadow: 0 0 5px #333; -} -.w-e-text img.w-e-selected { - border: 2px solid #1e88e5; -} -.w-e-text img.w-e-selected:hover { - box-shadow: none; -} diff --git a/resources/assets/wangEditor-3.0.10/release/wangEditor.js b/resources/assets/wangEditor-3.0.10/release/wangEditor.js deleted file mode 100755 index 49ef504..0000000 --- a/resources/assets/wangEditor-3.0.10/release/wangEditor.js +++ /dev/null @@ -1,4220 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : - typeof define === 'function' && define.amd ? define(factory) : - (global.wangEditor = factory()); -}(this, (function () { 'use strict'; - -/* - poly-fill -*/ - -var polyfill = function () { - - // Object.assign - if (typeof Object.assign != 'function') { - Object.assign = function (target, varArgs) { - // .length of function is 2 - if (target == null) { - // TypeError if undefined or null - throw new TypeError('Cannot convert undefined or null to object'); - } - - var to = Object(target); - - for (var index = 1; index < arguments.length; index++) { - var nextSource = arguments[index]; - - if (nextSource != null) { - // Skip over if undefined or null - for (var nextKey in nextSource) { - // Avoid bugs when hasOwnProperty is shadowed - if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { - to[nextKey] = nextSource[nextKey]; - } - } - } - } - return to; - }; - } - - // IE 中兼容 Element.prototype.matches - if (!Element.prototype.matches) { - Element.prototype.matches = Element.prototype.matchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector || function (s) { - var matches = (this.document || this.ownerDocument).querySelectorAll(s), - i = matches.length; - while (--i >= 0 && matches.item(i) !== this) {} - return i > -1; - }; - } -}; - -/* - DOM 操作 API -*/ - -// 根据 html 代码片段创建 dom 对象 -function createElemByHTML(html) { - var div = void 0; - div = document.createElement('div'); - div.innerHTML = html; - return div.children; -} - -// 是否是 DOM List -function isDOMList(selector) { - if (!selector) { - return false; - } - if (selector instanceof HTMLCollection || selector instanceof NodeList) { - return true; - } - return false; -} - -// 封装 document.querySelectorAll -function querySelectorAll(selector) { - var result = document.querySelectorAll(selector); - if (isDOMList(result)) { - return result; - } else { - return [result]; - } -} - -// 创建构造函数 -function DomElement(selector) { - if (!selector) { - return; - } - - // selector 本来就是 DomElement 对象,直接返回 - if (selector instanceof DomElement) { - return selector; - } - - this.selector = selector; - var nodeType = selector.nodeType; - - // 根据 selector 得出的结果(如 DOM,DOM List) - var selectorResult = []; - if (nodeType === 9) { - // document 节点 - selectorResult = [selector]; - } else if (nodeType === 1) { - // 单个 DOM 节点 - selectorResult = [selector]; - } else if (isDOMList(selector)) { - // DOM List - selectorResult = selector; - } else if (typeof selector === 'string') { - // 字符串 - selector = selector.replace('/\n/mg', '').trim(); - if (selector.indexOf('<') === 0) { - // 如
设置标题
'), - type: 'list', // droplist 以列表形式展示 - list: [{ $elem: $('正文
'), value: '' }], - onClick: function onClick(value) { - // 注意 this 是指向当前的 Head 对象 - _this._command(value); - } - }); -} - -// 原型 -Head.prototype = { - constructor: Head, - - // 执行命令 - _command: function _command(value) { - var editor = this.editor; - - var $selectionElem = editor.selection.getSelectionContainerElem(); - if (editor.$textElem.equal($selectionElem)) { - // 不能选中多行来设置标题,否则会出现问题 - // 例如选中的是
xxx
yyy
来设置标题,设置之后会成为设置列表
'), - type: 'list', // droplist 以列表形式展示 - list: [{ $elem: $(' 有序列表'), value: 'insertOrderedList' }, { $elem: $(' 无序列表'), value: 'insertUnorderedList' }], - onClick: function onClick(value) { - // 注意 this 是指向当前的 List 对象 - _this._command(value); - } - }); -} - -// 原型 -List.prototype = { - constructor: List, - - // 执行命令 - _command: function _command(value) { - var editor = this.editor; - var $textElem = editor.$textElem; - editor.selection.restoreSelection(); - if (editor.cmd.queryCommandState(value)) { - return; - } - editor.cmd.do(value); - - // 验证列表是否被包裹在之内 - var $selectionElem = editor.selection.getSelectionContainerElem(); - if ($selectionElem.getNodeName() === 'LI') { - $selectionElem = $selectionElem.parent(); - } - if (/^ol|ul$/i.test($selectionElem.getNodeName()) === false) { - return; - } - if ($selectionElem.equal($textElem)) { - // 证明是顶级标签,没有被
包裹 - return; - } - var $parent = $selectionElem.parent(); - if ($parent.equal($textElem)) { - // $parent 是顶级标签,不能删除 - return; - } - - $selectionElem.insertAfter($parent); - $parent.remove(); - }, - - // 试图改变 active 状态 - tryChangeActive: function tryChangeActive(e) { - var editor = this.editor; - var $elem = this.$elem; - if (editor.cmd.queryCommandState('insertUnOrderedList') || editor.cmd.queryCommandState('insertOrderedList')) { - this._active = true; - $elem.addClass('w-e-active'); - } else { - this._active = false; - $elem.removeClass('w-e-active'); - } - } -}; - -/* - menu - justify -*/ -// 构造函数 -function Justify(editor) { - var _this = this; - - this.editor = editor; - this.$elem = $('
'); - this.type = 'droplist'; - - // 当前是否 active 状态 - this._active = false; - - // 初始化 droplist - this.droplist = new DropList(this, { - width: 100, - $title: $('对齐方式
'), - type: 'list', // droplist 以列表形式展示 - list: [{ $elem: $(' 靠左'), value: 'justifyLeft' }, { $elem: $(' 居中'), value: 'justifyCenter' }, { $elem: $(' 靠右'), value: 'justifyRight' }], - onClick: function onClick(value) { - // 注意 this 是指向当前的 List 对象 - _this._command(value); - } - }); -} - -// 原型 -Justify.prototype = { - constructor: Justify, - - // 执行命令 - _command: function _command(value) { - var editor = this.editor; - editor.cmd.do(value); - } -}; - -/* - menu - Forecolor -*/ -// 构造函数 -function ForeColor(editor) { - var _this = this; - - this.editor = editor; - this.$elem = $(' '); - this.type = 'droplist'; - - // 当前是否 active 状态 - this._active = false; - - // 初始化 droplist - this.droplist = new DropList(this, { - width: 120, - $title: $('文字颜色
'), - type: 'inline-block', // droplist 内容以 block 形式展示 - list: [{ $elem: $(''), value: '#000000' }, { $elem: $(''), value: '#eeece0' }, { $elem: $(''), value: '#1c487f' }, { $elem: $(''), value: '#4d80bf' }, { $elem: $(''), value: '#c24f4a' }, { $elem: $(''), value: '#8baa4a' }, { $elem: $(''), value: '#7b5ba1' }, { $elem: $(''), value: '#46acc8' }, { $elem: $(''), value: '#f9963b' }, { $elem: $(''), value: '#ffffff' }], - onClick: function onClick(value) { - // 注意 this 是指向当前的 ForeColor 对象 - _this._command(value); - } - }); -} - -// 原型 -ForeColor.prototype = { - constructor: ForeColor, - - // 执行命令 - _command: function _command(value) { - var editor = this.editor; - editor.cmd.do('foreColor', value); - } -}; - -/* - menu - BackColor -*/ -// 构造函数 -function BackColor(editor) { - var _this = this; - - this.editor = editor; - this.$elem = $(' '); - this.type = 'droplist'; - - // 当前是否 active 状态 - this._active = false; - - // 初始化 droplist - this.droplist = new DropList(this, { - width: 120, - $title: $('背景色
'), - type: 'inline-block', // droplist 内容以 block 形式展示 - list: [{ $elem: $(''), value: '#000000' }, { $elem: $(''), value: '#eeece0' }, { $elem: $(''), value: '#1c487f' }, { $elem: $(''), value: '#4d80bf' }, { $elem: $(''), value: '#c24f4a' }, { $elem: $(''), value: '#8baa4a' }, { $elem: $(''), value: '#7b5ba1' }, { $elem: $(''), value: '#46acc8' }, { $elem: $(''), value: '#f9963b' }, { $elem: $(''), value: '#ffffff' }], - onClick: function onClick(value) { - // 注意 this 是指向当前的 BackColor 对象 - _this._command(value); - } - }); -} - -// 原型 -BackColor.prototype = { - constructor: BackColor, - - // 执行命令 - _command: function _command(value) { - var editor = this.editor; - editor.cmd.do('backColor', value); - } -}; - -/* - menu - quote -*/ -// 构造函数 -function Quote(editor) { - this.editor = editor; - this.$elem = $(' '); - this.type = 'click'; - - // 当前是否 active 状态 - this._active = false; -} - -// 原型 -Quote.prototype = { - constructor: Quote, - - onClick: function onClick(e) { - var editor = this.editor; - if (!UA.isIE()) { - editor.cmd.do('formatBlock', ''); - return; - } - - // IE 中不支持 formatBlock,要用其他方式兼容 - - var $selectionElem = editor.selection.getSelectionContainerElem(); - var content = void 0, - $targetELem = void 0; - if ($selectionElem.getNodeName() === 'P') { - // 将 P 转换为 quote - content = $selectionElem.text(); - $targetELem = $('' + content + ''); - $targetELem.insertAfter($selectionElem); - $selectionElem.remove(); - return; - } - if ($selectionElem.getNodeName() === 'BLOCKQUOTE') { - // 撤销 quote - content = $selectionElem.text(); - $targetELem = $('' + content + '
'); - $targetELem.insertAfter($selectionElem); - $selectionElem.remove(); - } - }, - - tryChangeActive: function tryChangeActive(e) { - var editor = this.editor; - var $elem = this.$elem; - var reg = /^BLOCKQUOTE$/i; - var cmdValue = editor.cmd.queryCommandValue('formatBlock'); - if (reg.test(cmdValue)) { - this._active = true; - $elem.addClass('w-e-active'); - } else { - this._active = false; - $elem.removeClass('w-e-active'); - } - } -}; - -/* - menu - code -*/ -// 构造函数 -function Code(editor) { - this.editor = editor; - this.$elem = $(' '); - this.type = 'panel'; - - // 当前是否 active 状态 - this._active = false; -} - -// 原型 -Code.prototype = { - constructor: Code, - - onClick: function onClick(e) { - var editor = this.editor; - var $startElem = editor.selection.getSelectionStartElem(); - var $endElem = editor.selection.getSelectionEndElem(); - var isSeleEmpty = editor.selection.isSelectionEmpty(); - var selectionText = editor.selection.getSelectionText(); - var $code = void 0; - - if (!$startElem.equal($endElem)) { - // 跨元素选择,不做处理 - editor.selection.restoreSelection(); - return; - } - if (!isSeleEmpty) { - // 选取不是空,用包裹即可 - $code = $('
' + selectionText + '
'); - editor.cmd.do('insertElem', $code); - editor.selection.createRangeByElem($code, false); - editor.selection.restoreSelection(); - return; - } - - // 选取是空,且没有夸元素选择,则插入- if (this._active) { - // 选中状态,将编辑内容 - this._createPanel($startElem.html()); - } else { - // 未选中状态,将创建内容 - this._createPanel(); - } - }, - - _createPanel: function _createPanel(value) { - var _this = this; - - // value - 要编辑的内容 - value = value || ''; - var type = !value ? 'new' : 'edit'; - var textId = getRandom('texxt'); - var btnId = getRandom('btn'); - - var panel = new Panel(this, { - width: 500, - // 一个 Panel 包含多个 tab - tabs: [{ - // 标题 - title: '插入代码', - // 模板 - tpl: '
\n \n\n', - // 事件绑定 - events: [ - // 插入代码 - { - selector: '#' + btnId, - type: 'click', - fn: function fn() { - var $text = $('#' + textId); - var text = $text.val() || $text.html(); - text = replaceHtmlSymbol(text); - if (type === 'new') { - // 新插入 - _this._insertCode(text); - } else { - // 编辑更新 - _this._updateCode(text); - } - - // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭 - return true; - } - }] - } // first tab end - ] // tabs end - }); // new Panel end - - // 显示 panel - panel.show(); - - // 记录属性 - this.panel = panel; - }, - - // 插入代码 - _insertCode: function _insertCode(value) { - var editor = this.editor; - editor.cmd.do('insertHTML', '' + value + '
'); - }, - - // 更新代码 - _updateCode: function _updateCode(value) { - var editor = this.editor; - var $selectionELem = editor.selection.getSelectionContainerElem(); - if (!$selectionELem) { - return; - } - $selectionELem.html(value); - editor.selection.restoreSelection(); - }, - - // 试图改变 active 状态 - tryChangeActive: function tryChangeActive(e) { - var editor = this.editor; - var $elem = this.$elem; - var $selectionELem = editor.selection.getSelectionContainerElem(); - if (!$selectionELem) { - return; - } - var $parentElem = $selectionELem.parent(); - if ($selectionELem.getNodeName() === 'CODE' && $parentElem.getNodeName() === 'PRE') { - this._active = true; - $elem.addClass('w-e-active'); - } else { - this._active = false; - $elem.removeClass('w-e-active'); - } - } -}; - -/* - menu - emoticon -*/ -// 构造函数 -function Emoticon(editor) { - this.editor = editor; - this.$elem = $(' '); - this.type = 'panel'; - - // 当前是否 active 状态 - this._active = false; -} - -// 原型 -Emoticon.prototype = { - constructor: Emoticon, - - onClick: function onClick() { - this._createPanel(); - }, - - _createPanel: function _createPanel() { - var _this = this; - - // 拼接表情字符串 - var faceHtml = ''; - var faceStr = '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😜 😝 😛 🤑 🤗 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😤 😠 😡 😶 😐 😑 😯 😦 😧 😮 😲 😵 😳 😱 😨 😰 😢 😥 😭 😓 😪 😴 🙄 🤔 😬 🤐'; - faceStr.split(/\s/).forEach(function (item) { - if (item) { - faceHtml += '' + item + ''; - } - }); - - var handHtml = ''; - var handStr = '🙌 👏 👋 👍 👎 👊 ✊ ️👌 ✋ 👐 💪 🙏 ️👆 👇 👈 👉 🖕 🖐 🤘 🖖'; - handStr.split(/\s/).forEach(function (item) { - if (item) { - handHtml += '' + item + ''; - } - }); - - var panel = new Panel(this, { - width: 300, - height: 200, - // 一个 Panel 包含多个 tab - tabs: [{ - // 标题 - title: '表情', - // 模板 - tpl: '
' + faceHtml + '', - // 事件绑定 - events: [{ - selector: 'span.w-e-item', - type: 'click', - fn: function fn(e) { - var target = e.target; - _this._insert(target.innerHTML); - // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭 - return true; - } - }] - }, // first tab end - { - // 标题 - title: '手势', - // 模板 - tpl: '' + handHtml + '', - // 事件绑定 - events: [{ - selector: 'span.w-e-item', - type: 'click', - fn: function fn(e) { - var target = e.target; - _this._insert(target.innerHTML); - // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭 - return true; - } - }] - } // second tab end - ] // tabs end - }); - - // 显示 panel - panel.show(); - - // 记录属性 - this.panel = panel; - }, - - // 插入表情 - _insert: function _insert(emoji) { - var editor = this.editor; - editor.cmd.do('insertHTML', '' + emoji + ''); - } -}; - -/* - menu - table -*/ -// 构造函数 -function Table(editor) { - this.editor = editor; - this.$elem = $(' '); - this.type = 'panel'; - - // 当前是否 active 状态 - this._active = false; -} - -// 原型 -Table.prototype = { - constructor: Table, - - onClick: function onClick() { - if (this._active) { - // 编辑现有表格 - this._createEditPanel(); - } else { - // 插入新表格 - this._createInsertPanel(); - } - }, - - // 创建插入新表格的 panel - _createInsertPanel: function _createInsertPanel() { - var _this = this; - - // 用到的 id - var btnInsertId = getRandom('btn'); - var textRowNum = getRandom('row'); - var textColNum = getRandom('col'); - - var panel = new Panel(this, { - width: 250, - // panel 包含多个 tab - tabs: [{ - // 标题 - title: '插入表格', - // 模板 - tpl: '\n', - // 事件绑定 - events: [{ - // 点击按钮,插入表格 - selector: '#' + btnInsertId, - type: 'click', - fn: function fn() { - var rowNum = parseInt($('#' + textRowNum).val()); - var colNum = parseInt($('#' + textColNum).val()); - - if (rowNum && colNum && rowNum > 0 && colNum > 0) { - // form 数据有效 - _this._insert(rowNum, colNum); - } - - // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭 - return true; - } - }] - } // first tab end - ] // tabs end - }); // panel end - - // 展示 panel - panel.show(); - - // 记录属性 - this.panel = panel; - }, - - // 插入表格 - _insert: function _insert(rowNum, colNum) { - // 拼接 table 模板 - var r = void 0, - c = void 0; - var html = '\n \u521B\u5EFA\n \n \u884C\n \n \u5217\u7684\u8868\u683C\n
\n \n'; - for (r = 0; r < rowNum; r++) { - html += '
'; - if (r === 0) { - for (c = 0; c < colNum; c++) { - html += ' '; - } - html += ''; - } - } else { - for (c = 0; c < colNum; c++) { - html += ' '; - } - } - html += ' '; - - // 执行命令 - var editor = this.editor; - editor.cmd.do('insertHTML', html); - - // 防止 firefox 下出现 resize 的控制点 - editor.cmd.do('enableObjectResizing', false); - editor.cmd.do('enableInlineTableEditing', false); - }, - - // 创建编辑表格的 panel - _createEditPanel: function _createEditPanel() { - var _this2 = this; - - // 可用的 id - var addRowBtnId = getRandom('add-row'); - var addColBtnId = getRandom('add-col'); - var delRowBtnId = getRandom('del-row'); - var delColBtnId = getRandom('del-col'); - var delTableBtnId = getRandom('del-table'); - - // 创建 panel 对象 - var panel = new Panel(this, { - width: 320, - // panel 包含多个 tab - tabs: [{ - // 标题 - title: '编辑表格', - // 模板 - tpl: '
\n\n ', - // 事件绑定 - events: [{ - // 增加行 - selector: '#' + addRowBtnId, - type: 'click', - fn: function fn() { - _this2._addRow(); - // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭 - return true; - } - }, { - // 增加列 - selector: '#' + addColBtnId, - type: 'click', - fn: function fn() { - _this2._addCol(); - // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭 - return true; - } - }, { - // 删除行 - selector: '#' + delRowBtnId, - type: 'click', - fn: function fn() { - _this2._delRow(); - // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭 - return true; - } - }, { - // 删除列 - selector: '#' + delColBtnId, - type: 'click', - fn: function fn() { - _this2._delCol(); - // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭 - return true; - } - }, { - // 删除表格 - selector: '#' + delTableBtnId, - type: 'click', - fn: function fn() { - _this2._delTable(); - // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭 - return true; - } - }] - }] - }); - // 显示 panel - panel.show(); - }, - - // 获取选中的单元格的位置信息 - _getLocationData: function _getLocationData() { - var result = {}; - var editor = this.editor; - var $selectionELem = editor.selection.getSelectionContainerElem(); - if (!$selectionELem) { - return; - } - var nodeName = $selectionELem.getNodeName(); - if (nodeName !== 'TD' && nodeName !== 'TH') { - return; - } - - // 获取 td index - var $tr = $selectionELem.parent(); - var $tds = $tr.children(); - var tdLength = $tds.length; - $tds.forEach(function (td, index) { - if (td === $selectionELem[0]) { - // 记录并跳出循环 - result.td = { - index: index, - elem: td, - length: tdLength - }; - return false; - } - }); - - // 获取 tr index - var $tbody = $tr.parent(); - var $trs = $tbody.children(); - var trLength = $trs.length; - $trs.forEach(function (tr, index) { - if (tr === $tr[0]) { - // 记录并跳出循环 - result.tr = { - index: index, - elem: tr, - length: trLength - }; - return false; - } - }); - - // 返回结果 - return result; - }, - - // 增加行 - _addRow: function _addRow() { - // 获取当前单元格的位置信息 - var locationData = this._getLocationData(); - if (!locationData) { - return; - } - var trData = locationData.tr; - var $currentTr = $(trData.elem); - var tdData = locationData.td; - var tdLength = tdData.length; - - // 拼接即将插入的字符串 - var newTr = document.createElement('tr'); - var tpl = '', - i = void 0; - for (i = 0; i < tdLength; i++) { - tpl += ''; - } - newTr.innerHTML = tpl; - // 插入 - $(newTr).insertAfter($currentTr); - }, - - // 增加列 - _addCol: function _addCol() { - // 获取当前单元格的位置信息 - var locationData = this._getLocationData(); - if (!locationData) { - return; - } - var trData = locationData.tr; - var tdData = locationData.td; - var tdIndex = tdData.index; - var $currentTr = $(trData.elem); - var $trParent = $currentTr.parent(); - var $trs = $trParent.children(); - - // 遍历所有行 - $trs.forEach(function (tr) { - var $tr = $(tr); - var $tds = $tr.children(); - var $currentTd = $tds.get(tdIndex); - var name = $currentTd.getNodeName().toLowerCase(); - - // new 一个 td,并插入 - var newTd = document.createElement(name); - $(newTd).insertAfter($currentTd); - }); - }, - - // 删除行 - _delRow: function _delRow() { - // 获取当前单元格的位置信息 - var locationData = this._getLocationData(); - if (!locationData) { - return; - } - var trData = locationData.tr; - var $currentTr = $(trData.elem); - $currentTr.remove(); - }, - - // 删除列 - _delCol: function _delCol() { - // 获取当前单元格的位置信息 - var locationData = this._getLocationData(); - if (!locationData) { - return; - } - var trData = locationData.tr; - var tdData = locationData.td; - var tdIndex = tdData.index; - var $currentTr = $(trData.elem); - var $trParent = $currentTr.parent(); - var $trs = $trParent.children(); - - // 遍历所有行 - $trs.forEach(function (tr) { - var $tr = $(tr); - var $tds = $tr.children(); - var $currentTd = $tds.get(tdIndex); - // 删除 - $currentTd.remove(); - }); - }, - - // 删除表格 - _delTable: function _delTable() { - var editor = this.editor; - var $selectionELem = editor.selection.getSelectionContainerElem(); - if (!$selectionELem) { - return; - } - var $table = $selectionELem.parentUntil('table'); - if (!$table) { - return; - } - $table.remove(); - }, - - // 试图改变 active 状态 - tryChangeActive: function tryChangeActive(e) { - var editor = this.editor; - var $elem = this.$elem; - var $selectionELem = editor.selection.getSelectionContainerElem(); - if (!$selectionELem) { - return; - } - var nodeName = $selectionELem.getNodeName(); - if (nodeName === 'TD' || nodeName === 'TH') { - this._active = true; - $elem.addClass('w-e-active'); - } else { - this._active = false; - $elem.removeClass('w-e-active'); - } - } -}; - -/* - menu - video -*/ -// 构造函数 -function Video(editor) { - this.editor = editor; - this.$elem = $(' '); - this.type = 'panel'; - - // 当前是否 active 状态 - this._active = false; -} - -// 原型 -Video.prototype = { - constructor: Video, - - onClick: function onClick() { - this._createPanel(); - }, - - _createPanel: function _createPanel() { - var _this = this; - - // 创建 id - var textValId = getRandom('text-val'); - var btnId = getRandom('btn'); - - // 创建 panel - var panel = new Panel(this, { - width: 350, - // 一个 panel 多个 tab - tabs: [{ - // 标题 - title: '插入视频', - // 模板 - tpl: ' \n \n', - // 事件绑定 - events: [{ - selector: '#' + btnId, - type: 'click', - fn: function fn() { - var $text = $('#' + textValId); - var val = $text.val().trim(); - - // 测试用视频地址 - // - - if (val) { - // 插入视频 - _this._insert(val); - } - - // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭 - return true; - } - }] - } // first tab end - ] // tabs end - }); // panel end - - // 显示 panel - panel.show(); - - // 记录属性 - this.panel = panel; - }, - - // 插入视频 - _insert: function _insert(val) { - var editor = this.editor; - editor.cmd.do('insertHTML', val + ' \n'); - } -}; - -/* - menu - img -*/ -// 构造函数 -function Image(editor) { - this.editor = editor; - var imgMenuId = getRandom('w-e-img'); - this.$elem = $(' '); - editor.imgMenuId = imgMenuId; - this.type = 'panel'; - - // 当前是否 active 状态 - this._active = false; -} - -// 原型 -Image.prototype = { - constructor: Image, - - onClick: function onClick() { - var editor = this.editor; - var config = editor.config; - if (config.qiniu) { - return; - } - if (this._active) { - this._createEditPanel(); - } else { - this._createInsertPanel(); - } - }, - - _createEditPanel: function _createEditPanel() { - var editor = this.editor; - - // id - var width30 = getRandom('width-30'); - var width50 = getRandom('width-50'); - var width100 = getRandom('width-100'); - var delBtn = getRandom('del-btn'); - - // tab 配置 - var tabsConfig = [{ - title: '编辑图片', - tpl: '
\n\n ', - events: [{ - selector: '#' + width30, - type: 'click', - fn: function fn() { - var $img = editor._selectedImg; - if ($img) { - $img.css('max-width', '30%'); - } - // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭 - return true; - } - }, { - selector: '#' + width50, - type: 'click', - fn: function fn() { - var $img = editor._selectedImg; - if ($img) { - $img.css('max-width', '50%'); - } - // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭 - return true; - } - }, { - selector: '#' + width100, - type: 'click', - fn: function fn() { - var $img = editor._selectedImg; - if ($img) { - $img.css('max-width', '100%'); - } - // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭 - return true; - } - }, { - selector: '#' + delBtn, - type: 'click', - fn: function fn() { - var $img = editor._selectedImg; - if ($img) { - $img.remove(); - } - // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭 - return true; - } - }] - }]; - - // 创建 panel 并显示 - var panel = new Panel(this, { - width: 300, - tabs: tabsConfig - }); - panel.show(); - - // 记录属性 - this.panel = panel; - }, - - _createInsertPanel: function _createInsertPanel() { - var editor = this.editor; - var uploadImg = editor.uploadImg; - var config = editor.config; - - // id - var upTriggerId = getRandom('up-trigger'); - var upFileId = getRandom('up-file'); - var linkUrlId = getRandom('link-url'); - var linkBtnId = getRandom('link-btn'); - - // tabs 的配置 - var tabsConfig = [{ - title: '上传图片', - tpl: '\n', - events: [{ - // 触发选择图片 - selector: '#' + upTriggerId, - type: 'click', - fn: function fn() { - var $file = $('#' + upFileId); - var fileElem = $file[0]; - if (fileElem) { - fileElem.click(); - } else { - // 返回 true 可关闭 panel - return true; - } - } - }, { - // 选择图片完毕 - selector: '#' + upFileId, - type: 'change', - fn: function fn() { - var $file = $('#' + upFileId); - var fileElem = $file[0]; - if (!fileElem) { - // 返回 true 可关闭 panel - return true; - } - - // 获取选中的 file 对象列表 - var fileList = fileElem.files; - if (fileList.length) { - uploadImg.uploadImg(fileList); - } - - // 返回 true 可关闭 panel - return true; - } - }] - }, // first tab end - { - title: '网络图片', - tpl: '\n \n\n \n\n \n', - events: [{ - selector: '#' + linkBtnId, - type: 'click', - fn: function fn() { - var $linkUrl = $('#' + linkUrlId); - var url = $linkUrl.val().trim(); - - if (url) { - uploadImg.insertLinkImg(url); - } - - // 返回 true 表示函数执行结束之后关闭 panel - return true; - } - }] - } // second tab end - ]; // tabs end - - // 判断 tabs 的显示 - var tabsConfigResult = []; - if ((config.uploadImgShowBase64 || config.uploadImgServer || config.customUploadImg) && window.FileReader) { - // 显示“上传图片” - tabsConfigResult.push(tabsConfig[0]); - } - if (config.showLinkImg) { - // 显示“网络图片” - tabsConfigResult.push(tabsConfig[1]); - } - - // 创建 panel 并显示 - var panel = new Panel(this, { - width: 300, - tabs: tabsConfigResult - }); - panel.show(); - - // 记录属性 - this.panel = panel; - }, - - // 试图改变 active 状态 - tryChangeActive: function tryChangeActive(e) { - var editor = this.editor; - var $elem = this.$elem; - if (editor._selectedImg) { - this._active = true; - $elem.addClass('w-e-active'); - } else { - this._active = false; - $elem.removeClass('w-e-active'); - } - } -}; - -/* - 所有菜单的汇总 -*/ - -// 存储菜单的构造函数 -var MenuConstructors = {}; - -MenuConstructors.bold = Bold; - -MenuConstructors.head = Head; - -MenuConstructors.link = Link; - -MenuConstructors.italic = Italic; - -MenuConstructors.redo = Redo; - -MenuConstructors.strikeThrough = StrikeThrough; - -MenuConstructors.underline = Underline; - -MenuConstructors.undo = Undo; - -MenuConstructors.list = List; - -MenuConstructors.justify = Justify; - -MenuConstructors.foreColor = ForeColor; - -MenuConstructors.backColor = BackColor; - -MenuConstructors.quote = Quote; - -MenuConstructors.code = Code; - -MenuConstructors.emoticon = Emoticon; - -MenuConstructors.table = Table; - -MenuConstructors.video = Video; - -MenuConstructors.image = Image; - -/* - 菜单集合 -*/ -// 构造函数 -function Menus(editor) { - this.editor = editor; - this.menus = {}; -} - -// 修改原型 -Menus.prototype = { - constructor: Menus, - - // 初始化菜单 - init: function init() { - var _this = this; - - var editor = this.editor; - var config = editor.config || {}; - var configMenus = config.menus || []; // 获取配置中的菜单 - - // 根据配置信息,创建菜单 - configMenus.forEach(function (menuKey) { - var MenuConstructor = MenuConstructors[menuKey]; - if (MenuConstructor && typeof MenuConstructor === 'function') { - // 创建单个菜单 - _this.menus[menuKey] = new MenuConstructor(editor); - } - }); - - // 添加到菜单栏 - this._addToToolbar(); - - // 绑定事件 - this._bindEvent(); - }, - - // 添加到菜单栏 - _addToToolbar: function _addToToolbar() { - var editor = this.editor; - var $toolbarElem = editor.$toolbarElem; - var menus = this.menus; - var config = editor.config; - // config.zIndex 是配置的编辑区域的 z-index,菜单的 z-index 得在其基础上 +1 - var zIndex = config.zIndex + 1; - objForEach(menus, function (key, menu) { - var $elem = menu.$elem; - if ($elem) { - // 设置 z-index - $elem.css('z-index', zIndex); - $toolbarElem.append($elem); - } - }); - }, - - // 绑定菜单 click mouseenter 事件 - _bindEvent: function _bindEvent() { - var menus = this.menus; - var editor = this.editor; - objForEach(menus, function (key, menu) { - var type = menu.type; - if (!type) { - return; - } - var $elem = menu.$elem; - var droplist = menu.droplist; - var panel = menu.panel; - - // 点击类型,例如 bold - if (type === 'click' && menu.onClick) { - $elem.on('click', function (e) { - if (editor.selection.getRange() == null) { - return; - } - menu.onClick(e); - }); - } - - // 下拉框,例如 head - if (type === 'droplist' && droplist) { - $elem.on('mouseenter', function (e) { - if (editor.selection.getRange() == null) { - return; - } - // 显示 - droplist.showTimeoutId = setTimeout(function () { - droplist.show(); - }, 200); - }).on('mouseleave', function (e) { - // 隐藏 - droplist.hideTimeoutId = setTimeout(function () { - droplist.hide(); - }, 0); - }); - } - - // 弹框类型,例如 link - if (type === 'panel' && menu.onClick) { - $elem.on('click', function (e) { - e.stopPropagation(); - if (editor.selection.getRange() == null) { - return; - } - // 在自定义事件中显示 panel - menu.onClick(e); - }); - } - }); - }, - - // 尝试修改菜单状态 - changeActive: function changeActive() { - var menus = this.menus; - objForEach(menus, function (key, menu) { - if (menu.tryChangeActive) { - setTimeout(function () { - menu.tryChangeActive(); - }, 100); - } - }); - } -}; - -/* - 粘贴信息的处理 -*/ - -// 获取粘贴的纯文本 -function getPasteText(e) { - var clipboardData = e.clipboardData || e.originalEvent && e.originalEvent.clipboardData; - var pasteText = void 0; - if (clipboardData == null) { - pasteText = window.clipboardData && window.clipboardData.getData('text'); - } else { - pasteText = clipboardData.getData('text/plain'); - } - - return replaceHtmlSymbol(pasteText); -} - -// 获取粘贴的html -function getPasteHtml(e, filterStyle) { - var clipboardData = e.clipboardData || e.originalEvent && e.originalEvent.clipboardData; - var pasteText = void 0, - pasteHtml = void 0; - if (clipboardData == null) { - pasteText = window.clipboardData && window.clipboardData.getData('text'); - } else { - pasteText = clipboardData.getData('text/plain'); - pasteHtml = clipboardData.getData('text/html'); - } - if (!pasteHtml && pasteText) { - pasteHtml = ' \n' + replaceHtmlSymbol(pasteText) + '
'; - } - if (!pasteHtml) { - return; - } - - // 过滤word中状态过来的无用字符 - var docSplitHtml = pasteHtml.split('