Inject Page Breaks Dynamically

We are currently working on a project using asp.net mvc3(c#). The project requires us to implement page breaks similar to Microsoft Word. It is essential for us to save the pagebreaks with different page sizes such as a4, letter, legal, etc.

Is there a way to control the page size of content in the ckeditor and insert page breaks directly inside the editor when it surpasses a certain height or size, mimicking the functionality found in MS Word?

Are there any alternative solutions available to achieve this feature?

javascriptasp.netasp.net-mvcckeditorwysiwyg

Answer №1

To achieve your desired layout, consider using print CSS as suggested by graphicdivine. You can create a CSS class with a definition for page-break-before and then dynamically apply this class to the first element on the page after the break.

Another approach would be:

br.pageBreak {
    page-break-after: always;
}

You can then add <br class="pageBreak" /> at the specific point where you want the page break to occur.

For more information:

Page breaks: http://www.w3.org/TR/css-print/#s.8.2

Page size: http://www.w3.org/TR/css-print/#s.8.3

You may also find this A List Apart article helpful: http://www.alistapart.com/articles/goingtoprint/

It's uncertain whether modifying CKEditor in this manner will be simple or not.

Answer №2

After conducting some research on Google, I stumbled upon an alternative solution for handling page breaks using the RichTextBoxSilverlight

Here are some of its key features:

  • The RichTextBox offers full support for paging and printing, allowing you to edit documents in Print Layout or Draft view similar to Microsoft Word. It supports continuous page flow while scrolling and facing multiple pages horizontally.

  • You can import and export RTF, Html, and plain text with ease. Load existing rich text or Html into the C1RichTextBox, make edits, and then export it back to RTF or Html.

  • Easily edit and format text with various fonts, decorations, colors, tables, images, lists, and more.

  • The RichTextBoxToolbar includes a range of commands such as Paste, Cut, Copy, Undo, Redo, Font options, Text Color settings, Alignment tools, Bullets/Numbering, Insert Image, Hyperlink management, Spell Check, and more.

  • Add and edit images seamlessly within the RichTextBox, including options to upload images from your computer or specify image URLs. Resize, select, and drag images directly on the document surface.

  • Easily zoom in on pages in both print layout and draft views.

  • Export RichTextBox content directly to PDF format.

  • Edit data confidently with undo and redo capabilities at your fingertips.

Answer №3

Consider experimenting with CSS2's page-break-before and page-break-after properties, but keep in mind the challenge of inserting them dynamically into your content.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the OR (||) operator malfunctioning in the Angular.forEach method?

I am faced with the challenge of manipulating a JSON array by applying certain conditions for removal: var data = [ {data1: "aaa", data2: "bbb", data3: "ccc"}, // First {data1: "ddd", data2: "eee", data3: "fff"}, // Second ...

javascriptarraysangularjs

Collaborating with SockJS connectivity

Currently, my Node.js backend is interacting with desktop clients using websockets. The communication from the server side is initiated from a web front-end and everything is functioning properly because I am storing the SockJS Connection instances in an ...

javascriptnode.jswebsocketsockjs

Issue encountered while attempting to start npm: Error code from NPM

I keep encountering the npm ENOENT error every time I attempt to execute npm start. I am unsure of what steps to take in order to resolve this issue. I have made efforts to adjust folder permissions. bryantcaruthers-> npm start npm ERR! code ENOENT npm ...

javascriptnode.jsnpmbackend

Typescript: Securing Data with the Crypto Module

I am currently working on encrypting a password using the built-in crypto module. Previously, I used createCipher which is now deprecated. I am wondering if there is still an effective way to achieve this. Here is the old code snippet: hashPassword(pass: ...

javascripttypescriptcryptojs

Following a successful login, the User ID fails to store in the session

I am a beginner in the world of coding and I am currently working on one of my first apps. I have encountered an issue with my log in function. After user registration, the user id is successfully saved in the session object. However, it does not save into ...

javascriptnode.jsmongodbexpressexpress-session

verifying the tags entered by the user

Although this question might come across as a bit cliché, it's actually my first time incorporating a "tagging" feature into one of my project websites. I want to ensure that I handle it correctly. Currently, I am using the same tagging system as se ...

c#phpasp.netvb.nettagging

Experiencing an anonymous condition post onChange event in a file input of type file - ReactJS

When using the input type file to upload images to strapi.io, I noticed that an unnamed state is being generated in the React dev tools. Can someone explain how this happened and how to assign a name to that state? https://i.sstatic.net/ZyYMM.png state c ...

javascriptreactjsimage-uploadreact-stateinput-type-file

ReactJS - ref returns a value of "undefined"

I'm currently working on a project using ReactJS alongside NextJS. I've encountered an issue where my console is showing 'undefined' when I try to set a ref. This is quite puzzling to me, and I'm struggling to find a solution to th ...

javascriptreactjspositionref

What is the proper way to insert a line break within a string in HTML code?

Trying to simplify my code, I've turned to using Nunjucks to pass a group of strings to a function that will then display them. This is what it looks like: {% macro DisplayStrings(strings) %} {% for item in strings %} <div>{{ item.strin ...

javascripthtmlnunjucks

Attempting to transmit a dynamic array of promises from Angular to an Express server

Currently, I am attempting to send an array of promises to an express app in order to retrieve data from a mongo database. The behavior seems to be working fine on the front end. In this scenario, both objects are sent to the server and resolved using $q ...

javascriptangularjsexpressangular-promise

Passing images as props to be utilized with next/image in NextJS

Below is the content of my index.js file: import Head from 'next/head' import Layout, { siteTitle } from '../components/layout' import Homecard from '../components/homecard' import logo from '../public/images/logo.jpg&apo ...

javascriptreactjsnext.js

What's the deal with this route being a 404 error?

I'm currently working on incorporating a new route into Express, specifically for handling 404 errors. Despite my efforts to configure the route in a similar manner to others, I am encountering some difficulties. var repomapRouter = require('./ ...

javascriptnode.jsexpressrouter

Would you like to learn how to display the value of a different component in this specific Angular 2 code and beyond

Hey there, I need your expertise to review this code and help me locate the issue causing variable "itemCount" to not display any value in about.component.html while everything works fine in home.component.html. I am attempting to only show "itemCount" in ...

javascriptangulartypescript

How come JSON.parse is altering the data within nested arrays?

In my journey to master Angular 2, I decided to challenge myself by creating a Connect Four game using Angular CLI back when it was still utilizing SystemJS. Now, with the switch to the new Webpack-based CLI, I am encountering a peculiar issue... The fun ...

javascripttypescriptweb-workerangular-cli

Divide the array of words into segments based on the maximum character limit

I am looking for a way to divide an array of words into chunks based on a maximum number of characters: const maxChar = 50 const arrOfWords =['Emma','Woodhouse,','handsome,','clever,','and','rich,&apo ...

javascriptarraysreactjscpu-word

Discover the shortest path on Google Maps and customize your route using a specific address or latitude/longitude coordinates. Choose between the default current location marker or customize one to fit your needs

Currently facing an issue with Google Distance Map. Our situation involves multiple locations, and I am trying to generate a map from my current location to the nearest address among the given multiple addresses. The map creation is already set up and fu ...

javascriptphpjquerywordpress

Vue component does not display FabricJS image

Currently, I am facing an issue where I want to manipulate images on a canvas using FabricJS inside a VueJS app. In the view component, there is a prop called background which I pass in and then use fabric.Image.fromURL() to load it onto the canvas. Howeve ...

javascriptvue.jsfabricjs

Mastering VSCode IntelliSense: Unleashing the Power of Type Declarations

In my JavaScript projects, I aim to include TypeScript types sparingly to leverage IntelliSense for better code completions and receive warnings about type-related issues. To set up typechecking in JS, I created a jsconfig.json file and rely mostly on JSD ...

javascripttypescriptjsdoc

When using mapStateToProps in React Redux, it may encounter difficulties in reading nested values

I feel like I must be overlooking something very obvious, possibly related to Immutable.js/React/Redux. Here is a method I have... function mapStateToProps(state){ console.log(JSON.stringify(state.test)); //prints all nested properties and object ...

javascriptreactjsreduximmutable.js

Angular 2 orderByPipe not displaying any results initially

At first, I thought the reason for not displaying anything initially was due to it not being async and returning an empty array. Everything worked fine without the pipe, but the posts weren't shown on startup. After submitting a post, all the posts ap ...

javascriptangulartypescriptfirebasefirebase-realtime-database