最近在做后台管理系统的时候遇到要使用富文本编辑器最后选择了 ueditor, 我的项目使用 vue+vuex+vue-router+webpack+elementUI 的方案完成框架的搭建,
1 下载 UEditor 官网最新的 jsp 版本的包, 下载完成解压之后得到一个 utf8-jsp 的文件夹, 里面包含的内容如下:
2 将这个文件夹改名为 ueditor, 并且移入自己项目中的 static 文件夹下, 修改 ueditor.config.js 文件夹中的内容, 如下图:
3 编写子组件
- <template>
- <div :id="id" type="text/plain">
- </div>
- </template>
- <script>
- import '../../../static/ueditor/ueditor.config.js'import '../../../static/ueditor/ueditor.all.min.js'import '../../../static/ueditor/lang/zh-cn/zh-cn.js'import '../../../static/ueditor/ueditor.parse.min.js'export
- default {
- name:
- 'UE',
- data() {
- return {
- editor: null
- }
- },
- props: {
- defaultMsg: {
- type: String,
- default:
- '请输入内容'
- },
- config: {
- type: Object
- },
- id: {
- type: String,
- default:
- `ue$ {
- Math.random(0, 100)
- }`
- }
- },
- mounted() {
- this.$nextTick(() = >{
- this.editor = UE.getEditor(this.id, this.config); // 初始化 UE
- this.editor.addListener("ready", () = >{
- this.editor.execCommand('inserthtml', this.defaultMsg);
- this.editor.focus() // 确保 UE 加载完成后, 放入内容
- })
- })
- },
- methods: {
- getUEContent() { // 获取内容方法
- return this.editor.getContent()
- },
- clearContent() { // 清空编辑器内容
- return this.editor.execCommand('cleardoc');
- },
- },
- beforeDestroy() {
- // 组件销毁的时候, 要销毁 UEditor 实例
- if (this.editor !== null && this.editor.destroy) {
- this.editor.destroy();
- }
- }
- }
- </script>
- <style scoped>
- </style>
4 在父组件中使用
<UE :config="configEditor" :id="ue1" ref="ue" :defaultMsg="val"></UE>
5 弄好之后, 上传图片会提示后端配置项 http 错误, 文件上传会提示上传错误这里提别申明一点, ueditor 在前端配置好后, 需要与后端部分配合进行, 然后将配置 ueditor.config.js 里的 serverUrl 的前缀改陈你自己的后端访问的请求路径地址
serverUrl: "统一请求地址"
来源: http://www.jb51.net/article/134739.htm