iceEditor 富文本编辑器的使用方法小结

最新推荐文章于 2024-07-20 18:05:54 发布

橘哥哥

最新推荐文章于 2024-07-20 18:05:54 发布

阅读量1.1k

点赞数 1

分类专栏： js iceEditor 富文本编辑器文章标签：前端

本文链接：https://blog.csdn.net/ju__ju/article/details/122193731

版权

js 同时被 3 个专栏收录

3 篇文章 1 订阅

订阅专栏

富文本编辑器

3 篇文章 0 订阅

订阅专栏

iceEditor

1 篇文章 0 订阅

订阅专栏

1.为什么选择iceEditor

因为最近使用Laya项目开发,不好通过npm装包等方法去引入富文本编辑器的插件,于是找到iceEditor这款,只需要通过js引入,即可快捷使用

2.使用方法

基本使用方法参考官方文档 iceEditor 官方文档

3.在vue项目中使用iceEditor 富文本编辑器的使用方法

1).将iceEditor项目下载到vue项目中的plugins下

2).index.html中引入相关css和js ,

注意需要放到body里面,而且引入顺序不能反,不然可能会报错!

<body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app" />
    <!-- built files will be auto injected -->
    <!--此处路径问题要注意,如果直接./plugins... 可能会有问题-->
    <link rel="stylesheet" href="<%= BASE_URL %>plugins/iceui/src/ui/ui.css">
    <script type="text/javascript" src="<%= BASE_URL %>plugins/iceui/src/ice.js"></script>
    <script type="text/javascript" src="<%= BASE_URL %>plugins/iceui/src/ui/ui.js"></script>
    <script type="text/javascript" src="<%= BASE_URL %>plugins/iceui/src/editor/iceEditor.min.js"> </script>
</body>

3).新建一个iceEditor组件,例如 iceEditor.vue

<template>
  <div class="editor">
    <div :id="curEditorId" class="iceEditor"></div>
  </div>
</template>
<script>

import { uuid2 } from '@/util/index'
export default {
  props: {
    editorId: {
      type: String,
      default() {
        // 动态生成UUID
        return uuid2()
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    },
    dir: {
      type: String,
      default: undefined
    }
  },

  data() {
    return {
      curEditorId: 'editor'
    }
  },
  created() {
    this.curEditorId = this.editorId
    const divDom = document.getElementById(this.curEditorId)
    console.debug(divDom)
    if (divDom != null) {
      this.curEditorId = 'editor2'
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const domId = this.curEditorId
      const divDom = document.getElementById(domId)
      console.debug(divDom)
      // eslint-disable-next-line no-undef
      ice.editor(domId, (editor) => {
        // this.iceEditorObj[domId] = editor
        if (this.disabled) editor.inputDisabled()
        else editor.inputEnable()
        editor.notMenu = ['files', 'music', 'video'] // 不需要的工具栏菜单
        editor.height = '200px' // 编辑器的高度
        editor.screenshotUpload = 0 // 截图粘贴直接上传到服务器
        // 创建编辑器
        editor.create()
        // 设置编辑器的内容
        editor.setValue(this.value)
        // 监听输入
        editor.inputCallback((html, text) => {
          //   this.formData[domId] = html
          console.debug(html, text)
        })
      })
    }
  }
}
</script>
<style lang="less">
.iceEditor {
  color: #333;
  .iceEditor-noselect {
    body {
      color: #333;
    }
  }
}
</style>

此处对id做了处理,因为要做的是考试相关的业务,会出现很多富文本编辑器,所以要保证id的唯一性

如果需要可以下载相关代码 uuid2 方法代码

如果富文本编辑器不会重复出现,把domId写死就行了

4).按需引入,然后组件传值,就行了

显示效果如下,功能还是挺全的

橘哥哥

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
iceEditor 富文本编辑器的使用方法小结

1.为什么选择iceEditor因为最近使用Laya项目开发,不好通过npm装包等方法去引入富文本编辑器的插件,于是找到iceEditor这款,只需要通过js引入,即可快捷使用2.使用方法基本使用方法参考官方文档iceEditor 官方文档3.在vue项目中使用iceEditor 富文本编辑器的使用方法1).将iceEditor项目下载到vue项目中的plugins下2).index.html中引入相关css和js ,注意需要放到body里面,而且引入顺序不能反...
复制链接

扫一扫

专栏目录