Skip to content

Latest commit

 

History

History
199 lines (158 loc) · 7.78 KB

README.md

File metadata and controls

199 lines (158 loc) · 7.78 KB
Raw

vue-ueditor

【在线演示】

文档不全，正在努力跟进，有问题直接提issues 给我

A Vue.js project

Build Setup

# install dependencies 加载引用
npm install
# serve with hot reload at localhost:8080 开发
npm run dev
# build for production with minification 打包
npm run build
# run e2e tests
npm run e2e
# run all tests 测试
npm test

UEditor 二次开发

百度的UEditor是国内富文本编辑器里功能最强大之一，但是其存在几个问题，界面样式老(hen)旧(chou)，原代码在eslint规则检测时会报错，还有里面弹出框使用组件和iframe代码耦合在一起，操作起来很恶心，不符合现在的mvvm的架构模式。 此工程将UEditor 基于 VUE 进行二次开发，使之满足美工的要求，和可以跟任意组件结合使用。 第

-- static
    -- UEditor                                  使用的UEditor 1.4.3版本
        -- dialogs                              原UEditor弹出框
        -- lang                                 语言
        -- themes                               富文本内置样式
        -- third-party                          第三方插件
        -- index.html                           使用例子
        -- ueditor.config.js                    * 配置文件, 你需要好好看看这个配置文件，大部分功能都能在这里面进行配置修改
        -- ueditor.parse.js                     解析文件

UEditor 功能

因为项目需求，前期只实现了标题、加粗、有序、无序、上传视频、上传图片、撤销、重做这几个功能。但是如果你还想增加其他功能，很简单，只要添加一个图片，给图标添加一个方法，调用相对应的UEditor 命令就好了

对应按钮的事件：
// 加粗
ueBold: function () {
  console.log('bold');
  this.editor.execCommand('bold');
},
// 斜体
ueItalic: function () {
  this.editor.execCommand('italic');
},

使用UEditor的地方

-- src
    -- pages
      -- home
        -- Publish.vue      对应页面上的发表页面

富文本内样式设置 : /static/UEditor/themes/iframe.css

因为是SPA工程，工程的静态资源都上传七牛，所以分别在 ueditor.all.js 中将内置的iframe.css的七牛地址

//维护编辑器一下默认的不在插件中的配置项
UE.Editor.defaultOptions = function(editor){

    var _url = editor.options.UEDITOR_HOME_URL;     // 在ueditor.config.js中配置UEDITOR_HOME_URL路径
    console.log('---------------------', _url);
    return {
        isShow: true,
        initialContent: '',
        initialStyle:'',
        autoClearinitialContent: false,
        iframeCssUrl: _url + 'themes/iframe.css?' + Date.parse(new Date()), //指向七牛地址
        ...
    }
};

项目目录说明

.
|-- build                            // webpack打包编译目录
|   |-- build.js                     // 项目打包入口文件
|   |-- check-versions.js            // 检查node和npm版本是否符合
|   |-- dev-client.js                // 页面自动刷新
|   |-- dev-server.js                // 启动热加载代理服务器
|   |-- utils.js                     // css和style的loader定义
|   |-- webpack.base.conf.js         // 公共打包文件
|   |-- webpack.dev.conf.js          // 本地开发打包文件
|   |-- webpack.prod.conf.js         // 线上环境打包文件
|-- config                           // 项目开发环境配置目录
|   |-- index.js                     // 定义各种环境变量
|-- src                              // 源码目录
|   |-- assets                       // 公共资源目录
|       |-- fonts                    // 公共字体图标
|       |-- images                   // 公共图片文件
|       |-- stylesheets              // 公共样式文件
|   |-- components                   // 公共组件目录
|       |-- header.vue               // 页面头部公共组件
|       |-- loading.vue              // 加载动画组件
|       |-- totop.vue                // 返回顶部组件
|   |-- filters                      // 自定义过滤器目录
|       |-- index.js                 // 过滤器函数文件
|   |-- pages                        // 页面组件目录
|       |-- home.vue                 // 个人中心
|       |-- index.vue                // 网站首页
|       |-- login.vue                // 登录
|       |-- signout.vue              // 退出
|   |-- router                       // 路由配置目录
|       |-- index.js                 // 加载各个router模块
|   |-- service                      // ajax异步请求接口目录
|       |-- index.js                 // 加载各个ajax异步请求
|   |-- store                        // vuex的状态管理目录
|       |-- index.js                 // 加载各种store模块
|   |-- util                         // 工具目录
|       |-- tools.js                 // 公共工具函数库
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|   |-- App.vue                      // 个人主页页面
|-- static                           // 第三方插件
|-- theme                            // vue的自定义主题样式
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 编辑器配置
|-- .eslintignore                    // eslint忽略配置
|-- .eslintrc.js                     // eslint规则配置
|-- .gitattributes                   // git文件类型配置
|-- .gitignore                       // git忽略配置
|-- gitlab-ci.yml                    // gitlab运行脚本配置
|-- favicon.ico                      // 网站ico
|-- index.html                       // 个人中心模板
|-- package.json                     // 项目配置文件
|-- README.md                        // 项目说明文件
|-- yarn.lock                        // yarn安装依赖包的版本信息锁定文件
.

插件选用

选用原则

  • 尽量 No jQuery
  • 兼容性，支持 IE9+
  • Vue生态圈awsome里面的
  • 支持 Vue2.0，不是 1.0

插件列表

  1. 拖拽插件 -- Vue.Draggable

  2. 富文本编辑器 百度UEditor

  3. 图片上传、视频上传 阿里云OSS plupload

  4. 图片截取 Jcrop 基于jquery

  5. 统计图表 -- 基于百度的 ECharts -- vue-echarts

参考文档