ueditor1_4_3_3-utf8-jsp 嵌入

1、首先去官网下载Ueditor,选择UTF-8版本
下载地址: http://ueditor.baidu.com/website/download.html#ueditor
2、在项目工程里面导入,新建一个Ueditor的文件夹,把解压之后的全部东西放进去。

3、新建一个JSP页面,并在页面上引用Ueditor的JS文件,路径自己调整。
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>
4、在页面上新建一个textarea的标签,如下:
<textarea id="container" name="container"
style="width: 800px; height: 400px; margin: 0 auto;">
</textarea>
5、实例化编辑器,这里用的是替代法,即把textarea替换为Ueditor编辑器
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor("container");
</script>
到此,基本配置就完了。
后台获取数据,在后台里面:
String word_content = request.getParameter("container"); 获取页面上的name="container "就行了

这里说一下自己嵌入时编写代码遇到的问题,在onload中添加:
var editor2;
onload = function() {
editor2 = UE.getEditor('container');
var notificationContent = $("#notificationContent").val();  //将内容显示到编辑器中
editor2.ready( function() {
editor2.setContent(notificationContent);
} );

}
切记:editor如果没有实例化完毕,无论setContent还是getContent调用都会提示错误,如果想要在onload中调用需要添加editor.ready(function(){xxxxxxx具体操作xxxxxxx});

                
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了封装vue-ueditor-wrap,可以按照以下步骤进行操作: 1.安装vue-ueditor-wrap和ueditor ```shell npm install vue-ueditor-wrap ueditor --save ``` 2.在main.js中引入ueditor ```javascript import Vue from 'vue' import App from './App.vue' import UEditor from 'vue-ueditor-wrap' import 'ueditor/ueditor.config.js' import 'ueditor/ueditor.all.min.js' import 'ueditor/lang/zh-cn/zh-cn.js' Vue.component('u-editor', UEditor) new Vue({ el: '#app', render: h => h(App) }) ``` 3.在组件中使用vue-ueditor-wrap ```vue <template> <div> <u-editor v-model="content"></u-editor> </div> </template> <script> export default { data() { return { content: '' } } } </script> ``` 4.封装vue-ueditor-wrap为一个独立的组件 ```vue <template> <div> <u-editor v-model="content"></u-editor> </div> </template> <script> import UEditor from 'vue-ueditor-wrap' import 'ueditor/ueditor.config.js' import 'ueditor/ueditor.all.min.js' import 'ueditor/lang/zh-cn/zh-cn.js' export default { name: 'VueUeditorWrap', components: { UEditor }, props: { value: { type: String, default: '' } }, data() { return { content: this.value } }, watch: { value(val) { this.content = val }, content(val) { this.$emit('input', val) } } } </script> ``` 5.在其他组件中使用封装好的vue-ueditor-wrap组件 ```vue <template> <div> <vue-ueditor-wrap v-model="content"></vue-ueditor-wrap> </div> </template> <script> import VueUeditorWrap from './VueUeditorWrap.vue' export default { components: { VueUeditorWrap }, data() { return { content: '' } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值