第一步,安装依赖,并且把ueditor整个文件夹放入public里边

第二步,在你需要编辑的地方引入,或者main.js中全局引入

XX.vue文件中写入下面代码,创建编辑器。

<vue-ueditor-wrap v-model="form.content" :config="myConfig" @ready='ueditor'></vue-ueditor-wrap>

 第三步,在script中引入

import VueUeditorWrap from 'vue-ueditor-wrap'

第四步,在export default {}中加入

omponents: { VueUeditorWrap },

然后在data(){}中添加工具栏等配置文件

第五步,在methods:{}中配置请求参数,以携带token啥的

    ueditor (ueditor) {
ueditor.execCommand('serverparam', ueditor => {
return {
userToken: window.sessionStorage.getItem('userToken'),
Rtoken: window.sessionStorage.getItem('Rtoken')
}
})

完整配置

<template>
<vue-ueditor-wrap v-model="form.content" :config="myConfig" @ready='ueditor'></vue-ueditor-wrap>
</template> <script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
name: 'ueditor',
omponents: { VueUeditorWrap },
data () {
return {
myConfig: {
serverUrl: '',
UEDITOR_HOME_URL: '/editor/',
autoHeightEnabled: true,
autoFloatEnabled: false,
initialFrameHeight: 540,
initialFrameWidth: '100%',
maximumWords: 2000,
enableAutoSave: true,
toolbars: [[
'fontfamily', // 字体
'fontsize',
'bold', // 加粗
'indent', // 首行缩进
'justifyleft', // 居左对齐
'justifyright', // 居右对齐
'justifycenter', // 居中对齐
'forecolor',
'link',
'insertorderedlist',
'insertunorderedlist',
'insertcode',
'spechars', // 特殊字符
'pagebreak', // 分页
'attachment', // 附件
'imagecenter', // 居中
'wordimage', // 图片转存
'time',
'date' ]]
}
}
},
methods: {
ueditor (ueditor) {
ueditor.execCommand('serverparam', ueditor => {
return {
userToken: window.sessionStorage.getItem('userToken'),
Rtoken: window.sessionStorage.getItem('Rtoken')
}
})
}
}
}
</script>

vue项目中使用百度富文本编辑器ueditor的更多相关文章

  1. thinkphp5.1中适配百度富文本编辑器ueditor

    百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...

  2. 在java项目中加入百度富文本编辑器

    富文本编辑器在项目中很常见,他可以将文本,图片等信息存入数据库,在编辑一些图文混排的信息的时候很有用,比如商城项目的商品详情页,包含很多带有样式的文字和图片. 此前一直使用的百度的富文本编辑器uedi ...

  3. 在 Vue 项目中引入 tinymce 富文本编辑器

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...

  4. 百度富文本编辑器ueditor使用总结

    最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...

  5. springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

  6. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  7. 百度富文本编辑器ueditor使用启示

    百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...

  8. 在MVC中应用百度富文本编辑器

    1.下载.NET版本的百度富文本编辑器,前往 下载.NET版本百度富文本框 2.解压下载的.zip压缩包,将utf8-.net文件夹名称改为:ueditor,复制到MVC根目录下面.结构如下: App ...

  9. 百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)

    折腾了一下午终于把百度富文本编辑器ueditor搞定了!   项目地址:https://github.com/724888/lightnote_new     首先我参考了一个ueditor的demo ...

随机推荐

  1. NC14585 大吉大利,今晚吃鸡

    NC14585 大吉大利,今晚吃鸡 题目 题目描述 糖和抖m在玩个游戏,规定谁输了就要请谁吃顿大餐:抖m给糖a b c三个驻, 并在a柱上放置了数量为n的圆盘,圆盘的大小从上到下依次增大,现在要做的事 ...

  2. 数学公式 Latex 练习

    \[1+x+x^2+x^3+\cdots=\frac{1}{1-x}\quad x\in(-1, 1) \] 证明:设左边式子项数为 \(n\) 那么可以得到: \[\begin{split} S & ...

  3. osx系统使用技巧集锦

    6.禁用dashboard defaults write com.apple.dashboard mcx-disabled -boolean YES && killall Dock 5 ...

  4. Code Runner for VS Code,下载量突破 4000 万!支持超过50种语言

    大家好! 我是韩老师.还记得 6 年前的夏天,我在巨硬写着世界上最好的语言,有时也需要带着游标卡尺写着另一门语言.然而,我对这两门语言都不熟悉,如果能在 VS Code 中方便快捷地运行各种语言,那岂 ...

  5. Template -「矩阵 - 行列式」

    #include <cstdio> int Abs(int x) { return x < 0 ? -x : x; } int Max(int x, int y) { return ...

  6. jdbc 11: 封装自己的jdbc工具类

    jdbc连接mysql,封装自己的jdbc工具类 package com.examples.jdbc.utils; import java.sql.*; import java.util.Resour ...

  7. js基础学习-正则表达式

    正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具. 定义的方法: var patt = new RegExp(pattern, modifiers) // var patt ...

  8. SpringCloud微服务实战——搭建企业级开发框架(四十五):【微服务监控告警实现方式二】使用Actuator(Micrometer)+Prometheus+Grafana实现完整的微服务监控

      无论是使用SpringBootAdmin还是使用Prometheus+Grafana都离不开SpringBoot提供的核心组件Actuator.提到Actuator,又不得不提Micrometer ...

  9. 【定时功能】消息的定时发送-基于RocketMQ

    一.功能介绍 要实现一个消息的定时发送功能,也就是让消息可以在某一天某一个时间具体节点进行发送.而我们公司的业务场景是类似短信的业务,而且数量不小,用户会进行号码.消息内容.定时发送时间等信息的提交. ...

  10. Linux系列之比较命令

    前言 Linux中有两个比较命令,它们分别是comm和diff,在比较文本文件的版本时通常很有用.本文介绍它们的区别和简单用法. comm命令 该命令对两个文本文件进行比较,并显示每个文件独有的行和它 ...