CKEditor - Make certain text read only - javascript

Calling CKEditor gurus to this question. I have a need to make only certain areas within my textbox readonly. These areas will be text and image URLS that will be enclosed by a span tag with a predefined class type. I have checked the documentation but cant seem to find anything that will help me accomplish this. They all make the entire textbox go read only.
I have heard that there are hacks that can make this work, but Im not sure which way to go about doing it. I am fairly new to this, so please bear with me if my question seems absurd.
Thanks for any help..

Use widgets.
Take a look on some samples first and then focus on Placeholder plugin (based on widgets), which does pretty much what you'd like to have. You can either customize it or create something new, referring to existing code and official guides.
Note: You need CKEditor 4.3+.

Related

I am trying to make my extension change background-color of every event containing certain word(or set of characters) in Google Calendar

I am taking my first steps in JS, I know that I have a lot of reading ahead of me, but I am searching and trying to make this little thing work. Maybe I've chosen a bad example of a website for testing influence of chrome extensions, but maybe solving this problem will somehow enlighten me and help with future learning.
I want to change the background-color of google calendar events depending on words/set of characters they contain.
I tried using contains() selector which seemed to work on simplier websites (I could see the CSS applied in DevTools) but divs with events on Google Calendar stay untouched.
Can the script somehow be blocked by Google Calendar? Should I use some of the permissions listed on developer.chrome.com/extensions ?
Sorry that I am not attaching any code at the moment, I don't have it with me, and I can't recreate it from the head. I wanted to post it in my free time, and at least get some new ideas.
I'll be grateful for any help!

Create Custom Tags for TinyMce or Filter Input?

I don't have a specific technical question, but was hoping to get some thoughts on two different approaches that I am considering. I am trying to build custom shorthand tags for the TinyMCE editor, and most of the tutorials online go the route of creating a custom plugin for the TinyMCE editor, such as this.
When I originally thought about this problem, I didn't think it would be necessary to do this, but rather create a JS script that filtered through the users input and more-or-less did a 'find and replace' - looking for tags and replacing them with whatever.
I think the second approach would be easier and less complicated, but I was just hoping to get some thoughts before I started working on this tomorrow.

How to keep text from being selected

I've googled and searched around here on SO, but haven't found an answer to this question.
I know that this can be done using user-select:none with CSS, but as you can see, this is not a standard property, and I'm trying to find an alternative.
NOTE: I don't care if the users can get the text. It's for the design of the site, not to keep users from copy/paste.
I know that this CAN be done with JS. I do not know it it's difficult, or how to do it, but if you type HTML or JS code into the HTMLObfuscator, there is an option on the left that can disable text selection. Is this easy to implement into certain parts of my site? Or is it rather complicated (like in the obfuscator)?
Thank you for all your help . . .
CSS way:
element:before {
content:'whatever';
};
before and after make it part of the element.
Use the CSS property pointer-events: none;. It will keep the mouse from having any effect on the text at all, so don't use this for a button or anything like that.

Autocomplete/tagging jQuery plugin with ordering and cursor

I'm looking for a jQuery tagging/autocomplete plugin where I tags can be inserted mid-order - and control over this is possible with the mouse.
I've gone through everything I can find, but am yet to find a plugin with all the requirements I'm looking for. I'm looking for a Facebook-esque tagging plugin, yet I'll be working with pre-defined phrases, and building them up into a paragraph, so I need to be able to control the order, and potentially insert a new tag in the middle of an existing selection.
The closest I've found to having this functionality is TextBoxList and the 'Facebook Theme' of JQuery TokenInput. Both of these however only allow you to move the cursor between tags with the arrow keys - and I'm looking to be able to mouseclick to control the cursor aswell.
Anyone know anything that's got what I need? A few other key essentials are free-text input (when no tag matches), remote source of data, and form submission, but I'd hope they'll be easier to retro-fit to something else!
An update for Googlers - I went with jQuery-tokeninput, and have spent the day modifying the library to work with mouse input. When I get time to tidy the code, and check how it works with other themes, I may put a pull request on GitHub, it seems like fairly useful functionality to me.

iBooks highlight style for buttons on website

I want to implement a special highlighting to by buttons. The one, I found on the iBooks app for iPhone/iPad suites my needs. I think it is very complex due to the fact that all the strokes are looking different. I could use some CSS-Sprites-Voodoo but I don’t think I will be able to assign these styles so easily. Has anyone done something similar? I would be happy to hear some ideas.
Thanks, Floyd
http://i.stack.imgur.com/SlfHx.png
I tried this out: http://jsfiddle.net/brianflanagan/XUpFc/ Basically, the gist is to grab any selected text and wrap it in a span to give it a class with a background image. Not sure how useful this is, but it might get you started...

Categories

Resources