编辑器可以直接弄一个按钮直接插入某个图片吗？帝国cms

帝国论坛 → 帝国网站管理系统交流区 → 帝国CMS使用交流 → 编辑器可以直接弄一个按钮直接插入某个图片吗？

【本版专题贴子】

gdxinge
用户头衔：进士

精华贴   ：0
发贴数   ：646
经验值   ：3239
注册时间：2010-05-14

信息

搜索

好友

发送悄悄话

【精益求精－帝国网站管理系统7.5正式版开源发布】 [第 1 楼]

编辑器可以直接弄一个按钮直接插入某个图片吗？

我想在newstext编辑器的旁边加一个固定的图片，就是点击后直接插入例如1.jpg这个图片？
要如何弄？

2025-05-27 23:26:14

已设置保密

顶部

引用

报告

编辑

删除

jiuhecai
用户头衔：探花

精华贴   ：0
发贴数   ：3184
经验值   ：9158
注册时间：2014-07-02

信息

搜索

好友

发送悄悄话

【免费开源－EBMA系统：更安全的MYSQL管理和备份系统】 [第 2 楼]

这个可以的

帝国插件插件定制。帝国临时工。查杀顽固木马。专业解决难题。qq--110102296

2025-05-28 06:26:32

已设置保密

顶部

引用

报告

编辑

删除

jiuhecai
用户头衔：探花

精华贴   ：0
发贴数   ：3184
经验值   ：9158
注册时间：2014-07-02

信息

搜索

好友

发送悄悄话

【精益求精－帝国网站管理系统7.5正式版开源发布】 [第 3 楼]

帝国cms  7.5+utf8下测试完美。

// by jiuhecai
// <script src='/e/extend/insertpic/insertpic.js'></script>

// == 配置区域（按需修改） ==
const CONFIG = {
  editorId: 'newstext',    // 编辑器对应的textarea ID
  imageUrl: 'http://xunsearch.75utf8.com/e/extend/insertpic/insertpic.jpeg', // 固定图片URL
  buttonText: '📷 插入图片',  // 按钮文字（或使用图标）
  buttonTitle: '插入预设图片' // 按钮悬停提示
};

// == 核心代码（无需修改） ==
(function() {
  let injected = false; // 防止重复注入

  // 1. 创建自定义按钮
  function createButton() {
const btn = document.createElement('button');
btn.type = 'button';
btn.title = CONFIG.buttonTitle;
btn.innerHTML = CONFIG.buttonText;
btn.style.cssText = `
   margin:0 4px; padding:6px 8px;
   border:1px solid #ddd; background:#f8f8f8;
   cursor:pointer; border-radius:3px;
`;

// 绑定点击事件
btn.addEventListener('click', () => {
   const editor = CKEDITOR.instances[CONFIG.editorId];
   if (editor) {
      editor.insertHtml(`<img src="${CONFIG.imageUrl}"
      alt="预设图片"
      style="max-width:100%; height:auto; display:block; margin:10px 0;">`);
   }
});

return btn;
  }

  // 2. 检测编辑器框架加载
  function checkEditor() {
// 优先检测 iframe 模式
return document.querySelector('.cke_top');
const iframe = document.querySelector('.cke_wysiwyg_frame');
if (iframe) {
   const doc = iframe.contentDocument || iframe.contentWindow.document;
   return doc.querySelector('.cke_top');
}
// 普通模式
return document.querySelector('.cke_top');
  }

  // 3. MutationObserver 配置
  const observer = new MutationObserver(mutations => {
if (injected) return;

const toolbar = checkEditor();
if (toolbar) {
   // 插入按钮到工具栏右侧
   const container = toolbar.querySelector('.cke_toolbar:last-child') || toolbar;
   container.after(createButton());
   injected = true; // 标记已注入
   observer.disconnect(); // 停止观察
}
  });

  // 4. 启动监听
  observer.observe(document, {
subtree: true,
childList: true,
attributes: false,
characterData: false
  });

  // 5. 防御性检测（处理延迟加载）
  setTimeout(() => {
if (!injected && checkEditor()) {
   observer.takeRecords().forEach(m => observer.observe(m.target, m));
}
  }, 3000);
})();

帝国插件插件定制。帝国临时工。查杀顽固木马。专业解决难题。qq--110102296

2025-05-28 07:38:26

已设置保密

顶部

引用

报告

编辑

删除