vue+elmentui +ueditor +数学公式 编辑器 ueditor
寫了幾乎一個星期終于寫好了，在vue項目中使用的編輯器，最主要的是我想編輯器里面可以輸入數(shù)學(xué)公式。】
https://download.csdn.net/download/qq_33769914/10672128在這里下載
如果想把圖片公式轉(zhuǎn)為有樣式的文本內(nèi)容，可以參考這個https://blog.csdn.net/qq_33769914/article/details/83573317
上面就是我想實現(xiàn)的功能。編輯器時可以切換的。
?
好啦。從頭開始，。
首先我們?nèi)ガF(xiàn)在下載一個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接收父組件傳來的內(nèi)容
? </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里面定義的數(shù)據(jù)
??????????? activeName:'first',
?? ? ? ? ? ?defaultMsg1:'',
?? ? ? ? ? ?defaultMsg2:'',
?? ? ? ? ? ?defaultMsg3:'',
?? ? ? ? ? ?ueditor1:'ueditor1',
?? ? ? ? ? ?ueditor2:'ueditor2',
?? ? ? ? ? ?ueditor3:'ueditor3',
?? ? ? ? ? ?config1: {
? ? ? ? ? ? ? serverUrl:"http://domain/core/upload/ueditor?type=40",//如果頁面的上傳的文件的地址在使用編輯器的地方并不是一個。我們就可以在當(dāng)前的配置文件里面寫上他的地址
?? ? ? ? ? ? ?autoHeightEnabled: false,
? ? ? ? ? ? ? autoFloatEnabled: false,//不允許滾動時固定在頂部
? ? ? ? ? ? ? ?initialContent:'請輸入題干內(nèi)容...(如果是填空題請用{***}來表示橫線)', ? //初始化編輯器的內(nèi)容,
? ? ? ? ? ? ? autoClearinitialContent:true, //是否自動清除編輯器初始內(nèi)容，注意：如果focus屬性設(shè)置為true,這個也為真，那么編輯器一上來就會觸發(fā)導(dǎo)致初始化的內(nèi)容看不到了
? ? ? ? ? ? ? initialFrameWidth: null,
? ? ? ? ? ? ? initialFrameHeight: 250,
? ? ? ? ? ? ? BaseUrl: '',
? ? ? ? ? ? ? UEDITOR_HOME_URL: 'static/ueditor/',
? ? ? ? ? ? ? ?zIndex:'100',//修改編輯器的層級
?? ? ? ? ? ?},
?? ? ? ? ? ? config2: {
?? ? ? ? ? ? ?autoHeightEnabled: false,
? ? ? ? ? ? ? autoFloatEnabled: false,//不允許滾動時固定在頂部
? ? ? ? ? ? ? initialContent:'請輸入分析內(nèi)容...', ? //初始化編輯器的內(nèi)容,也可以通過textarea/script給值，看官網(wǎng)例子
? ? ? ? ? ? ? autoClearinitialContent:true, //是否自動清除編輯器初始內(nèi)容，注意：如果focus屬性設(shè)置為true,這個也為真，那么編輯器一上來就會觸發(fā)導(dǎo)致初始化的內(nèi)容看不到了
? ? ? ? ? ? ? initialFrameWidth: null,
? ? ? ? ? ? ? initialFrameHeight: 250,
? ? ? ? ? ? ? BaseUrl: '',
? ? ? ? ? ? ? UEDITOR_HOME_URL: 'static/ueditor/'
?? ? ? ? ? ?},
?? ? ? ? ? ? config3: {
?? ? ? ? ? ? ?autoHeightEnabled: false,
? ? ? ? ? ? ? autoFloatEnabled: false,//不允許滾動時固定在頂部
? ? ? ? ? ? ? initialContent:'請輸入解答內(nèi)容...', ? //初始化編輯器的內(nèi)容,也可以通過textarea/script給值，看官網(wǎng)例子
? ? ? ? ? ? ? autoClearinitialContent:true, //是否自動清除編輯器初始內(nèi)容，注意：如果focus屬性設(shè)置為true,這個也為真，那么編輯器一上來就會觸發(fā)導(dǎo)致初始化的內(nèi)容看不到了
? ? ? ? ? ? ? initialFrameWidth: null,
? ? ? ? ? ? ? initialFrameHeight: 250,
? ? ? ? ? ? ? BaseUrl: '',
? ? ? ? ? ? ? UEDITOR_HOME_URL: 'static/ueditor/'
?? ? ? ? ? ?},
?? ? ? ? ??
獲取內(nèi)容的方式：this.$refs.ue1.getUEContent()
設(shè)置編輯器的內(nèi)容? this.$refs.ue3.setUEContent(編輯器賦值的內(nèi)容);
遇到的問題：1.公式的圖標(biāo)有時出現(xiàn)，有時不出現(xiàn)
那是因為我在使用編輯器的頁面才引入的公式插件。導(dǎo)致插件還沒有加載完。
最后直接放在ueditor子組件里面通過import的方式引入的就好了。
?
2.切換頁面的時候。編輯器里原本編輯好的內(nèi)容又置空了。并且頁面左下角還出現(xiàn)了小三角放大了就是我剛才寫在編輯器里面的內(nèi)容。
因為我切換頁面的方式是v-if。當(dāng)他為假時就會把剛才的編輯器從頁面刪除，當(dāng)他為真時把那塊內(nèi)容再添加到html中。相當(dāng)于就是從新加載了。
我改成v-show就好了。
還有我點擊上一步再回來頁面編輯器里面內(nèi)容也丟失了，原因是一樣的。改成v-show就好了。
?
3.為編輯器設(shè)置默認的內(nèi)容無效（用在編輯頁面顯示的是默認的值）。。
我在那里面? 子組件里面寫的這段代碼就是當(dāng)他父組件里面?zhèn)鱽淼牡膚riteMsg不為空代表是編輯頁面有內(nèi)容的。這個時候再放在編輯器里。但是必須寫在ready里面。而且必須過段時間在執(zhí)行，至于寫了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)
? ? ? ? ??? ?}
? ? ? ? },
}
?
?
總結(jié)
以上是生活随笔為你收集整理的vue+elmentui +ueditor +数学公式 编辑器 ueditor的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用林地可行性报告现状图要包含的内容清单
- 下一篇： vue+elementUI实现调用PC摄