vue項目中使用ueditor的實例講解
更新時間:2018年03月05日 09:06:44 作者:小小令
下面小編就為大家分享一篇vue項目中使用ueditor的實例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
以vue-cli生成的項目為例
1.static文件夾下先放入ueditor文件
2.index.html添加如下代碼
<script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.all.min.js"></script>
3.webpack.base.conf.js添加如下配置
externals: { 'UE': 'UE', },
4.index.html中添加
<script type="text/javascript"> window.UEDITOR_HOME_URL = "/static/ueditor/";//配置路徑設定為UEditor所放的位置 </script>
5.editor組件
<template> <div> <mt-button @click="geteditor()" type="danger">獲取</mt-button> <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script> </div> </template> <script> const UE = require('UE');// eslint-disable-line export default { name: 'editorView', data: () => ( { editor: null, } ), methods: { geteditor() { console.log(this.editor.getContent()); }, }, mounted() { this.editor = UE.getEditor('editor'); }, destroyed() { this.editor.destroy(); }, }; </script> <style> </style>
以上這篇vue項目中使用ueditor的實例講解就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue實現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例
今天小編就為大家分享一篇vue實現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08vue.js表單驗證插件(vee-validate)的使用教程詳解
這篇文章主要介紹了vue.js表單驗證插件(vee-validate)的使用,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05vue中利用pinyin-pro純前端實現(xiàn)拼音的模糊搜索功能
這篇文章主要介紹了vue中利用pinyin-pro純前端實現(xiàn)拼音的模糊搜索,實現(xiàn)思路很簡單,通過安裝配置插件編寫工具類,本文結合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2022-11-11Vue3使用vue-office插件實現(xiàn)word預覽功能
vue-office是一個支持多種文件(docx、.xlsx、pdf)預覽的vue組件庫,支持vue2和vue3,這篇文章主要介紹了Vue3使用vue-office插件實現(xiàn)word預覽功能,需要的朋友可以參考下2024-04-04