vue集成百度富文本编辑器
1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图)
https://ueditor.baidu.com/website/download.html
2.将下载好的文件解压,存放在项目位置下:
>1.如果是在vue脚手架中集成百度富文本框,则将解压后选取部分文件新建文件夹UE,放在其下面,之后放在与index.html平行下的地方如图所示:
>2.如果是在vue-element-admin或者iview-admin中集成百度富文本框,则将解压后选取部分文件新建文件夹UE,放在其下面,之后放在与index.html平行下的地方,需要新建文件夹static 如图所示:
注意的点:有人会问为什么,不放在src的下面,非要和index.html平级?
值得说的是你不知道,后面操作上传图片等上传按钮的时候,加载的是UE下html文件,vue框架只有一个index.html模板,其他都是路由加载模块,放在src的下面代码经 过压缩后,上传后再次嵌入整个框架,也就是index.html模板。所以放在与index.html平级下,点击富文本上传等功能时候,就会单个加载UE下html文件,也不会报已下 错误:
codemirror.js:1 Uncaught SyntaxError: Unexpected token <
ZeroClipboard.js:1 Uncaught SyntaxError: Unexpected token <
ueditor.all.min.js:11 Uncaught ReferenceError: ZeroClipboard is not defined
at a (ueditor.all.min.js:11)
at ueditor.all.min.js:11
at HTMLScriptElement.i.onload.i.onreadystatechange (ueditor.all.min.js:7)
3.修改UE下ueditor.config.js中的路径
4.在项目main.js中引入UE下的js
6.在模块中使用,刚封装好的百度富文本编辑器.vue组件,引入路径看你存放组件的位置,注册后使用

8.会出现这样的报错,是由于后端无配置接口请求,后续完善
觉得不错就关注点赞,欢迎评论不足之处,后期上传GitHub案例
vue集成百度富文本编辑器的更多相关文章
- vue 集成百度富文本编辑器
<template> <div> <textarea style="display:none" id="editor_content&quo ...
- Vue集成tinymce富文本编辑器并实现本地化指南(2019.11.21最新)
tinymce是一款综合口碑特别好.功能异常强大的富文本编辑器,在某些网站,甚至享有"宇宙最强富文本编辑器"的称号.那么,在Vue项目中如何集成呢?这并不困难,只需要参照官方教程 ...
- Django集成百度富文本编辑器uEditor
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包, ...
- JAVA 集成 Ueditor 百度富文本编辑器
开发环境:一个简单的SpringMVC框架中,用百度富文本编辑器 ueditor 实现图片和文件的上传 官网地址:http://ueditor.baidu.com/website/ 需要使用到的2个文 ...
- ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能
本文将交大伙怎么集成ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork来制作一个新闻系统 先上截图: 添加页面如下: 下面来看代码部分 列表页如下: @ ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
- 对于MVC中应用百度富文本编辑器问题的解决办法
1.对于应用富文本编辑器post提交表单内容提示有危险的解决办法: [ValidateInput(false)] //文本编辑器的表单提交不用提示危险 [HttpPost] public Action ...
- 在MVC中应用百度富文本编辑器
1.下载.NET版本的百度富文本编辑器,前往 下载.NET版本百度富文本框 2.解压下载的.zip压缩包,将utf8-.net文件夹名称改为:ueditor,复制到MVC根目录下面.结构如下: App ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
随机推荐
- LeapMotion Demo2
原文:LeapMotion Demo2 官方doc有四个手势,最近尝试实现对握拳的识别,并能在我的程序界面上体现出来. 调试过程较为繁琐,幸好最终效果还差强人意! 首先看看我的效果图: ...
- js错误界面
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- ApplicationCommands用于表示应用程序程序员经常遇到的常见命令,类似于ctrl+c
在WPF中,许多控件都自动集成了固有的命令集.比如文本框TextBox就提供了复制(Copy),粘贴(Paste),裁切(Cut),撤消(Undo)和重做(Redo)命令等. WPF提供常用应用程序所 ...
- jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单
jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单 截图: 代码如下: //关闭用户菜单 $(document).mousedown(function(e){ var _con = ...
- 3D-Touch Home Screen Quick Actions 使用
1. 3D-Touch简单介绍 3D-Touch是iPhone 6s推出的一种可以让你与手机进行互动的全新方式.这一次,iPhone 能够感应你按压屏幕的力度.除了轻点.轻扫.双指开合这些熟悉的 Mu ...
- Medical Image Report论文合辑
Learning to Read Chest X-Rays:Recurrent Neural Cascade Model for Automated Image Annotation (CVPR 20 ...
- Delphi XE5 Android Dialogs 对话框(模拟做了一套)
最近要在Android中使用对话框, 但发现无现成的, TOpenDialog等已经不支持移动设备,还好系统提供了一些文件目录函数可用,于是简单的模拟了一个,支持OpenDialog ,SaveDia ...
- Win8 Metro(C#)数字图像处理--2.59 P分位法图像二值化
原文:Win8 Metro(C#)数字图像处理--2.59 P分位法图像二值化 [函数名称] P分位法图像二值化 [算法说明] 所谓P分位法图像分割,就是在知道图像中目标所占的比率Rat ...
- 调用其它UI文件
调用其它UI文件 首先 要头文件包含 #include “dialog_biaozhun.h"Dialog_biaozhun *dialog = new Dialog_biaozhun() ...
- asp.net core2.0中网站发布的时候,视图文件不被打包成dll
项目csproj文件里面加 <Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <Target ...