vue.js中集成ueditor?

01-11

誰做過vue.js中集成ueditor啊！我封裝了個指令一直報錯,ueditor需要的id不能動態綁定

親測有效：

步驟一：在 src/assets/ 文件內新建 ueditor 文件夾並引入 uedior相關核心插件代碼，即config.js、all.js這些還有語言包文件夾lang等。見下圖的utf8-php文件，叫這個名字的原因是我下載下來的ueditor文件包就這個名字。

步驟二：在 static文件夾中也同樣引入 uedior 相關插件代碼，但是這回是全部代碼，可以不包括上面的幾個文件

步驟三：在 main.js 中引入

import "./assets/utf8-php/ueditor.config.js" import "./assets/utf8-php/ueditor.all.min.js" import "./assets/utf8-php/lang/zh-cn/zh-cn.js" import "./assets/utf8-php/ueditor.parse.min.js"

步驟四：修改配置 uedior 配置文件相關根目錄： src/assets/utf8-php/ueditor.config.js 中將
window.UEDITOR_HOME_URL = "/static/utf8-php/";

引入成功。
然後就是在目標頁面進行初始化比如components 文件夾下的 test.vue 頁面

大功告成。

成不成都記得點贊哈～

& && &


&

    import extend from "xtend"
    export default {

        data() {

            return {

                jEditor: null

            }

        },

        props: {

            config: {

                type: Object,

                default() {

                    return {

                        initialFrameWidth: 760,

                        initialFrameHeight: 1200

                    };

                }

            }

        },

        computed: {

            jEditorConfig() {

                return extend(this.config, {

                    toolbars: false

                });

            }

        },

        methods: {

            focus() {

                this.jEditor  this.jEditor.focus();

            },

            setContent(content, isAppendTo, notFireSelectionchange) {

                this.jEditor  this.jEditor.setContent(content, isAppendTo, notFireSelectionchange);

            },

            getContent() {

                let vm = this;
                if (vm.jEditor) {

                    return vm.jEditor.getContent();

                }
                return "";

            },

            getContentTxt() {

                let vm = this;
                if (vm.jEditor) {

                    return vm.jEditor.getContentTxt();

                }
                return "";

            },

            hasContents() {

                let vm = this;
                if (vm.jEditor) {

                    return vm.jEditor.hasContents();

                }
                return false;

            },

            addListener(evt, func) {

                this.jEditor  this.jEditor.addListener(evt, func);

            }

        },

        mounted() {

            let vm = this;
            vm.jEditor = new JEditor({

                renderTo: vm.$refs.jeditorContainer,

                editorConfig: vm.jEditorConfig

            });
            vm.jEditor.addListener("contentChange", function() {

                vm.$emit("contentChange");

            });

        },

        beforeDestroy() {

            let vm = this;

try { vm.jEditor vm.jEditor.destroy(); vm.jEditor = null; } catch (e) { vm.jEditor = null; } } } &

首先說下, 我用的是 vue 2.0, 關於上面的 JEditor 是我封裝的 UEditor, 我的做法是將 dom 節點(參數名 renderTo)傳進去, 動態設置 id 屬性, 下面是 JEditor 部分源碼, 供參考:

...


var utils  = UE.utils;

var uiUtils = UE.ui.uiUtils;

var domUtils = UE.dom.domUtils;

var EventBase = UE.EventBase;

var ueConf = W.UEDITOR_CONFIG;

var doc = W.document;

var docEl = uiUtils.getViewportElement();

var basePath = UE.getUEBasePath();
JEditor.prototype.render = function(option) {

       ...
        var randomId = "jue-instance-" + Math.random().toString(16).substring(2);
        // 注意此處, 創建一個節點, 然後設置了 id 屬性

        var editorEl = domUtils.createElement(doc, "div", {"class": "jue-ui-editor", "id": randomId});
        me.renderTo.appendChild(editorEl);

        me.editorEl = editorEl;        
        me.editor = UE.getEditor(randomId, me.editorConfig);
        me.editor.addListener("beforeSelectionChange", function() {

            me.fireEvent("select");

        });
        me.editor.addListener("ready", function(editor) {

           me.isReady = true;

        });

... };

銷毀實例代碼, 這地方我也解決了很久, 因為是單頁應用,使用了 vue-router, 所以路由切換一定要注意銷毀調實例, 需要注意 UE.instants 中有所有實例的引用, 也需要刪除

JEditor.prototype.destroy = function() { var me = this; var uid = me.editor.uid;


        try {

            me.editor.destroy();
            if (typeof uid != "undefined") {

                uid = "ueditorInstant" + uid;
                delete UE.instants[uid];

            }

me.editor = null; me.toolbarEl= null; me.editorEl= null; me.renderTo.innserHTML = ""; } catch (e) { console.log("進入 clear 異常", e); } };

初始化設置內容, 需要判斷實例有沒有ready (注: 上面實例化代碼中綁定的 ready 監聽)

JEditor.prototype.setContent = function(html, isAppendTo, notFireSelectionchange) { var me = this;


        if (!me.editor) {

            return;

        }

if (!me.isReady) { var timmer = W.setInterval(function() { if (me.isReady) { me.editor.setContent(html, !!isAppendTo, !!notFireSelectionchange); me.focus(true); W.clearInterval(timmer); } }, 100); } else { me.editor.setContent(html, !!isAppendTo, !!notFireSelectionchange); me.focus(true); } };

希望能幫助到你和以後看到這個問題的同學.

第一次使用時也帶來了一些困擾，參考了一些資料，寫了個文檔，希望對大家有所幫助。

方法：vue2.0項目中使用Ueditor富文本編輯器示例 - 獨木成林 - 博客園

在線預覽：後台管理系統beta1.5

試一下：javascript - 求推薦vue2上可用的富文本插件 - SegmentFault

我個人的做法是建立一個UE全局變數，編輯器實例化的時候，給這個全局變數。就跟正常開發差不多

請問有沒有解決，我也遇到相同問題VUE無法集成ueditor，如果有解決，求一個集成方法；謝謝了