ueditor插件

/**可能我说ueditor插件,”老人们“都知道是什么了,但是对于一些小菜鸟来说很陌生,简单点就是类似word文档编辑器一样有很多选择,上个图片大家更容易懂


那么要如何使用呢,如果大家是原生得来写项目直接下载一个版本就ok了,注意下载下来的都放到项目中以免有些东西无法

使用出现问题,下载地址:  http://ueditor.baidu.com/website/download.html   

就算是页面中显示出来了也会有一些问题会有报错,因为本人也是帮同学看没有真正做过也没有深入去研究,只是听”老人“说和后台得配合,还有就是页面中如果有两个的时候也会有问题,等等。

但是如果时vue中要使用应该如何操作呢?给大家看一下我的

如果下载的ueditor包在vue中按我的方法无法显示出来,可以使用我的

https://github.com/Myboy74/ueditor.git

**/

vue配置:

这是我放置得目录



1. ueditor.config.js   


2. Main.js  引入   (具体地址输入自己的哦)

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'

 

3.text.vue

<template>
    <div>
        <div id="editor" style="width: 80%; height: 250px; margin: 0 auto"></div>
    </div>
</template>
<script>
    export default {
        name: 'UE',
        data () {
            return {
                editor: null
            }
        },
        props: {
            defaultMsg: {
                type: String
            },
            config: {
                type: Object
            }
        },
        mounted() {
            const _this = this;
            this.editor = UE.getEditor('editor', this.config); // 初始化UE
            this.editor.addListener("ready", function () {
                _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
            });
        },
        methods: {
            getUEContent() { // 获取内容方法
                return this.editor.getContent()
            }
        },
        destroyed() {
            this.editor.destroy();
        }
    }
</script>

 




### Redmine UEditor 插件安装、配置与使用 #### 文件准备 对于Redmine中集成UEditor插件,首先需要获取UEditor的相关资源文件。通常情况下,可以从百度开源项目页面下载适用于Web项目的UEditor版本[^1]。 #### 修改Redmine环境 编辑`bitnami\redmine-2.2.2.0\apache2\htdocs\index.html`这样的路径下对应的HTML入口文档可能不是直接操作UEditor的方式;然而,在某些部署环境中调整此文件可以间接影响到前端展示效果或加载特定脚本的位置[^2]。 #### 集成步骤概述 为了使UEditor能够在Redmine内正常工作,需按照如下指南进行: - **放置UEditor库**:将解压缩后的UEditor包放入Redmine应用能够访问的公共目录之下,比如`public/javascripts/ueditor`。 - **修改视图模板**:针对希望启用富文本编辑功能的具体模块(如Wiki页面或是议题描述),通过覆盖原有视图模板来引入UEditor所需的JavaScript和CSS资源链接。 - **初始化实例化对象**:利用自定义的JavaScript代码片段完成对指定textarea元素替换为UEditor编辑器界面的操作。 ```javascript // 假设在Redmine某个视图中的<script>标签内部执行下面这段JS逻辑 window.onload = function() { var ue = UE.getEditor('container'); // 'container'应对应实际表单控件ID }; ``` #### 特殊注意事项 考虑到不同版本间的兼容性差异以及安全因素的影响,在实施上述改动前建议充分测试并备份原始设置。此外,如果遇到权限控制方面的问题,则要检查服务器端关于静态文件服务策略是否允许跨域请求等细节。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值