寫了幾乎一個星期終于寫好了，在vue項目中使用的編輯器，最主要的是我想編輯器里面可以輸入數學公式。】

https://download.csdn.net/download/qq_33769914/10672128在這里下載

如果想把圖片公式轉為有樣式的文本內容，可以參考這個https://blog.csdn.net/qq_33769914/article/details/83573317

上面就是我想實現的功能。編輯器時可以切換的。

?

好啦。從頭開始，。

首先我們去現在下載一個uedotor的編輯器。可以在這里下載所需的插件。https://download.csdn.net/download/qq_33769914/10651871

也可以直接在我上傳的一個完整的項目里面查看，地址：https://download.csdn.net/download/qq_33769914/10672128

下載里面有個文件夾是叫做kityformula-plugin這個是公式的插件。我都放在ueditor這一個文件夾里面了。

?

把他放在static里面。

?

然后我們就可以編寫一個組件，以便再其他的頁面可以直接用啦。

<template>
? <div>
? ? <script :id="id" ?:defaultMsg="writeMsg" type="text/plain" ></script> ? ?//id，defaultMsg接收父組件傳來的內容
? </div>
</template>

<script>

//引入編輯器。我都是在子組件里面加的，我看有的說是在main.js里面添加，這樣的話所有頁面都引入了這個插件就很必要了。
import '../../../static/ueditor/ueditor.config.js'
import '../../../static/ueditor/ueditor.all.js'
import '../../../static/ueditor/lang/zh-cn/zh-cn.js'

//引入公式插件。我們也是通過import的方式加進來的。
import '../../../static/ueditor/kityformula-plugin/addKityFormulaDialog.js'
import '../../../static/ueditor/kityformula-plugin/getKfContent.js'
import '../../../static/ueditor/kityformula-plugin/defaultFilterFix.js'

export default {
? ? name: "UEditor",
? ? props: {
? ? ? ? id: {
? ? ? ? ? ? type: String
? ? ? ? },
? ? ? ? config: {
? ? ? ? ? ? type: Object
? ? ? ? },
? ? ? ? writeMsg:{
? ? ? ? ?? ?type: String
? ? ? ? }
? ? },
// ?components:{util},
? ? data() {
? ? ? ? return {
? ? ? ? ? ? editor: null
? ? ? ? }
? ? }, ? ?
? ? mounted() {
? ? ? ? //初始化UE
? ??

? this.$nextTick(()=>{//避免在切換到填空題再切回來找不到dom而報offsetWidth undefined
? ? ? ? ?? ? ? const _this = this;
? ? ? ? ? ? ?this.editor = UE.delEditor(this.id);
? ? ? ? ?? ? ? this.editor = UE.getEditor(this.id,this.config);
? ? ? ? ? ??
? ? ? ? ? ? this.editor.addListener("ready",function(){
? ? ? ? ? ? ? ?_this.isinit=true;

? ? ? ? ? ? ?})
? ? ? ? ? ?
? ? ? ? })

? ? ? ??
? ? ? ??
? ? ? ??
? ? },
? ? destoryed() {
? ? ? ? this.editor.destory();
? ? },
? ? methods:{
? ? ? ? getUEContent: function(){
? ? ? ? ? ? return this.editor.getContent();
? ? ? ? },
? ? ? ? getContentTxt: function(){
? ? ? ? ? ? return this.editor.getContentTxt();
? ? ? ? },

? ?setUEContent: function(val){
? ? ? ? ??? ?if(this.editor && this.editor.isReady){
? ? ? ? ? ? ? ? const _this = this;
? ? ? ? ? ? ? ? setTimeout(function(){//過段時間在加載
? ? ? ? ? ? ? ? ? ? _this.editor.setContent(val);
? ? ? ? ? ? ? ? },500);
? ? ? ? ? ? ? ? return;
? ? ? ? ??? ?}else{
? ? ? ? ??? ??? ? const _this = this;
? ? ? ? ??? ??? ?setTimeout(function(){//過段時間在加載
? ? ? ? ?? ??? ? ?_this.setUEContent(val);
? ? ? ? ?? ? ? ?},500)
? ? ? ? ??? ?}
? ? ? ? },
? ? }
}
</script>

使用這個組件

import Ueditor from '@/components/ueditor/Ueditor.vue';

components: {
? ? ? ? ? Ueditor
? ? ? },

? ?<el-tabs ?v-model="activeName" type="card">
?? ??? ? ? ? ? ?<el-tab-pane label="題干" name="first" >?
?? ??? ? ? ? ? ??? ?<div v-show="activeName=='first'">
?? ??? ? ? ? ? ??? ?<Ueditor :writeMsg="defaultMsg1" ?:id="ueditor1" :config="config1" ?ref="ue1" ></Ueditor>?
?? ??? ? ? ? ? ??? ?</div>
? ? ? ? ? ? ? ? ? ??
?? ??? ? ? ? ? ?</el-tab-pane>
?? ??? ? ? ? ? ?<el-tab-pane label="分析" name="second" >?
?? ??? ? ? ? ? ??? ?<div v-show="activeName=='second'">
?? ??? ? ? ? ? ??? ?<Ueditor :writeMsg="defaultMsg2" :id="ueditor2" ?:config="config2" ?ref="ue2" ></Ueditor>
?? ??? ? ? ? ? ??? ?</div>
?? ??? ? ? ? ? ?
?? ??? ? ? ? ? ?</el-tab-pane>
?? ??? ? ? ? ? ?<el-tab-pane label="解答" name="third" >?
?? ??? ? ? ? ? ??? ?<div v-show="activeName=='third'">
?? ??? ? ? ? ? ??? ? ? <Ueditor :writeMsg="defaultMsg3" ?:id="ueditor3" :config="config3" ?ref="ue3" ></Ueditor>
?? ??? ? ? ? ? ??? ?</div>
?? ??? ? ? ? ? ?</el-tab-pane>
?? ? ? ? ? ?</el-tabs>?? ?

data里面定義的數據

??????????? activeName:'first',
?? ? ? ? ? ?defaultMsg1:'',
?? ? ? ? ? ?defaultMsg2:'',
?? ? ? ? ? ?defaultMsg3:'',
?? ? ? ? ? ?ueditor1:'ueditor1',
?? ? ? ? ? ?ueditor2:'ueditor2',
?? ? ? ? ? ?ueditor3:'ueditor3',
?? ? ? ? ? ?config1: {

? ? ? ? ? ? ? serverUrl:"http://domain/core/upload/ueditor?type=40",//如果頁面的上傳的文件的地址在使用編輯器的地方并不是一個。我們就可以在當前的配置文件里面寫上他的地址
?? ? ? ? ? ? ?autoHeightEnabled: false,
? ? ? ? ? ? ? autoFloatEnabled: false,//不允許滾動時固定在頂部
? ? ? ? ? ? ? ?initialContent:'請輸入題干內容...(如果是填空題請用{***}來表示橫線)', ? //初始化編輯器的內容,
? ? ? ? ? ? ? autoClearinitialContent:true, //是否自動清除編輯器初始內容，注意：如果focus屬性設置為true,這個也為真，那么編輯器一上來就會觸發導致初始化的內容看不到了
? ? ? ? ? ? ? initialFrameWidth: null,
? ? ? ? ? ? ? initialFrameHeight: 250,
? ? ? ? ? ? ? BaseUrl: '',
? ? ? ? ? ? ? UEDITOR_HOME_URL: 'static/ueditor/',

? ? ? ? ? ? ? ?zIndex:'100',//修改編輯器的層級
?? ? ? ? ? ?},
?? ? ? ? ? ? config2: {
?? ? ? ? ? ? ?autoHeightEnabled: false,
? ? ? ? ? ? ? autoFloatEnabled: false,//不允許滾動時固定在頂部
? ? ? ? ? ? ? initialContent:'請輸入分析內容...', ? //初始化編輯器的內容,也可以通過textarea/script給值，看官網例子
? ? ? ? ? ? ? autoClearinitialContent:true, //是否自動清除編輯器初始內容，注意：如果focus屬性設置為true,這個也為真，那么編輯器一上來就會觸發導致初始化的內容看不到了
? ? ? ? ? ? ? initialFrameWidth: null,
? ? ? ? ? ? ? initialFrameHeight: 250,
? ? ? ? ? ? ? BaseUrl: '',
? ? ? ? ? ? ? UEDITOR_HOME_URL: 'static/ueditor/'
?? ? ? ? ? ?},
?? ? ? ? ? ? config3: {
?? ? ? ? ? ? ?autoHeightEnabled: false,
? ? ? ? ? ? ? autoFloatEnabled: false,//不允許滾動時固定在頂部
? ? ? ? ? ? ? initialContent:'請輸入解答內容...', ? //初始化編輯器的內容,也可以通過textarea/script給值，看官網例子
? ? ? ? ? ? ? autoClearinitialContent:true, //是否自動清除編輯器初始內容，注意：如果focus屬性設置為true,這個也為真，那么編輯器一上來就會觸發導致初始化的內容看不到了
? ? ? ? ? ? ? initialFrameWidth: null,
? ? ? ? ? ? ? initialFrameHeight: 250,
? ? ? ? ? ? ? BaseUrl: '',
? ? ? ? ? ? ? UEDITOR_HOME_URL: 'static/ueditor/'
?? ? ? ? ? ?},
?? ? ? ? ??

獲取內容的方式：this.$refs.ue1.getUEContent()

設置編輯器的內容? this.$refs.ue3.setUEContent(編輯器賦值的內容);

遇到的問題：1.公式的圖標有時出現，有時不出現

那是因為我在使用編輯器的頁面才引入的公式插件。導致插件還沒有加載完。

最后直接放在ueditor子組件里面通過import的方式引入的就好了。

?

2.切換頁面的時候。編輯器里原本編輯好的內容又置空了。并且頁面左下角還出現了小三角放大了就是我剛才寫在編輯器里面的內容。

因為我切換頁面的方式是v-if。當他為假時就會把剛才的編輯器從頁面刪除，當他為真時把那塊內容再添加到html中。相當于就是從新加載了。

我改成v-show就好了。

還有我點擊上一步再回來頁面編輯器里面內容也丟失了，原因是一樣的。改成v-show就好了。

?

3.為編輯器設置默認的內容無效（用在編輯頁面顯示的是默認的值）。。

我在那里面? 子組件里面寫的這段代碼就是當他父組件里面傳來的的writeMsg不為空代表是編輯頁面有內容的。這個時候再放在編輯器里。但是必須寫在ready里面。而且必須過段時間在執行，至于寫了ready證明加載完了以后還要過段時間為什么，我也不清楚。但是好像必須這樣。

? mounted() {

? ? ? ? this.editor.addListener("ready",function(){
? ? ? ? ? ? ? ?_this.isinit=true;

? ? ? }

}，?

methods:{

? ? ? ??setUEContent: function(val){
? ? ? ? ??? ?if(this.editor && this.editor.isReady){
? ? ? ? ? ? ? ? const _this = this;
? ? ? ? ? ? ? ? setTimeout(function(){//過段時間在加載
? ? ? ? ? ? ? ? ? ? _this.editor.setContent(val);
? ? ? ? ? ? ? ? },500);
? ? ? ? ? ? ? ? return;
? ? ? ? ??? ?}else{
? ? ? ? ??? ??? ? const _this = this;
? ? ? ? ??? ??? ?setTimeout(function(){//過段時間在加載
? ? ? ? ?? ??? ? ?_this.setUEContent(val);
? ? ? ? ?? ? ? ?},500)
? ? ? ? ??? ?}
? ? ? ? },

}

?

?

總結

以上是生活随笔為你收集整理的vue+elmentui +ueditor +数学公式 编辑器 ueditor的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。