一款基于vue好用的富文本编辑器Froala WYSIWYG Editor

adam1q84 发布于2019-08-23 12:12 / 2642人阅读

摘要：前言基于使用过几款富文本编辑器趟过坑，但是这几款总感觉不是那么适合项目需求，苦苦搜寻总算找到一款好用的富文本编辑器支持特性快速预览使用废话不多说，开始撸代码安装引入引入引入中文语言包引入此处可在中引入地址

前言：

基于Vue使用过几款富文本编辑器：
wangEditor
vue-quill-editor
vue2-editor

趟过坑，但是这几款总感觉不是那么适合项目需求，苦苦搜寻总算找到一款好用的富文本编辑器Froala WYSIWYG Editor

支持特性：

快速预览Demo：
Basic demo:
Inline demo:
Full list:

使用

废话不多说，开始撸代码

Vuejs v2.0+ -Froala WYSIWYG Editor

安装

npm install vue-froala-wysiwyg --save

引入 main.js

// 引入 Froala Editor js file.
require("froala-editor/js/froala_editor.pkgd.min")

//引入中文语言包
require("froala-editor/js/languages/zh_cn")

//引入 Froala Editor css files.
require("froala-editor/css/froala_editor.pkgd.min.css")
require("font-awesome/css/font-awesome.css")//此处可在index.html中引入：font-awesome cdn地址：
require("froala-editor/css/froala_style.min.css")

// Import and use Vue Froala lib.
import VueFroala from "vue-froala-wysiwyg"
Vue.use(VueFroala)

app.vue

主要通过config来配置富文本编辑器，v-model来数据传递

Webpack settings

var webpack = require("webpack")
var path = require("path")

module.exports = {
  module: {
    loaders: [

      // ...

      // Css loader. //css装载器
      {
        test: /.css$/,
        loader: "vue-style-loader!css-loader"
      },

      // Font awesome loader. //如果引入Font awesome 需要这块设置
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: "url",
        query: {
          limit: 10000,
          name: path.posix.join("path/to/yours/assets/directory", "fonts/[name].[hash:7].[ext]")
        }
      }
    ]
  },
  vue: {
    loaders: {

      // ...

      // Css loader for Webpack 1.x .
      css: "vue-style-loader!css-loader"
    }
  },
  plugins: [

    // ...

    // Jquery loader plugin. 这块挺重要
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]
})

预览

校长红包福利

GPU云服务器云服务器富文本编辑器 linux文本编辑器富文本web编辑器 php使用文本编辑器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98103.html

手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

zgbgx 2019-08-29 12:46 评论0 收藏0
summernote(富文本编辑器)将附件与图片上传到自己的服务器（vue项目）

摘要：将创建好的对象，再插入到编辑器中注意这里不用方法因为他会额外的标签具体查看，另外当选取本地文件的时候，此时的富文本编辑器会失去焦点，插入新的节点的时候，总是从起始点开始插入，而非从当前光标的位置进行插入。 1.上传图片至自己的服务器（这个官方都有例子，重点介绍附件上传）图片上传官方网址 // onChange callback $(#summernote).summernote({ ...

wqj97 2019-08-02 12:03 评论0 收藏0
summernote(富文本编辑器)将附件与图片上传到自己的服务器（vue项目）

摘要：将创建好的对象，再插入到编辑器中注意这里不用方法因为他会额外的标签具体查看，另外当选取本地文件的时候，此时的富文本编辑器会失去焦点，插入新的节点的时候，总是从起始点开始插入，而非从当前光标的位置进行插入。 1.上传图片至自己的服务器（这个官方都有例子，重点介绍附件上传）图片上传官方网址 // onChange callback $(#summernote).summernote({ ...

xiaoxiaozi 2019-08-26 13:22 评论0 收藏0
基于 Vue 的移动端富文本编辑器 vue-quill-editor 实战

摘要：优秀的富文本编辑器有很多，比如，等，但并不是每个都能在移动端有很好的表现。是百度的老牌富文本编辑器，但界面有一股上世纪的感觉，官网最新的一条动态停留在。优秀的富文本编辑器有很多，比如：UEditor，wangEditor 等，但并不是每个都能在移动端有很好的表现。我们暂且不讨论移动端是否真的需要富文本，既然有这需求，就把它实现出来。失败的尝试正确的选择是成功的开始，开发之前肯定要做一些...

wing324 2019-05-27 17:41 评论0 收藏0