UEditor的使用
生活随笔
收集整理的這篇文章主要介紹了
UEditor的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、下載包:
從Ueditor的官網下載1.4.3.3jsp版本的Ueditor編輯器,官網地址為:
http://ueditor.baidu.com/website/
下載解壓后會得到如果下文件目錄:
將上述Ueditor文件夾拷貝到vue項目的static文件夾中,此文件夾為項目的靜態服務文件夾;
二、???修改配置
在ueditor.config.js中修改如下代碼:
// 這里是配置Ueditor內部進行文件請求時的靜態文件服務地址
?window.UEDITOR_HOME_URL = "/static/Ueditor/"
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
然后修改服務器請求接口地址:我這里使用了代理?
三、???文件的引入
在vue項目的入口文件main.js中將Ueditor所有的基礎文件引入如下:(路徑自行配制)
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'四、???在相應vue的componnent文件中使用富文本編輯器
<template><div><!--editor的div為富文本的承載容器--><divid="editor"></div><buttontype="" @click="gettext">點擊</button></div></template><script>exportdefault {data() {return {editor: null,}},mounted() {// 實例化editor編輯器this.editor = UE.getEditor('editor');// console.log(this.editor.setContent("1223"))},methods: {gettext() {// 獲取editor中的文本console.log(this.editor.getContent())}},destroyed() {// 將editor進行銷毀this.editor.destroy();}}</script>?
總結
以上是生活随笔為你收集整理的UEditor的使用的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 面试:第十四章:大厂中高级java程序员
- 下一篇: weblogic部署war包