- 使用 Spring Initializr 创建 Spring Boot 应用程序
- 在Spring Boot中配置Cassandra
- 在 Spring Boot 上配置 Tomcat 连接池
- 将Camel消息路由到嵌入WildFly的Artemis上
通过前面系统的学习,我相信大家都能够对 vue
项目有了一个基本的认知。现在是不是已经开始上手做自己的项目了呢?呵呵,当然这是极好的。但是我们一般用 vue
来制作管理后台,在制作管理后台的时候,不可避免的,我们需要用到富文本编辑器。
我尝试过 github
上的若干富文本编辑器,虽然能够实现一部分需求,但是还是不能充分满足我的需求。而百度推出的 UEditor
编辑器口碑不错,文档充分,还是很不错的选择(百度能有良心产品,不容易啊!)。但是 UEditor
没有 npm
安装,需要我们自己手工引入进来。这个到底怎么解决呢,我查找了一些资料,把这些给理顺了。今天出这个文章给遇到这个问题的朋友参考。
我还是在我先前的代码上加上这部分内容。源码参考:https://github.com/fengcms/vue-demo-cnodejs
首先,下载 UEditor
源码。我这边下载的是 UEditor 1.4.3.3 PHP UTF-8版本下载地址
下载之后,把资源放到 /static/ue/
目录下。文档结构如下:
我们打开 ueditor.config.js
找到 window.UEDITOR_HOME_UR
将它设置为:
window.UEDITOR_HOME_URL = "/static/ue/";
然后我们可以给一些默认的参数,比如编辑器的默认宽高等:
,initialFrameWidth: null
,initialFrameHeight: 480
上面的编码风格也是满奇葩的,还好还好
其他的配置参数,请参考官方文档进行配置:http://fex.baidu.com/ueditor/
我们打开 /src/main.js
文件,在合适位置插入下面的代码:
// 配置百度编辑器
import '../static/ue/ueditor.config.js'
import '../static/ue/ueditor.all.min.js'
import '../static/ue/lang/zh-cn/zh-cn.js'
import '../static/ue/ueditor.parse.min.js'
如果不知道合适位置是什么位置,可以参考我的 github
源码。我不能每次都解释,或者粘贴全部代码过来。
我们在 /src/components/
目录下创建 ue.vue
文件,作为我们的编辑器组件文件。
文件内容如下:
<template>
<div>
<script id="editor" type="text/plain"></script>
</div>
</template>
<script>
export default {
name: 'ue',
data () {
return {
editor: null
}
},
props: {
value: '',
config: {}
},
mounted () {
const _this = this
this.editor = window.UE.getEditor('editor', this.config)
this.editor.addListener('ready', function () {
_this.editor.setContent(_this.value)
})
},
methods: {
getUEContent () {
return this.editor.getContent()
}
},
destroyed () {
this.editor.destroy()
}
}
</script>
好,这段代码不难,应该能够理解。如果不能够理解也没关系,只需要知道下面这段代码是接受我们的参数的就可以了。
props: {
value: '',
config: {}
},
其中 value
是默认的编辑器的文字。一般我们留空即可,而 config
是编辑器的配置参数。这里就是上一节中讲的那些配置,这里可以接受个性配置参数。
好,这个文件扔这里不管了。
我们创建一个页面,路由配置以及其他内容不表,不清楚看我 github
代码演示。
内容如下:
<template>
<div>
<Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
<input type="button" value="显示编辑器内容(从控制台查看)" @click="returnContent">
</div>
</template>
<script>
import Uediter from '@/components/ue.vue'
export default {
components: {Uediter},
data () {
return {
dat: {
content: ''
},
ueditor: {
value: '编辑器默认文字',
config: {}
}
}
},
methods: {
returnContent () {
this.dat.content = this.$refs.ue.getUEContent()
console.log(this.dat.content)
}
}
}
</script>
这里,我们将组件引用进来,并且可以配置一些参数。我不习惯把配置参数放在根下面,所以搞了一个:
ueditor: {
value: '编辑器默认文字',
config: {}
}
亲测成功,我没有配置上传图片等接口对接,不过这是后端的工作。其他的,比如本地存储之类的,都是没有问题的。
这里需要注意的是,编辑器的内容不能实时的保存进我们的 dat.content
里面,需要触发一下 returnContent
方法,才可以获取到这个数据,实际开发中,点击提交按钮时触发一下即可
最终效果如下:
参考了很多人的资料,在这里一一感谢:
ueditor.value
是可以接收 html
代码的。我们在编辑的时候,把拿到的数据,给灌到这里,就可以在编辑器正确的显示出来了。之前忘记说明这个事情了。
如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。
本文由 FungLeo 原创,允许转载,但转载必须保留首发链接。
我有一个 axios 拦截器,我在其中捕获 401 错误并将用户重定向到登录页面。问题是在 window.location 运行之后和实际重定向之前 - axios 操作继续到原始调用者。我想停止进程
我正在调用一个返回至少 2 个成功状态代码的 Rest API。 正常的 200 OK 和 202 Accepted 状态代码。 两者都在正文中返回一个内容。 如果我在 postman 中执行我的电话
任何人都可以提出任何从 Axios 获得响应时间的方法吗?我找到了 axios-timing,但我真的不喜欢它(有争议,我知道)。我只是想知道是否有人找到了一些记录响应时间的好方法。 最佳答案 您可以
我正在尝试使用 axios.create() 创建一个 axios 实例但似乎无法弄清楚如何在实例上设置默认方法。 不工作 export default axios.create({ requ
我正在将 axios 用于 React 应用程序,并且我想记录我在应用程序中任何位置进行的所有 axios 调用。我已经通过 create 函数使用了 axios 的单个全局实例,并且我能够记录通用的
我有一个公开一些端点的 NestJS 应用程序,我已经编写了一个客户端应用程序,我计划将其作为 NPM 包发布以与 nest 服务器一起使用。我正在尝试编写启动 nest 服务器的端到端测试,将其连接
我一直在使用这个将图像文件上传到 API (Graphcool),并且一切正常: fileUpload(file) { let data = new FormData();
在我的代码库中有使用创建的各种 Axios 实例 axios.create() 因为我的应用程序中使用了多个基本 URL。所以每个 baseURL 我们都创建了一个对应的 Axios 实例。 现在在
我有一个 API 实用程序函数,它使用构造函数符号调用 axios: axios({ method, url: `${BASE_URL}/${url}`, data }); 我想用
我正在尝试使用 mockAxios 来测试 axios 拦截器。 export default { get: jest.fn(() => Promise.resolve({ data: {}
https://github.com/axios/axios#cancellation 我正在研究如何取消上传 PUT 请求并在文档中遇到了这一部分。为什么需要 token 才能取消?简单来说流程或过
axios.put('http://localhost:3000/api/userDatas/findUserAddProp',{ params: { userId: "5bb
我的 axios promise 没有按预期工作。我猜执行是在 forEach 循环内开始的。我希望 axios 执行仅在 batch.commit 之后开始 aMobileNumbers.forEa
有区别吗 useEffect(()=>{ async function fetchData(){ await axios .get(path, config) .t
我正在使用 axios 获取信息,并且我需要在不同 axios 响应的另一个处理程序中使用该信息。我似乎无法在第二个响应处理中使用第一个响应中加载的数据。 例如: const [firstData,
我在我的 React 应用程序中使用 axios,在我的许多脚本中使用 import axios from 'axios 。我想使用一种为所有 axios 调用/错误调用的中间件。我该如何处理这个问题
在我的应用程序中,为了对用户进行身份验证,我调用了 fetchData 函数。如果用户 token 无效,应用程序将运行 axios.all(),我的拦截器将返回大量错误。 如何防止 axios.al
我已经按照 npm 包文档中的建议编写了一个 Axios POST 请求,例如: var data = { 'key1': 'val1', 'key2': 'val2' } axios
谁能提供有关 axios 和 vue-axios 之间区别的详细信息?我们需要使用哪一个?两者都需要使用api吗? 谢谢 最佳答案 vue-axios 只是一个包装器,将 axios 暴露给组件作为
我在向 Loopback(v3) API 发出的 Axios 请求中使用变量时遇到了麻烦。 什么有效?如果我使用“REST 表示法”,它运行良好: getInfo() { axios.get(
我是一名优秀的程序员,十分优秀!