fckeditor エディタでのカスタムページ区切り
ここでは、スクリプトホームエディタリファレンスいくつかの記事を整理するために特別に、友人より少しサポートを使用します。
編集部が改ページを制御する際に、手動で改ページを挿入するのが面倒だったため、FCKで改ページを挿入する際の挿入文字を
によって修正されました。
開く /editor/js/
fckeditorcode_gecko.js と fckeditorcode_ie.js を検索してください。
fckには2つのjsファイルがあり、fckeditor_code_gecko.jsは非IE用です。そのため、2つのjsファイルを変更する必要があります。
これで将来的にページネーションを挿入しやすくなるので、こんな大きな文字列は必要ない。
見つけてください。
var FCKPageBreakCommand=function(){this.Name='PageBreak';};FCKPageBreakCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep(); var e=FCK.EditorDocument.createElement('Div')このコマンドは、FCKページブレーク・コマンドです。
と続く文字は、自分のページの改行に合わせて変更するだけです。
fck ページブレーク修正
FKCで追加されたデフォルトのページブレークは、 <div style="page-break-after: always"><span style="display: none"> </span> </div>.B です。
記事をページ分割するために、String.split("pagination")メソッドで記事をページ分割してString型の配列を返していますが、ダブルクォート同士は入れ子にできないので、split()メソッドのパラメータを設定する方法はありません。
デフォルトのページネーション文字を変更する方法。
jsファイルを探します。fckeditor/editor/js/ ディレクトリの下に、修正が必要な js ファイルが二つあります: fckeditorcode_ie.js (IE ブラウザ用の設定), fckeditorcode_gecko.js (IE 以外のブラウザ用の設定).
jsファイルから以下のコードを探し、変更してください。
var FCKPageBreakCommand=function()
{this.Name='PageBreak';};
FCKPageBreakCommand.prototype.Execute=function()
{FCKUndo.SaveUndoStep();
var e=FCK.EditorDocument.createElement('DIV'); //here is the creation of <div> tag, no need to change here
e.style.pageBreakAfter='always'; //here is the style for <div> add it, remove it.
e.innerHTML='<span style="DISPLAY:none"> </span>';
//here is the content added in the <div>, modify it; mine is modified to e.innerHTML='[jb51page]'; that is, only one space;
保存して、投稿を追加し直しても変化なし、保存してデータを見ると、改ページ位置が、<div>[jb51page]</div>に変化しています。
記事のページネーションはsplit("<div>[jb51page]</div>")メソッドで分割することが可能です。
以下のメソッドは、dedecmsから参照されています。
fckeditorのページネーションに関する記述を修正する場合は、必ずオリジナルのものを読むようにしてください。直接上書きすると、問題が発生しやすくなります。
dedecms メソッドです。
var FCKPageBreakCommand=function(){this.Name='PageBreak';};
FCKPageBreakCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();
var e=FCK.EditorDocument.createElement('P');e.innerHTML='[jb51page]';
Scripting Homeの考え方。
var FCKPageBreakCommand=function(){this.Name='PageBreak';};
FCKPageBreakCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();
FCK.EditorDocument.selection.createRange().text='[jb51page]';
注)使用しているバージョンの関係で、FCKUndo.SaveUndoStep()があり、これが付いていないとエディタが表示されません。皆さん必要に応じて修正してください。
後者は、dedecmsが追加した小さな関数を見つけたので、それを参考にするとよいでしょう
var FCKLineBrCommand=function(){this.Name='LineBr';};
FCKLineBrCommand.prototype.Execute=function(){FCK.EditorDocument.selection.createRange().pasteHTML("<br/>");};
FCKLineBrCommand.prototype.GetState=function(){return 0;}
var FCKQuoteCommand=function(){this.Name='Quote';};
FCKQuoteCommand.prototype.Execute=function(){
var quoteString = "<table style='border-right: #cccccc 1px dotted; table-layout: fixed; border-top: #cccccc 1px dotted; border-left: # cccccc 1px dotted; border-bottom: #cccccc 1px dotted' cellspacing=0 cellpadding=6 width='95%' align=center border=0>\r\n";
quoteString += "<tr><td style='word-wrap: break-word' bgcolor='#fdfddf'>\r\n<font color='#FF0000'>Here's the quote:</ font><br>\r\n";
quoteString += "</td></tr></table>\r\n";
FCK.EditorDocument.selection.createRange().pasteHTML(quoteString);
};
FCKQuoteCommand.prototype.GetState=function(){return 0;}
関連
-
Prismコードハイライトの変更にCodeタグのサポートは含まれません。
-
よく使われるHTMLリッチテキストコンパイラーの紹介 UEdit, CKEditor, TinyMCE, HTMLArea, eWebEditor, KindEditor
-
Google ChromeをeWebEditorに対応させる方法
-
IE10、IE11でのFCKEditorの非互換性の問題を解決しました。
-
ckeditorプラグインの簡単な開発例
-
jsp版ueditor1.2.5について 一部問題解決(画像のアップロード失敗)
-
Jsを使用してFCKeditorエディタでコンテンツを取得、挿入、変更する。
-
最新版CKEditorの設定方法とプラグイン(Plugin)の書き方例
-
ZeroClipboardを使用したクロスブラウザでのクリップボードへのコピー問題の解決法
-
UEditor エディタのクロスドメインアップロードソリューション
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
UEditorエディターの使用を前提とした開発 細かい配慮がなされている
-
ckeditorカスタムプラグインの使用方法説明
-
SyntaxHighlighterのコードハイライトで改行がない場合の対処法
-
オンラインエディタeWebEditorをIE8,IE9に対応させる方法
-
php UEditor Baiduエディタインストールと使用方法の共有
-
Ueditor BaiduエディターのHtmlモード自動置換スタイルソリューション
-
Baiduのエディタueditorコンテンツエディタが自動的にPタグ、およびPタグの置換を設定する
-
ckeditor syntaxhighlighter コードハイライタープラグイン 設定 共有
-
FckeditorエディタによるPHP環境での画像アップロード設定 詳細チュートリアル
-
ブラウザfckeditorは、画像をアップロードすることはできません後IE9は、ポップアップフローティングコンテンツは、解決策を表示しません