vue中如何创建多个ueditor实例教程-创新互联

前言

创新互联是专业的阳明网站建设公司,阳明接单;提供网站制作、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行阳明网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了。

具体可以参考这篇文章:https://www.jb51.net/article/118413.htm

ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/

完整的功能演示,可以参考:http://ueditor.baidu.com/website/onlinedemo.html

最近工作中要求升级,需要在vue中创建多个ueditor实例,我使用neditor,其实就是把ueditor样式美化了下,其他和ueditor几乎一样,下面话不多说了,来一起看看详细的介绍吧。

截图

vue中如何创建多个ueditor实例教程

说明

下载ueditor或neditor源码,拷贝到static目录下面

vue中如何创建多个ueditor实例教程

然后修改ueditor.config.js配置文件

vue中如何创建多个ueditor实例教程

在vue项目的main.js添加ueditor引用

vue中如何创建多个ueditor实例教程

新建3个页面 home,tab1,tab2。tab1和tab2是home下面的子页面

vue中如何创建多个ueditor实例教程

在router-view外面一定要添加keep-alive组件和transition组件,不然ueditor实例无法保存

在components文件夹下面新建一个editor作为编辑器的公共组件

在tab1中调用editor,同时要传入一个id并在editor页面接受,注意如果需要多个实例,id一定不能相同

 

 

 

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享标题:vue中如何创建多个ueditor实例教程-创新互联
文章起源:http://azwzsj.com/article/ccoocj.html