首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

vue集成百度UEditor富文本编辑器

1、使用vue-cli构建一个vue项目。然后下载UEditor源码。地址:http://ueditor.baidu.com/website/ 把项目复制到vue项目的static文件下。目的是让服务可以访问到里面的文件,打开UEditor目录文件。这里下载的是jsp版本的。文件名字没有更改过。打开里面的ueditor.config.js文件找到serverUrl把这行代码注释了。这个代码是用来上传图片的后台地址。如果不注释了会请求报错。编辑器跑起来再做服务配置修改地址。 2、在.vue文件中引入主要js文件 import ‘../../static/utf8-jsp/ueditor.config’ import ‘../../static/utf8-jsp/ueditor.all’; import ‘../../static/utf8-jsp/lang/zh-cn/zh-cn’; 3、在data中申明一个变量存储UEditor的实例方便在vue的其他地方使用,然后申明一个变量存储手动获取的编辑器里面的内容,再什么一个变量存储初始化时要写入编辑器的内容。三个变量。如果操作得当。可以减少变量的时候。这是笨办法 4、在vue的mounted钩子函数中调用编辑器的方法生成实例存储到刚刚申明的变量中,在实例中传入参数。第一个是id,id是生成编辑器的div的id。第二个参数是一个对象。对象内容是对编辑器的配置。如资源访问路径,toolbars内容配置。 5、在html部分写一个div标签

6、然后配置资源路径。在实例化的时候传入的参数里。第二个参数是一个对象。内容包括路径。 this.ue = UE.getEditor('editor',{ BaseUrl: '', UEDITOR_HOME_URL: 'static/utf8-jsp/', }); 这个UEDITOR_HOME_URL就是配置编辑器自己访问自己所需要的依赖的路径。设置到存放的文件下utf8-jsp是编辑器文件的更目录。目录不一样可自行更改 7、然后保存。就可以在界面上显示一个完整的富文本编辑器 8、如果要获取内容则使用在data里面申明的编辑器实例在vue中this.实例调用方法getContent()可以获取到内容 9如果要设置内容则调用:setContent('欢迎使用ueditor'); 更多方法参考官方文档。 10、文档内容属于个人踩坑的心得。如有错误。请留言指出。谢谢 11、需要注意的是资源路径容易搞错。使用相对路径即可 12、贴出代码

01

JAVA EE Eclipse下配置Tomcat服务器

在进行Java web编程之前,必须要进行web服务器的配置,这里选择在Java EE(版本) Eclipse中进行服务器的配置。当然了,在安装Java EE Eclipse之前要先安装JDK,并且要在环境变量中配置好JDK的安装目录,在这里不再多说,如果不清楚,可以看前面写的一篇“在win7下面安装JDK(以32位系统为例)”的文章。这里就假设你已经安装好了JDK,并且已经配置好环境变量。      Java EE Eclipse可以去Eclipse公司的网页上去下载最新版本的,但是要根据自己的计算机操作系统来选择,一般X86对应的是32位机。这里,假设你的Java EE Eclipse也已经安装成功。接下来就是在Java EE Eclipse中配置Tomcat服务器啦!      Tomcat服务器是Apache组织的一个开源服务器,Apache的网址为:www.apache.org,大家可以去那个网站下载对应自己操作系统的版本。我这里下载的是Tomcat7.0.47(现在的最新版本是8.0)。这里下载的Tomcat是免安装版的,所以直接下载下来不需要安装。接下来就进行Tomcat的配置。       打开Java EE Eclipse,新建Dynamic Web Project,填上项目的名称,之后的默认就可以啦!接下来在Windows->Preferences选项,如下图所示:

03

JAVA EE Eclipse下配置Tomcat服务器

在进行Java web编程之前,必须要进行web服务器的配置,这里选择在Java EE(版本) Eclipse中进行服务器的配置。当然了,在安装Java EE Eclipse之前要先安装JDK,并且要在环境变量中配置好JDK的安装目录,在这里不再多说,如果不清楚,可以看前面写的一篇“在win7下面安装JDK(以32位系统为例)”的文章。这里就假设你已经安装好了JDK,并且已经配置好环境变量。      Java EE Eclipse可以去Eclipse公司的网页上去下载最新版本的,但是要根据自己的计算机操作系统来选择,一般X86对应的是32位机。这里,假设你的Java EE Eclipse也已经安装成功。接下来就是在Java EE Eclipse中配置Tomcat服务器啦!      Tomcat服务器是Apache组织的一个开源服务器,Apache的网址为:www.apache.org,大家可以去那个网站下载对应自己操作系统的版本。我这里下载的是Tomcat7.0.47(现在的最新版本是8.0)。这里下载的Tomcat是免安装版的,所以直接下载下来不需要安装。接下来就进行Tomcat的配置。       打开Java EE Eclipse,新建Dynamic Web Project,填上项目的名称,之后的默认就可以啦!接下来在Windows->Preferences选项,如下图所示:

010

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券