百度富文本编辑器vue

百度富文本编辑器文档:http://fex.baidu.com/ueditor/#start-config
下载ueditor官网:http://ueditor.baidu.com/website/download.html

下面我们先在html中引用百度编辑器
1.在html中引入

    <!-- 配置文件 -->
   <script type="text/javascript" src="ueditor.config.js"></script>

   <!-- 编辑器源码文件 -->
   <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 语言文件 -->
   <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

2.在body中加富文本编辑器的容器,并初始化

<!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        我的初始化
    </script>
  <!-- 在script中初始化 -->
<!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container',{
            serverUrl:"http://test.io/php/controller.php?action=config"//这里是上传图片后端处理文件地址(自行替换),如果不使用图片上传,则不需要配置
        });
    </script>

3.此时如果后端配置好了,就已经可以使用了,后端需要修改上传限制以及上传返回路径
举例子:

{
    "imageUrlPrefix": "http://test.io", /* 图片访问路径前缀 ,加入以后获取富文本编辑器内容时,图片地址会以这个前缀开头*/
    "imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* 这是上传后的路径*/

4.最后放到服务器的样式:(其中图片是我自己在编辑器页面加入的)


微信图片_20190306162116.png

vue中使用ueditor

1.先下载富文本编辑器,并将所需要的文件放到指定文件夹中,我 是放在plugins中.


image.png

这里需要注意,在开发的时候如果开启了webpack-dev-server,在开发的时候可能是显示的,但是打包以后到生产环境的时候会找不到dialog等文件,需要你在webpack.config.prod.js文件中修改,加入CopyWebpackPlugin插件,将plugins中文件复制到对应目录dist/js目录下:

 new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, './src/plugins/ueditor'),
        to: path.join(__dirname,"./dist/js/"),
        ignore: ['.*']
      }
    ]),

2.在入口文件中导入我们需要的文件,我这里是main.js

// 导入编辑器
import './plugins/ueditor/ueditor.config.js'
import './plugins/ueditor/ueditor.all.js'
import './plugins/ueditor/lang/zh-cn/zh-cn.js'
import './plugins/ueditor/ueditor.parse.js'

3.为了多次使用富文本编辑器,我们使用vue的组件

<template>
  <div class="editor-box">
    <script id="editor" type="text/plain"></script>
  </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>
<style>
.editor-box{
    padding: 0 40px;
}

</style>

4.在所需的页面中导入组件

<template>
    <div>
              <div class="editor-container">
                  <UE :defaultMsg='defaultMsg' :config='config' ref="ue"></UE>
              </div>
     </div>
<template>
<script>
import UE from '../../../components/subcom/ueditor.vue';
  export default {
  components: {
        UE
    },
    data () {
      return {
        defaultMsg:'测试',
            config:{
                serverUrl:"http://test.io/php/controller.php?action=config",
                autoHeightEnabled: true,
                autoFloatEnabled: true
            },
      }
    },
  
    mounted() {
     this.$refs.ue.style="width:auto";
    },
    methods: {

    },

  }
</script>
<style>

</style>

这是我自己的项目中显示的富文本编辑器


image.png

5.这里补充一下,编辑器宽度自适应的问题,解决方案就是在config参数里面修改:initialFrameWidth:'100%',即可解决自适应问题。
6解决自动将div转换成p标签,在config参数里面修改:allowDivTransToP:false,即可解决。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容