CKEditor - 使用Bootstrap js/css + ckeditor預覽中的自定義css

我想在ckeditor預覽中使用引導程序js/css 和自定義css文件。
因此，舉例來說，如果我寫在CKEditor的源代碼視圖此代碼...CKEditor - 使用Bootstrap js/css + ckeditor預覽中的自定義css

<div class="row"> 
    <div class="col-xs-6" style="background-color: red;"> 
    <p>First column</p> 
    </div> 
    <div class="col-xs-6" style="background-color: green;"> 
    <p>Second column</p> 
    </div> 
</div>

...我應該在CKEditor的預覽看到兩個50％的寬度列（一紅一個綠）。

我發現你可以添加css文件到ckeditor與contentsCss或addContentsCss配置（請參閱ckeditor文檔的解釋），但bootstrap js文件呢？我怎樣才能將js文件添加到ckeditor預覽中？

我已經知道（爲了允許class/styles標籤）我需要配置ACF。現在我只是用速戰速決完全禁用ACF：

CKEDITOR.replace('editor1', {allowedContent: true});

語境：
我的管理員和前端的主題是不同的（包括引導爲主，但不同的），我用「的CKEditor經典編輯「或」框架編輯「，這意味着編輯器會爲自己創建一個臨時元素。
基本上...這是默認/標準ckeditor實現（版本4.4.7）。

!!!!編輯!!!! 我的解決方案：

/*Javascript files appear to be NOT necessary (if your page is bootstrap-based) 
CKEDITOR.scriptLoader.load(['https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js','https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js']); 
*/ 
CKEDITOR.config.contentsCss = ['https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css','mycustom.css']; 
CKEDITOR.replace('editor1', {allowedContent: true});

如果你想出一個更好的解決方案，讓我知道。
在此期間，如果您發現此問題有用，請投票提高其知名度。

來源

2015-06-24 Igor Carmagna

有一個contentPreview事件，它允許預覽HTML的操作，就像

CKEDITOR.replace('editor', { 
    on: { 
     contentPreview: function(evt) { 
      evt.data.dataValue = '<b style="color: red; font-size: 10em">B</b>'; 
     } 
    } 
});

來源

2015-06-24 12:43:21 oleq

謝謝你的回答。但是，這怎麼能幫助我將bootstrap css和js應用於預覽內容？（響應行爲，網格系統，幫助類等等） –

我用我的解決方案更新了問題......您怎麼看待它？ –

我認爲CKEditor的Bootstrap Utils會幫助你。它允許您自動將Bootstrap的樣式包含（附加）到您的CKEditor文檔（預覽）區域，因爲此包中包含Bootstrap Include CSS/JS加載項。

enter image description here

來源

2015-06-29 15:42:08 Davis

CKEditor - 使用Bootstrap js/css + ckeditor預覽中的自定義css

回答

相關問題