Vue富文本编辑之ckeditor

最新推荐文章于 2025-05-01 02:20:37 发布

dong__xue

最新推荐文章于 2025-05-01 02:20:37 发布

阅读量605

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/dong__xue/article/details/89371850

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在网页中引入并初始化Ckeditor富文本编辑器，包括核心文件的加载、textarea标签的定义及Ckeditor的个性化设置，如高度、工具栏选项和插件引入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入.js核心文件：

<script src="/static/vendor/ckeditor/ckeditor.js"></script>

页面定义textarea文本标签：

<textarea name="texteditor" placeholder="请认真填写真实有效的建议或反馈信息，内容不得少于50字" :maxlength="2500"></textarea>

初始化Ckeditor：

    initCkeditor () {
      // 标签name：texteditor
      window.CKEDITOR.replace('texteditor', {
        // 插入图片中预览图片框的文字
        image_previewText: ' ',
        // 设置高度
        height: 100,
        // 工具栏中的显示情况
        toolbar: [
          ['Format'],
          ['Bold', 'Italic']
        ],
        // 引入插件
        extraPlugins: 'confighelper',
        placeholder: ''
      }).on('instanceReady', function (e) {
        window.CKEDITOR.instances.texteditor.setData('')
      })
    },

placeholder的设置：下载confighelper插件放在plugins下即可生效